📭🏬 ↝ Some styling & old planet content

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();
@@ -50,6 +63,7 @@ export default function PlanetGallery() {
 
       if (data != null) {
         setPlanets(data);
+        console.log(planets);
       }
 
       if (error) {
@@ -92,10 +106,89 @@ export default function PlanetGallery() {
   );
 }
 
+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", 1)
+        .lt("id", 75);
+
+      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) => (
+        <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/ui/Typography.tsx

@@ -0,0 +1,148 @@
+import { CSSProperties, forwardRef, ReactNode } from "react"
+
+import styles from "../../styles/ui/Typography.module.scss"
+
+interface TitleProps {
+    children?: ReactNode
+    className?: string
+    style?: CSSProperties
+    level?: 1 | 2 | 3 | 4 | 5
+}
+
+interface TextProps {
+    children?: ReactNode
+    className?: string
+    style?: CSSProperties
+    type?: "default" | "secondary" | "success" | "warning" | "danger"
+    mark?: boolean
+    code?: boolean
+    strong?: boolean
+    disabled?: boolean
+    underline?: boolean
+    strikethrough?: boolean
+    small?: boolean
+    weight?: number
+    lineHeight?: string
+    align?: "left" | "center" | "right" | "justify"
+}
+
+interface LinkProps {
+    children?: ReactNode
+    className?: string
+    style?: CSSProperties
+    target?: "_blank" | "_self" | "_parent" | "_top" | "framename"
+    href?: string
+    onClick?: any
+}
+
+interface TypographyProps {
+    children?: ReactNode
+    className?: string
+    style?: CSSProperties
+}
+
+function Title(props: TitleProps) {
+    const { children, className = "", style, level = 2 } = props
+
+    const HeadingTag = `h${level}` as keyof JSX.IntrinsicElements
+
+    return (
+        <HeadingTag
+            className={`${styles.title} ${styles[`h${level}`]} ${className}`}
+            style={style}
+        >
+            {children}
+        </HeadingTag>
+    )
+}
+
+function Text(props: TextProps) {
+    const {
+        children,
+        className = "",
+        style,
+        type = "default",
+        mark,
+        code,
+        strong,
+        disabled = false,
+        small = false,
+        underline = false,
+        strikethrough = false,
+        weight,
+        lineHeight
+    } = props
+
+    const Tag =
+        (mark && "mark") || (code && "code") || (strong && "strong") || "span"
+
+    return (
+        <Tag
+            style={{
+                ...(underline
+                    ? {
+                          borderBottom: "1px solid var(--color-n700)"
+                      }
+                    : {}),
+                ...(strikethrough
+                    ? {
+                          textDecoration: "line-through"
+                      }
+                    : {}),
+                ...(weight
+                    ? {
+                          fontWeight: weight
+                      }
+                    : {}),
+                ...(lineHeight
+                    ? {
+                          lineHeight: lineHeight
+                      }
+                    : {}),
+                ...style
+            }}
+            className={`${styles.text} ${styles[type]} ${
+                styles[Tag]
+            } ${className} ${small ? styles.small : ""} ${
+                disabled ? styles.disabled : ""
+            }`}
+        >
+            {children}
+        </Tag>
+    )
+}
+
+const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
+    props,
+    ref
+) {
+    const { children, className, style, target, href, onClick } = props
+
+    return (
+        <a
+            onClick={onClick}
+            className={`${styles.link} ${className}`}
+            href={href}
+            target={target}
+            rel="noopener noreferrer"
+            style={style}
+            ref={ref}
+        >
+            {children}
+        </a>
+    )
+})
+
+export default function Typography(props: TypographyProps) {
+    const { children, className, style } = props
+
+    return (
+        <div style={style} className={`${styles.typography} ${className}`}>
+            {children}
+        </div>
+    )
+}
+
+Typography.Title = Title
+Typography.Text = Text
+Typography.Link = Link

pages/archive/planetGarden.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import { ArchivedGarden } from "../../components/Content/Planets/GalleryList";
+
+export default function GardenPage() {
+    return (
+        <ArchivedGarden />
+    )
+}

pages/index.tsx

@@ -6,6 +6,13 @@ import CardForum from "../components/Content/DiscussCard";
 import { useRouter } from "next/router";
 import Login from "./login";
 
+import styles from '../styles/Landing.module.css';
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Star Sailors"
+}
+
 export default function Home() {
     const session = useSession();
     const supabase = useSupabaseClient();
@@ -36,6 +43,16 @@ export default function Home() {
     }
 
     return (
-      <Layout>Hello</Layout>
-    )
+      <div className="grid grid-cols-2 h-screen-navbar">
+        <div className="bg-teal border-r">
+          <div className="p-4">
+            <div className="mx-auto tablet:mx-0">
+              <div className="grid grid-cols-1 content-grid home-hero">
+                <h1 className="text-4xl font-bold">Test</h1>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
 }