From f27cb80e66d01a23be5c87410e8af070770263e9 Mon Sep 17 00:00:00 2001 From: Liam Arbuckle Date: Fri, 20 Oct 2023 11:15:02 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=91=80=E2=9C=8D=F0=9F=8F=BB=20=E2=86=9D?= =?UTF-8?q?=20Archived=20section?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Content/Planets/GalleryList.tsx | 104 +++++++- components/Section/Layout.tsx | 56 +++- components/Section/Sidebar.tsx | 296 ++++++++++++++++++++- pages/archive/planetGarden.tsx | 8 + pages/garden.tsx | 7 +- 5 files changed, 447 insertions(+), 24 deletions(-) create mode 100644 pages/archive/planetGarden.tsx diff --git a/components/Content/Planets/GalleryList.tsx b/components/Content/Planets/GalleryList.tsx index e359dfc9..96ea657d 100644 --- a/components/Content/Planets/GalleryList.tsx +++ b/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 ( + + + + + + ); +} + export default function PlanetGallery() { const supabase = useSupabaseClient(); const session = useSession(); @@ -35,6 +48,73 @@ export default function PlanetGallery() { getPlanets(); }, [session]); + const getPlanets = async (): Promise => { + 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 ; + } + + return ( + <> + {planets.map((planet, index) => ( + + ))} + + ); +} + +export function ArchivedPlanetGallery() { + const supabase = useSupabaseClient(); + const session = useSession(); + const [planets, setPlanets] = useState([]); + + useEffect(() => { + getPlanets(); + }, [session]); + const getPlanets = async (): Promise => { try { let query = supabase @@ -42,7 +122,7 @@ export default function PlanetGallery() { .select("*") .order("created_at", { ascending: false }) .limit(200) - .gte("id", 67) + .gte("id", 1) .lt("id", 75); const { data, error } = await query; @@ -85,7 +165,7 @@ export default function PlanetGallery() { return ( <> {planets.map((planet, index) => ( - + ))} ); @@ -93,8 +173,22 @@ export default function PlanetGallery() { export const Garden: React.FC = () => { return ( -
- -
+ <> +
+ + +
+ + ); +}; + +export const ArchivedGarden: React.FC = () => { + return ( + <> +
+ + +
+ ); }; \ No newline at end of file diff --git a/components/Section/Layout.tsx b/components/Section/Layout.tsx index f3fab0fc..5965b282 100644 --- a/components/Section/Layout.tsx +++ b/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 = ({ children }) => { return ( <> - -
- -
{children}
- {isMobile && ( -
- -
- )} +
+ +
+ {/* */} + {children} +
+ {isMobile && ( +
+
{children}
+ +
+ )} ); }; export default Layout; +export const GardenLayout: React.FC = ({ 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 ( + <> +
+ {/* */} + {children} +
+ {isMobile && ( +
+
{children}
+ +
+ )} + + ); +}; + export const LayoutNoNav: React.FC = ({ children }) => { const [isMobile, setIsMobile] = useState(false); diff --git a/components/Section/Sidebar.tsx b/components/Section/Sidebar.tsx index 36c4cb16..455117a5 100644 --- a/components/Section/Sidebar.tsx +++ b/components/Section/Sidebar.tsx @@ -80,7 +80,7 @@ const Sidebar: React.FC = () => { >

- Kategori Diskusi + Components

    {navCategoryItems.map((item, idx) => ( @@ -89,7 +89,7 @@ const Sidebar: React.FC = () => {

- Pengaturan + Your stuff

    {navSettingItems.map((item, idx) => ( @@ -122,7 +122,7 @@ const Sidebar: React.FC = () => { onClick={() => setOpenAside(false)} > - Tutup Menu + Menu
@@ -132,11 +132,297 @@ const Sidebar: React.FC = () => { className="w-full flex items-center justify-start space-x-2" > - Buka Menu + Menu
); }; -export default Sidebar; \ No newline at end of file +export default Sidebar; + +export function DesktopSidebar () { + return ( + +); +}; + +export function GardenSidebar () { + return ( + +); +}; \ No newline at end of file diff --git a/pages/archive/planetGarden.tsx b/pages/archive/planetGarden.tsx new file mode 100644 index 00000000..03c9106a --- /dev/null +++ b/pages/archive/planetGarden.tsx @@ -0,0 +1,8 @@ +import React from "react"; +import { ArchivedGarden } from "../../components/Content/Planets/GalleryList"; + +export default function GardenPage() { + return ( + + ) +} \ No newline at end of file diff --git a/pages/garden.tsx b/pages/garden.tsx index b5fcfca9..4e197b85 100644 --- a/pages/garden.tsx +++ b/pages/garden.tsx @@ -1,12 +1,11 @@ import React from "react"; // import Garden from "../components/Gameplay/Garden"; import { Garden } from "../components/Content/Planets/GalleryList"; -import Layout, { LayoutNoNav } from "../components/Section/Layout"; +import Layout, { GardenLayout, LayoutNoNav } from "../components/Section/Layout"; +import Sidebar from "../components/Section/Sidebar"; export default function GardenPage() { return ( - - - + ) } \ No newline at end of file