🧿🚂 ↝ Merge pull request #94 from Signal-K/FCDB-21

🍑🧿 ↝ FCDB-21: Above & beyond - sectors are viewable, writeable & have a fairly nice UI
Signal-K · Jan 9, 2024 · ccf5a07 · ccf5a07
2 parents 4552f40 + 2477ece
commit ccf5a07
Show file tree

Hide file tree

Showing 30 changed files with 3,036 additions and 209 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/components/Blocks/DetectedAnomalies.tsx b/components/Blocks/DetectedAnomalies.tsx
@@ -0,0 +1,100 @@
+import React from "react";
+
+export default function DetectedAnomaliesBlock() {
+    return (
+        <div className="w-[289px] h-[249px] relative">
+    <div className="w-[289px] h-[249px] left-0 top-[249px] absolute bg-white rounded-[10px]" />
+    <div className="w-[253.07px] h-[186px] left-[17px] top-[19px] absolute">
+        <div className="w-[94.74px] h-[26.66px] left-[158.33px] top-0 absolute">
+            <div className="w-[94.74px] h-[26.66px] left-0 top-0 absolute bg-white rounded-[20px] shadow" />
+            <div className="left-[9.84px] top-[8px] absolute text-center text-zinc-700 text-[8px] font-bold font-['Inter']">High to Low</div>
+            <div className="w-[14.21px] h-4 left-[68.69px] top-[5.33px] absolute" />
+        </div>
+        <div className="left-0 top-[4.34px] absolute text-zinc-700 text-sm font-semibold font-['Inter']">Detected Anomolies</div>
+        <div className="w-[217px] h-[132px] left-[0.33px] top-[54px] absolute">
+            <div className="w-[58px] h-[127px] left-0 top-[3px] absolute flex-col justify-start items-start gap-[11px] inline-flex">
+                <div className="text-zinc-700 text-[10px] font-normal font-['Inter']">Exoplanets</div>
+                <div className="text-zinc-700 text-[10px] font-normal font-['Inter']">Black Holes</div>
+                <div className="flex-col justify-start items-start gap-2.5 flex">
+                    <div className="w-[49px] text-zinc-700 text-[10px] font-normal font-['Inter']">Stars</div>
+                </div>
+                <div className="text-zinc-700 text-[10px] font-normal font-['Inter']">Meteors</div>
+                <div className="text-zinc-700 text-[10px] font-normal font-['Inter']">Asteroids</div>
+                <div className="text-zinc-700 text-[10px] font-normal font-['Inter']">Unidentified</div>
+            </div>
+            <div className="w-3.5 h-[132px] left-[203px] top-0 absolute flex-col justify-start items-center gap-2 inline-flex">
+                <div className="text-center text-zinc-700 text-xs font-normal font-['Inter']">12</div>
+                <div className="text-center text-zinc-700 text-xs font-normal font-['Inter']">11</div>
+                <div className="text-center text-zinc-700 text-xs font-normal font-['Inter']">10</div>
+                <div className="text-center text-zinc-700 text-xs font-normal font-['Inter']">8</div>
+                <div className="text-center text-zinc-700 text-xs font-normal font-['Inter']">5</div>
+                <div className="text-center text-zinc-700 text-xs font-normal font-['Inter']">2</div>
+            </div>
+        </div>
+        <div className="w-[74px] h-[124px] left-[89.33px] top-[58px] absolute flex-col justify-start items-start gap-[13px] inline-flex">
+            <div className="w-2.5 h-[74px] origin-top-left rotate-90 bg-sky-300 rounded-[100px]" />
+            <div className="w-2.5 h-[70px] origin-top-left rotate-90 bg-sky-300 rounded-[100px]" />
+            <div className="w-2.5 h-[66px] origin-top-left rotate-90 bg-sky-300 rounded-[100px]" />
+            <div className="w-2.5 h-[54px] origin-top-left rotate-90 bg-sky-300 rounded-[100px]" />
+            <div className="w-2.5 h-[45px] origin-top-left rotate-90 bg-sky-300 rounded-[100px]" />
+            <div className="w-2.5 h-[29px] origin-top-left rotate-90 bg-sky-300 rounded-[100px]" />
+        </div>
+    </div>
+</div>
+    );
+};
+
+export const CurrentSilfur: React.FC = () => {
+    return (
+      <div className="w-[150px] h-[92px] relative">
+        <div className="w-[150px] h-[92px] left-0 top-[92px] absolute bg-white rounded-[10px]" />
+        <div className="w-[110px] left-[20px] top-[14px] absolute text-zinc-700 text-sm font-semibold font-['Inter']">
+          Current Balance
+        </div>
+        <div className="left-[31px] top-[53.50px] absolute">
+          <span className="text-zinc-700 text-sm font-bold font-['Inter']">19,750 </span>
+          <span className="text-amber-400 text-sm font-bold font-['Inter']">Silfur</span>
+        </div>
+      </div>
+    );
+  };
+
+export function MobilePlanetTest () {
+    return (
+        <div className="w-[1060px] h-[2212.87px] relative bg-white">
+    <div className="w-[1060px] h-[2212.87px] left-0 top-0 absolute bg-black bg-opacity-30" />
+    <div className="w-[1402px] h-[1386px] px-[61px] py-[66px] left-[359px] top-[-595px] absolute bg-yellow-300 bg-opacity-40 rounded-[9999px]" />
+    <div className="w-[638px] h-[638px] left-[172px] top-[961px] absolute">
+        <div className="w-[638px] h-[638px] left-0 top-0 absolute bg-purple-700 bg-opacity-50 rounded-full blur-[199.80px]" />
+        <img className="w-[358.39px] h-[394px] left-[171px] top-[88px] absolute" src="https://via.placeholder.com/358x394" />
+    </div>
+    <img className="w-[106px] h-[108.28px] left-[25px] top-[718px] absolute" src="https://via.placeholder.com/106x108" />
+    <div className="left-[339px] top-[31px] absolute text-center text-gray-200 text-[66.67px] font-normal font-['Anonymous Pro'] tracking-[21.33px]">ETHERON</div>
+    <div className="left-[56px] top-[145px] absolute flex-col justify-start items-start gap-[31px] inline-flex">
+        <div className="flex-col justify-start items-start gap-[4.75px] flex">
+            <div className="text-center text-purple-500 text-2xl font-semibold font-['Inter'] tracking-[3.84px]">GALAXY</div>
+            <div className="text-center text-white text-opacity-90 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-purple-500 text-2xl font-semibold font-['Inter'] uppercase tracking-[3.84px]">Diameter</div>
+            <div className="text-center text-white text-opacity-90 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-purple-500 text-2xl font-semibold font-['Inter'] uppercase tracking-[3.84px]">Day Length</div>
+            <div className="text-center text-white text-opacity-90 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-purple-500 text-2xl font-semibold font-['Inter'] uppercase tracking-[3.84px]">Avg Temperature</div>
+            <div className="text-center text-white text-opacity-90 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-purple-500 text-2xl font-semibold font-['Inter'] uppercase tracking-[3.84px]">Climate</div>
+            <div className="text-center text-white text-opacity-90 text-2xl font-normal font-['Inter']">Tropical</div>
+        </div>
+    </div>
+    <div className="w-[946px] h-[0px] left-[56px] top-[98px] absolute border border-white"></div>
+    <img className="w-[230px] h-[230px] left-[437.29px] top-[1037.39px] absolute origin-top-left rotate-[-86.76deg]" src="https://via.placeholder.com/230x230" />
+    <img className="w-[131px] h-[131px] left-[1016.38px] top-[116px] absolute origin-top-left rotate-[70.37deg]" src="https://via.placeholder.com/131x131" />
+</div>
+    )
+}
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>
+    );
+};