🤖🚞 ↝ New planets element in garden section, build confirmed

components/Content/Planets/GalleryList.tsx

@@ -0,0 +1,102 @@
+import React, { useEffect, useState } from "react";
+import Link from "next/link";
+import { Container } from "lucide-react";
+import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
+import Login from "../../../pages/login";
+import Bottombar from "../../Core/BottomBar";
+
+interface Planet {
+  id: string;
+  content: string;
+  cover: string;
+}
+
+interface Props {
+  planet: Planet;
+  position: { top: number; left: number };
+}
+
+export function PlanetGalleryCard({ planet, position }: Props) {
+  const { id, content, cover } = planet;
+
+  return (
+    <Link legacyBehavior href={`https://starsailors.space/tests/planets/${planet.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();
+  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)
+        .lt("id", 69);
+
+      const { data, error } = await query;
+
+      if (data != null) {
+        setPlanets(data);
+      }
+
+      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 const Garden: React.FC = () => {
+  return (
+    <div style={{ backgroundImage: `url('/bg.jpg')` }} className="bg-cover bg-center h-screen flex items-center justify-center relative">
+      <PlanetGallery />
+    </div>
+  );
+};

components/Section/Layout.tsx

@@ -40,4 +40,36 @@ const Layout: React.FC<DashboardLayoutProps> = ({ children }) => {
   );
 };
 
-export default Layout;
+export default Layout;
+
+export const LayoutNoNav: 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 (
+    <>
+      <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>
+    </>
+  );
+};

components/Section/Sidebar.tsx

@@ -26,8 +26,8 @@ const navCategoryItems = [
     Icon: StarHalfIcon,
   },
   {
-    url: "/profile",
-    label: "PROFILE",
+    url: "/garden",
+    label: "Garden",
     Icon: User2Icon,
   },
 ];

pages/garden.tsx

@@ -1,8 +1,12 @@
 import React from "react";
-import Garden from "../components/Gameplay/Garden";
+// import Garden from "../components/Gameplay/Garden";
+import { Garden } from "../components/Content/Planets/GalleryList";
+import Layout, { LayoutNoNav } from "../components/Section/Layout";
 
 export default function GardenPage() {
     return (
-        <Garden anomalies={[]} />
+        <LayoutNoNav>
+            <Garden />
+        </LayoutNoNav>
     )
 }

pages/planets/map.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+// import Garden from "../components/Gameplay/Garden";
+import { Garden } from "../../components/Content/Planets/GalleryList";
+import Layout, { LayoutNoNav } from "../../components/Section/Layout";
+
+export default function GardenPage() {
+    return (
+        <LayoutNoNav>
+            <Garden />
+        </LayoutNoNav>
+    )
+}