adds resizeable panels to map and table views

client/package.json

@@ -38,6 +38,7 @@
     "react": "^18",
     "react-dom": "^18",
     "react-map-gl": "7.1.7",
+    "react-resizable-panels": "2.1.6",
     "rooks": "7.14.1",
     "tailwind-merge": "2.5.3",
     "tailwindcss-animate": "1.0.7",

client/src/app/(projects)/page.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { useMap } from "react-map-gl";
+
 import { motion } from "framer-motion";
 import { useAtomValue } from "jotai";
 
@@ -11,11 +13,25 @@ import ProjectsHeader from "@/containers/projects/header";
 import ProjectsMap from "@/containers/projects/map";
 import ProjectsTable from "@/containers/projects/table-visualization";
 
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
 import { useSidebar } from "@/components/ui/sidebar";
 
+const PANEL_MIN_SIZE = 25;
+
 export default function Projects() {
   const { filtersOpen } = useAtomValue(projectsUIState);
   const { open: navOpen } = useSidebar();
+  const { default: map } = useMap();
+
+  const onResizeMapPanel = () => {
+    if (!map) return;
+
+    map.resize();
+  };
 
   return (
     <motion.div
@@ -43,14 +59,25 @@ export default function Projects() {
       </motion.aside>
       <div className="flex flex-1 flex-col">
         <ProjectsHeader />
-        <div className="grid flex-grow grid-rows-2 gap-3">
-          <section className="flex-1">
+        <ResizablePanelGroup
+          direction="vertical"
+          className="grid flex-grow grid-rows-2 gap-3"
+        >
+          <ResizablePanel
+            className="flex flex-1 flex-col"
+            minSize={PANEL_MIN_SIZE}
+            onResize={onResizeMapPanel}
+          >
             <ProjectsMap />
-          </section>
-          <section className="flex-1">
+          </ResizablePanel>
+          <ResizableHandle withHandle className="my-3" />
+          <ResizablePanel
+            className="flex flex-1 flex-col"
+            minSize={PANEL_MIN_SIZE}
+          >
             <ProjectsTable />
-          </section>
-        </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
       </div>
     </motion.div>
   );

client/src/components/ui/resizable.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import * as ResizablePrimitive from "react-resizable-panels";
+
+import { DragHandleDots2Icon } from "@radix-ui/react-icons";
+
+import { cn } from "@/lib/utils";
+
+const ResizablePanelGroup = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
+  <ResizablePrimitive.PanelGroup
+    className={cn(
+      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+      className,
+    )}
+    {...props}
+  />
+);
+
+const ResizablePanel = ResizablePrimitive.Panel;
+
+const ResizableHandle = ({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean;
+}) => (
+  <ResizablePrimitive.PanelResizeHandle
+    className={cn(
+      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      className,
+    )}
+    {...props}
+  >
+    {withHandle && (
+      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+        <DragHandleDots2Icon className="h-2.5 w-2.5" />
+      </div>
+    )}
+  </ResizablePrimitive.PanelResizeHandle>
+);
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };

client/src/containers/projects/table-visualization/data-table/index.tsx

@@ -32,7 +32,7 @@ export function ProjectsTable<TData, TValue>({
   });
 
   return (
-    <div className="rounded-md border">
+    <div className="flex-1 rounded-md border">
       <Table>
         <TableHeader>
           {table.getHeaderGroups().map((headerGroup) => (

client/src/containers/projects/table-visualization/index.tsx

@@ -13,7 +13,7 @@ import {
 
 export default function TableVisualization() {
   return (
-    <div>
+    <>
       <ToolbarProjectsTable />
       <ProjectsTable columns={[]} data={[]} />
       <div className="flex">
@@ -46,6 +46,6 @@ export default function TableVisualization() {
           </ul>
         </div>
       </div>
-    </div>
+    </>
   );
 }

client/src/containers/projects/table-visualization/toolbar/info-download/index.tsx

@@ -1,5 +1,5 @@
 import { InfoCircledIcon } from "@radix-ui/react-icons";
-import { DownloadIcon, ExpandIcon } from "lucide-react";
+import { ExpandIcon } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
 import {
@@ -12,10 +12,6 @@ import {
 } from "@/components/ui/dialog";
 
 export default function InfoDownloadProjectsTable() {
-  const onDownloadTableData = () => {
-    //   todo
-  };
-
   const onClickInfo = () => {
     //   todo
   };
@@ -67,12 +63,6 @@ export default function InfoDownloadProjectsTable() {
           </DialogHeader>
         </DialogContent>
       </Dialog>
-      <Button onClick={onDownloadTableData} asChild>
-        <>
-          <DownloadIcon />
-          <span>Download</span>
-        </>
-      </Button>
       <Button onClick={onToggleExpand}>
         <ExpandIcon />
       </Button>