👀✍🏻 ↝ Archived section

components/Content/Planets/GalleryList.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 import Link from "next/link";
 import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
 import Login from "../../../pages/login";
+import { GardenSidebar } from "../../Section/Sidebar";
 
 interface Planet {
   id: string;
@@ -26,6 +27,18 @@ export function PlanetGalleryCard({ planet, position }: Props) {
   );
 }
 
+function ArchivedPlanetGalleryCard({ planet, position }: Props) {
+  const { id, content, cover } = planet;
+
+  return (
+    <Link legacyBehavior href={`https://starprotocol-og3j6xuus-gizmotronn.vercel.app/tests/planets/${id}`}>
+      <a style={{ position: "absolute", top: position.top, left: position.left }}>
+        <img src={cover} className="w-1/2" />
+      </a>
+    </Link>
+  );
+}
+
 export default function PlanetGallery() {
   const supabase = useSupabaseClient();
   const session = useSession();
@@ -35,14 +48,81 @@ export default function PlanetGallery() {
     getPlanets();
   }, [session]);
 
+  const getPlanets = async (): Promise<void> => {
+    try {
+      let query = supabase
+        // .from("planetsss")
+        .from("basePlanets")
+        .select("*")
+        .order("created_at", { ascending: false })
+        .limit(200)
+        // .gte("id", 67)
+        // .lt("id", 75);
+
+      const { data, error } = await query;
+
+      if (data != null) {
+        setPlanets(data);
+        console.log(planets);
+      }
+
+      if (error) {
+        throw error;
+      }
+    } catch (error: any) {
+      alert(error.message);
+    }
+  };
+
+  const getRandomPosition = (): { top: number; left: number } => {
+    const top = Math.floor(Math.random() * window.innerHeight);
+    const left = Math.floor(Math.random() * window.innerWidth);
+    return { top, left };
+  };
+
+  const buttonStyle = {
+    backgroundColor: "rgba(255, 255, 255, 0.2)",
+    border: "none",
+    color: "black",
+    transition: "background-color 0.3s ease",
+    cursor: "pointer",
+    marginRight: "8px",
+  };
+
+  const activeButtonStyle = {
+    backgroundColor: "rgba(255, 255, 255, 0.3)",
+  };
+
+  if (!session) {
+    return <Login />;
+  }
+
+  return (
+    <>
+      {planets.map((planet, index) => (
+        <PlanetGalleryCard key={planet.id} planet={planet} position={getRandomPosition()} />
+      ))}
+    </>
+  );
+}
+
+export function ArchivedPlanetGallery() {
+  const supabase = useSupabaseClient();
+  const session = useSession();
+  const [planets, setPlanets] = useState<Planet[]>([]);
+
+  useEffect(() => {
+    getPlanets();
+  }, [session]);
+
   const getPlanets = async (): Promise<void> => {
     try {
       let query = supabase
         .from("planetsss")
         .select("*")
         .order("created_at", { ascending: false })
         .limit(200)
-        .gte("id", 67)
+        .gte("id", 1)
         .lt("id", 75);
 
       const { data, error } = await query;
@@ -85,16 +165,30 @@ export default function PlanetGallery() {
   return (
     <>
       {planets.map((planet, index) => (
-        <PlanetGalleryCard key={planet.id} planet={planet} position={getRandomPosition()} />
+        <ArchivedPlanetGalleryCard key={planet.id} planet={planet} position={getRandomPosition()} />
       ))}
     </>
   );
 }
 
 export const Garden: React.FC = () => {
   return (
-    <div style={{ backgroundImage: `url('/garden.png')` }} className="bg-cover bg-center h-screen flex items-center justify-center relative">
-      <PlanetGallery />
-    </div>
+    <>
+      <div style={{ backgroundImage: `url('/garden.png')` }} className="bg-cover bg-center h-screen flex items-center justify-center relative">
+        <GardenSidebar />
+        <PlanetGallery />
+      </div>
+    </>
+  );
+};
+
+export const ArchivedGarden: React.FC = () => {
+  return (
+    <>
+      <div style={{ backgroundImage: `url('/garden.png')` }} className="bg-cover bg-center h-screen flex items-center justify-center relative">
+        <GardenSidebar />
+        <ArchivedPlanetGallery />
+      </div>
+    </>
   );
 };

components/Section/Layout.tsx

@@ -1,4 +1,4 @@
-import Sidebar from "./Sidebar";
+import Sidebar, { DesktopSidebar } from "./Sidebar";
 import Navbar from "./Navbar";
 import React, { ReactNode, useEffect, useState } from "react";
 import Bottombar from "../Core/BottomBar";
@@ -26,22 +26,58 @@ const Layout: React.FC<DashboardLayoutProps> = ({ children }) => {
 
   return (
     <>
-      <Navbar />
-      <div className="flex relative items-start">
-        <Sidebar />
-        <main className="h-max pb-10 grow">{children}</main>
-        {isMobile && (
-          <div className="w-full md:hidden fixed bottom-0 left-0 z-50">
-            <Bottombar />
-          </div>
-        )}
+      <div className="hidden md:flex relative items-start">
+        <DesktopSidebar />
+        <main className="h-max pb-10 grow ml-64 pt-6">
+          {/* <Navbar /> */}
+          {children}
+        </main>
       </div>
+      {isMobile && (
+        <div className="md:hidden overflow-y-auto h-screen p-4">
+          <main className="h-max pb-10 grow">{children}</main>
+          <Bottombar />
+        </div>
+      )}
     </>
   );
 };
 
 export default Layout;
 
+export const GardenLayout: React.FC<DashboardLayoutProps> = ({ children }) => {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    // Check if window is defined before accessing it
+    if (typeof window !== "undefined") {
+      const checkIsMobile = () => {
+        setIsMobile(window.innerWidth <= 768);
+      };
+      checkIsMobile();
+      window.addEventListener("resize", checkIsMobile);
+      return () => {
+        window.removeEventListener("resize", checkIsMobile);
+      };
+    }
+  }, []);
+
+  return (
+    <>
+        <main className="grow pt-6">
+          {/* <DesktopSidebar /> */}
+          {children}
+        </main>
+      {isMobile && (
+        <div className="md:hidden overflow-y-auto h-screen p-4">
+          <main className="h-max pb-10 grow">{children}</main>
+          <Bottombar />
+        </div>
+      )}
+    </>
+  );
+};
+
 export const LayoutNoNav: React.FC<DashboardLayoutProps> = ({ children }) => {
   const [isMobile, setIsMobile] = useState(false);