📸🌴 ↝ Adding stuff to the index feed, not quite sure yet

Signal-K · Jan 6, 2024 · d62817e · d62817e
1 parent 8020aea
commit d62817e
Show file tree

Hide file tree

Showing 4 changed files with 140 additions and 3 deletions.
diff --git a/components/Blocks/HomePlanetStats.tsx b/components/Blocks/HomePlanetStats.tsx
@@ -0,0 +1,98 @@
+import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
+import React, { useEffect, useState } from "react";
+
+export default function HomePlanetStats() {
+    const supabase = useSupabaseClient();
+    const session = useSession();
+
+    const [homePlanetData, setHomePlanetData] = useState(null);
+
+    useEffect(() => {
+        const fetchPlanetData = async () => {
+            if (!session) {
+                return;
+            };
+
+            try {
+                const { data, error } = await supabase
+                    .from('basePlanets')
+                    .select('*')
+                    // .eq('id', 1)
+                    .single();
+
+                if (data) {
+                    setHomePlanetData(data);
+                };
+
+                if (error) {
+                    throw error;
+                }
+
+                console.log(data);
+            } catch (error: any) {
+                console.error(error.message);
+            };
+        };
+    }, [session]);
+
+    // if (!homePlanetData) {
+    //     return null;
+    // }
+
+    // const { content, avatar_url, type, deepnote, cover, ticId, temperatureEq, smaxis, mass } = homePlanetData;
+
+    return (
+        <center><div className="w-[1231px] h-[792px] px-2.5 py-5 bg-gray-200 rounded-[15px] flex-col justify-between items-center inline-flex">
+    <div className="h-[621px] p-5 justify-center items-center gap-[69px] inline-flex">
+        <div className="w-11 h-11 relative" />
+        <div className="self-stretch py-5 flex-col justify-start items-center gap-8 inline-flex">
+            <div className="self-stretch h-[63.02px] pb-[26px] flex-col justify-start items-center gap-[5px] flex">
+                {/* <div className="text-center text-gray-50 text-[32px] font-normal font-['Anonymous Pro'] tracking-[10.24px]">{content}</div> */}
+                <div className="w-[472px] h-[0px] border-2 border-gray-200"></div>
+            </div>
+            <div className="w-[350px] h-[350px] pl-[17px] pr-[18px] pt-2.5 pb-[10.38px] justify-center items-center inline-flex">
+                <div className="w-[315px] h-[329.62px] flex-col justify-center items-center inline-flex" />
+            </div>
+            <div className="self-stretch h-[54px] px-5 justify-between items-center inline-flex">
+                <div className="w-[109px] self-stretch p-4 bg-white bg-opacity-25 rounded-md shadow justify-center items-center gap-2 flex">
+                    <div className="text-neutral-50 text-xl font-medium font-['Inter'] leading-tight">Preview</div>
+                </div>
+                <div className="w-[109px] h-[54px] p-4 bg-stone-950 rounded-md shadow justify-center items-center gap-2 flex">
+                    <div className="text-neutral-50 text-xl font-medium font-['Inter'] leading-tight">Select</div>
+                </div>
+            </div>
+        </div>
+        <div className="w-[404px] pl-[26px] pr-5 pt-[30px] pb-10 bg-stone-950 rounded-[10px] flex-col justify-start items-start gap-[30px] inline-flex">
+            <div className="self-stretch h-[68px] py-5 flex-col justify-start items-start gap-2.5 flex">
+                <div className="justify-start items-center gap-2.5 inline-flex">
+                    <div className="text-white text-[32px] font-semibold font-['Inter'] leading-7">Planet Overview</div>
+                </div>
+            </div>
+            <div className="self-stretch h-[433.77px] flex-col justify-start items-start gap-[30px] flex">
+                <div className="flex-col justify-start items-start gap-[4.75px] flex">
+                    <div className="text-center text-white text-opacity-40 text-2xl font-semibold font-['Inter'] tracking-[3.84px]">GALAXY</div>
+                    <div className="text-center text-white text-opacity-30 text-2xl font-normal font-['Inter']">Sombrero</div>
+                </div>
+                <div className="flex-col justify-start items-start gap-[4.75px] flex">
+                    <div className="text-center text-white text-opacity-40 text-2xl font-semibold font-['Inter'] uppercase tracking-[3.84px]">Diameter</div>
+                    <div className="text-center text-white text-opacity-30 text-2xl font-normal font-['Inter']">56,780 km</div>
+                </div>
+                <div className="flex-col justify-start items-start gap-[4.75px] flex">
+                    <div className="text-center text-white text-opacity-40 text-2xl font-semibold font-['Inter'] uppercase tracking-[3.84px]">Day Length</div>
+                    <div className="text-center text-white text-opacity-30 text-2xl font-normal font-['Inter']">12 Earth hours</div>
+                </div>
+                <div className="flex-col justify-start items-start gap-[4.75px] flex">
+                    <div className="text-center text-white text-opacity-40 text-2xl font-semibold font-['Inter'] uppercase tracking-[3.84px]">Avg Temperature</div>
+                    <div className="text-center text-white text-opacity-30 text-2xl font-normal font-['Inter']">60°C to 90°C</div>
+                </div>
+                <div className="flex-col justify-start items-start gap-[4.75px] flex">
+                    <div className="text-center text-white text-opacity-40 text-2xl font-semibold font-['Inter'] uppercase tracking-[3.84px]">Climate</div>
+                    <div className="text-center text-white text-opacity-30 text-2xl font-normal font-['Inter']">Tropical</div>
+                </div>
+            </div>
+        </div>
+        <div className="w-11 h-11 relative origin-top-left rotate-180" />
+    </div>
+</div></center>
+    );
+};
diff --git a/components/Content/Inventory/ItemGroup.tsx b/components/Content/Inventory/ItemGroup.tsx
@@ -28,6 +28,40 @@ export function InventoryMenu() {
     );
 };
 
