🏺💸 ↝ Crossing the mountains: uniform one-panel layout initialisation …

…for planet pages
Signal-K · Jan 5, 2024 · aecf2f5 · aecf2f5
1 parent 3e24201
commit aecf2f5
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 3 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/components/Content/Planets/Base/IndividualBasePlanet.tsx b/components/Content/Planets/Base/IndividualBasePlanet.tsx
@@ -248,6 +248,75 @@ export default function IndividualBasePlanet({ id }: { id: string }) {
 };
 
 export function IndividualBasePlanetDesktop({ id }: { id: string }) {
+  const router = useRouter();
+  const [screenWidth, setScreenWidth] = useState<number>(0);
+
+  const supabase = useSupabaseClient();
+  const session = useSession();
+
+  const [planetData, setPlanetData] = useState(null);
+  // const [planetPosts, setPlanetPosts] = useState([]);
+  const { id: planetId } = router.query;
+
+  const [sectors, setPlanetSectors] = useState([]);
+
+  const getPlanetData = async () => {
+    try {
+      const { data, error } = await supabase
+        .from("basePlanets")
+        .select("*")
+        .eq("id", planetId)
+        .single();
+
+      if (data) {
+        setPlanetData(data);
+      }
+
+      if (error) {
+        throw error;
+      }
+    } catch (error: any) {
+      console.error(error.message);
+    }
+  };
+
+  if (!planetData) {
+    return <div>Loading...</div>;
+  }
+
+  const { content, avatar_url, type, deepnote, cover } = planetData;
+
+  return (
+    <div className="h-screen relative">
+      {/* Background Styles */}
+      <style jsx global>
+        {`
+      body {
+        background: url('/garden.png') center/cover;
+        );
+      }
+      @media only screen and (max-width: 1000px) {
+        body {
+          background: url('/void.png') center/cover;
+        }
+      }
+      @media only screen and (max-width: 767px) {
+          .planet-heading {
+            color: white;
+            font-size: 24px;
+            text-align: center;
+            margin-bottom: 10px;
+          }
+    `}
+      </style>
+      <div className="bg-cover bg-center h-screen flex items-center justify-center relative">
+        <div className="underline"></div>
+      </div>
+    </div>
+  );
+}
+
+export function IndividualBasePlanetDesktopTwoPanel({ id }: { id: string }) {
     const router = useRouter();
 
     const supabase = useSupabaseClient();

diff --git a/pages/garden.tsx b/pages/garden.tsx
@@ -7,7 +7,7 @@ import Navbar from "../components/Section/Navbar";
 export default function GardenPage() {
     return (
         <LayoutNoNav>
-            <Navbar />
+            {/* <Navbar /> */}
             <Garden />
         </LayoutNoNav>
     )

diff --git a/pages/planets/[id].tsx b/pages/planets/[id].tsx
@@ -59,14 +59,35 @@ export default function PlanetIdPage () {
                 </div>
             </div>
         );
-    }
+    };
+
+    // Two panel layout for desktop devices, with orbitals
+    if (!isMobile && !id && router) {
+        return (
+            <>
+                <Navbar />
+                <div className="flex h-screen">
+                    <div className="w-3/6 overflow-y-auto mr-30 z-40">
+                        {/* <br /><ActivateButton /> */}
+                        <IndividualBasePlanetDesktop id={id as string} />
+                    </div>
+                    <div className="w-3/6 bg-gray-50 overflow-y-auto">
+                        <div className="py-3">
+                            <BasePlanetData planetId={{ id: id as string }} />
+                            <PostFormCardAnomalyTag planetId={id} onPost={null} />
+                            <ClassificationFeedForIndividualPlanet planetId={{ id: id as string }} />
+                        </div>
+                    </div>
+                </div>
+            </>
+        );
+    };
 
     return (
         <>
             <Navbar />
             <div className="flex h-screen">
                 <div className="w-3/6 overflow-y-auto mr-30 z-40">
-                        {/* <br /><ActivateButton /> */}
                         <IndividualBasePlanetDesktop id={id as string} />
                     </div>
                     <div className="w-3/6 bg-gray-50 overflow-y-auto">