poc: resizable panels

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

@@ -1,7 +1,5 @@
 "use client";
 
-import { useMap } from "react-map-gl";
-
 import { motion } from "framer-motion";
 import { useAtomValue } from "jotai";
 
@@ -13,22 +11,11 @@ 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";
 
 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
@@ -54,25 +41,17 @@ export default function Projects() {
       >
         <ProjectsFilters />
       </motion.aside>
-      <ResizablePanelGroup
-        className="flex flex-1 flex-col overflow-hidden"
-        direction="vertical"
-      >
+      <div className="flex flex-1 flex-col">
         <ProjectsHeader />
-        {/*<div className="grid flex-grow grid-rows-2 gap-3">*/}
-        <ResizablePanel
-          className="flex-1"
-          onResize={onResizeMapPanel}
-          minSize={25}
-        >
-          <ProjectsMap />
-        </ResizablePanel>
-        <ResizableHandle withHandle className="my-5" />
-        <ResizablePanel className="flex-1" minSize={25}>
-          <ProjectsTable />
-        </ResizablePanel>
-        {/*</div>*/}
-      </ResizablePanelGroup>
+        <div className="grid flex-grow grid-rows-2 gap-3">
+          <section className="flex-1">
+            <ProjectsMap />
+          </section>
+          <section className="flex-1">
+            <ProjectsTable />
+          </section>
+        </div>
+      </div>
     </motion.div>
   );
 }