+export function SelectedItem() {
+    return (
+        <div className="w-[235px] h-[792px] px-2.5 py-5 bg-black bg-opacity-40 rounded-[15px] flex-col justify-start items-center gap-2.5 inline-flex">
+    <div className="h-[267px] relative">
+        <div className="w-[215px] h-12 left-0 top-0 absolute justify-center items-center inline-flex">
+            <div className="grow shrink basis-0 px-5 flex-col justify-center items-center gap-[4.75px] inline-flex">
+                <div className="self-stretch text-center text-emerald-300 text-xl font-bold font-['Inter'] uppercase tracking-[3.20px]">Selected item</div>
+            </div>
+        </div>
+        <div className="w-[215px] h-[215px] px-2.5 py-5 left-0 top-[52px] absolute justify-center items-start inline-flex">
+            <div className="w-[175px] h-[175px] bg-white bg-opacity-20 rounded-[15px] justify-center items-center gap-2.5 flex">
+                <div className="text-center text-white text-base font-bold font-['Inter'] uppercase tracking-[2.56px]">IMAGE</div>
+            </div>
+        </div>
+    </div>
+    <div className="self-stretch grow shrink basis-0 flex-col justify-start items-center gap-4 flex">
+        <div className="self-stretch h-9 py-1.5 flex-col justify-center items-center gap-[4.75px] flex">
+            <div className="self-stretch text-center text-white text-xl font-medium font-['Inter'] uppercase tracking-[3.20px]">iTEM sTATS</div>
+        </div>
+        <div className="h-[105px] relative">
+            <div className="w-[215px] h-[52px] px-4 py-3.5 left-0 top-0 absolute border-b border-neutral-400 justify-between items-center inline-flex">
+                <div className="text-center text-white text-xl font-medium font-['Inter'] uppercase tracking-[3.20px]">quantity:</div>
+                <div className="grow shrink basis-0 text-right text-emerald-300 text-xl font-medium font-['Inter'] uppercase tracking-[3.20px]">4</div>
+            </div>
+            <div className="w-[215px] h-[52px] px-4 py-3.5 left-0 top-[53px] absolute border-b border-neutral-400 justify-between items-center inline-flex">
+                <div className="text-center text-white text-xl font-medium font-['Inter'] uppercase tracking-[3.20px]">Rarity:</div>
+                <div className="grow shrink basis-0 text-right text-purple-500 text-xl font-medium font-['Inter'] uppercase tracking-[3.20px]">epic</div>
+            </div>
+        </div>
+    </div>
+</div>
+    );
+};
+
 export function UserBackpackInventory() {
     return (
         <div className="w-[472px] h-[792px] px-5 pt-5 pb-1.5 bg-black bg-opacity-40 rounded-[15px] flex-col justify-start items-center gap-7 inline-flex">

diff --git a/pages/feed/index.tsx b/pages/feed/index.tsx
@@ -5,6 +5,7 @@ import Layout from "../../components/Section/Layout";
 import CardForum from "../../components/Content/DiscussCard";
 import ClassificationFeed from "../../components/Content/ClassificationFeed";
 import CreatePostForm from "../../components/Content/CreatePostForm";
+import HomePlanetStats from "../../components/Blocks/HomePlanetStats";
 
 export default function Home() {
     const session = useSession();
@@ -35,6 +36,9 @@ export default function Home() {
 
       return (
         <Layout>
+          <div className="py-10">
+            <HomePlanetStats />
+          </div>
           <div className="py-10">
             <ClassificationFeed custommaxWidth={customMaxWidth} />
           </div>

diff --git a/pages/inventory/index.tsx b/pages/inventory/index.tsx
@@ -1,12 +1,13 @@
 import React from "react";
-import InventoryItemsGroup, { InventoryMenu, UserBackpackInventory } from "../../components/Content/Inventory/ItemGroup";
+import InventoryItemsGroup, { InventoryMenu, SelectedItem, UserBackpackInventory } from "../../components/Content/Inventory/ItemGroup";
 import Layout, { InventoryLayout } from "../../components/Section/Layout";
 
 export default function Inventory() {
     return (
       <InventoryLayout>
-        <div className="grid grid-cols-3 gap-4 px-5">
-            <div><UserBackpackInventory /></div>
+        <div className="grid grid-cols-6 gap-2 px-5">
+          <div className="col-span-2 px-5"><SelectedItem /></div>
+          <div className="col-span-4 px-2"><UserBackpackInventory /></div>
         </div>
       </InventoryLayout>
     );