💽🤘🏻 ↝ Minor UI changes

Signal-K · Jan 6, 2024 · 61f55d0 · 61f55d0
1 parent 2966a17
commit 61f55d0
Show file tree

Hide file tree

Showing 3 changed files with 243 additions and 1 deletion.
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/Content/ClassificationFeed.tsx b/components/Content/ClassificationFeed.tsx
@@ -124,6 +124,147 @@ export function MultiClassificationFeed({ custommaxWidth = '85%' }) {
   );
 }
 
+export function ClassificationFeedDemo() {
+  return (
+    <div className="w-[1359px] h-[1161px] flex-col justify-start items-center gap-[23px] inline-flex">
+    <div className="self-stretch justify-center items-center gap-[60px] inline-flex">
+        <div className="justify-center items-center gap-[69px] flex">
+            <div className="w-[946px] h-[67.03px] flex-col justify-center items-center inline-flex">
+                <div className="text-center text-black text-[66.67px] font-normal font-['Anonymous Pro'] tracking-[21.33px]">FEED</div>
+                <div className="w-[946px] h-[0px] border-4 border-black"></div>
+            </div>
+        </div>
+    </div>
+    <div className="grow shrink basis-0 pl-10 py-5 bg-neutral-50 rounded-[15px] justify-center items-end inline-flex">
+        <div className="w-[1312px] self-stretch px-2.5 py-5 rounded-[15px] justify-center items-start flex">
+            <div className="self-stretch py-[26px] flex-col justify-start items-start gap-[220px] inline-flex">
+                <div className="w-[50px] h-[50px] relative rounded-full">
+                    <div className="w-[50px] h-[50px] left-0 top-0 absolute bg-zinc-300 rounded-full" />
+                    <img className="w-[50px] h-[50px] left-0 top-0 absolute rounded-full" src="https://via.placeholder.com/50x50" />
+                </div>
+                <div className="w-[50px] h-[50px] relative rounded-full">
+                    <div className="w-[50px] h-[50px] left-0 top-0 absolute bg-zinc-300 rounded-full" />
+                    <img className="w-[50px] h-[50px] left-0 top-0 absolute rounded-full" src="https://via.placeholder.com/50x50" />
+                </div>
+            </div>
+            <div className="grow shrink basis-0 self-stretch flex-col justify-start items-end gap-2.5 inline-flex">
+                <div className="self-stretch h-[261px] p-4 flex-col justify-start items-center flex">
+                    <div className="w-[1180px] h-[70px] px-5 justify-center items-center gap-5 inline-flex">
+                        <div className="w-[170px] self-stretch text-zinc-950 text-[32px] font-medium font-['Inter'] leading-tight">Steve Jobs</div>
+                        <div className="grow shrink basis-0 self-stretch justify-start items-center gap-[47px] flex">
+                            <div className="w-[237px] h-[25px] text-right text-zinc-500 text-2xl font-normal font-['Inter'] leading-tight">Created New Thread</div>
+                        </div>
+                        <div className="px-5 justify-center items-center gap-3.5 flex">
+                            <div className="justify-start items-start flex">
+                                <div className="justify-start items-start gap-2.5 flex">
+                                    <div className="p-2 border border-neutral-300 justify-center items-start flex">
+                                        <div className="w-[30px] h-[30px] relative" />
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="justify-start items-center gap-2.5 flex">
+                                <div className="justify-start items-start gap-2.5 flex">
+                                    <div className="p-2 border border-neutral-300 justify-center items-start flex">
+                                        <div className="w-[30px] h-[30px] relative" />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="self-stretch p-2 border border-neutral-300 justify-center items-start gap-2 flex">
+                            <div className="w-[30px] h-[30px] relative" />
+                        </div>
+                        <div className="w-[147px] self-stretch px-1.5 justify-center items-center gap-[47px] flex">
+                            <div className="w-[135px] h-[25px] text-right text-zinc-500 text-2xl font-normal font-['Inter'] leading-tight">2 hours ago</div>
+                        </div>
+                    </div>
+                    <div className="self-stretch h-[159px] pl-[35px] pr-[26px] pt-3.5 pb-[25px] flex-col justify-start items-start gap-2.5 flex">
+                        <div className="self-stretch text-black text-2xl font-normal font-['Inter'] leading-[30px]">As seen in the jupyter snippet where the period is set (which can be observed in the binned data, allowing us to phase fold the dips to showcase a potential/likely transit event), we have a consistent dipping occur over a period of ~30 days, with a similar amount of light being blocked out each time. This body is likely to be extremely close to its parent star and as such will likely be tidally locked.</div>
+                    </div>
+                </div>
+                <div className="self-stretch h-[171px] p-4 flex-col justify-start items-center flex">
+                    <div className="w-[1180px] h-[70px] px-5 justify-center items-center gap-5 inline-flex">
+                        <div className="text-zinc-950 text-[32px] font-medium font-['Inter'] leading-tight">Ben Fraklin</div>
+                        <div className="grow shrink basis-0 self-stretch justify-start items-center gap-[47px] flex">
+                            <div className="w-[237px] h-[25px] text-zinc-500 text-2xl font-normal font-['Inter'] leading-tight">Replied </div>
+                        </div>
+                        <div className="w-[147px] self-stretch px-1.5 justify-center items-center gap-[47px] flex">
+                            <div className="w-[135px] h-[25px] text-right text-zinc-500 text-2xl font-normal font-['Inter'] leading-tight">2 hours ago</div>
+                        </div>
+                    </div>
+                    <div className="self-stretch h-[69px] pl-[35px] pr-[26px] pt-3.5 pb-[25px] flex-col justify-start items-start gap-2.5 flex">
+                        <div className="self-stretch text-black text-2xl font-normal font-['Inter'] leading-[30px]">That is quite the discovery you have made there sir!</div>
+                    </div>
+                </div>
+                <div className="pr-4 justify-end items-start gap-2.5 inline-flex">
+                    <div className="w-[70px] self-stretch px-2.5 py-[22px] justify-center items-start gap-2.5 flex">
+                        <div className="w-[50px] h-[50px] relative rounded-full">
+                            <div className="w-[50px] h-[50px] left-0 top-0 absolute bg-zinc-300 rounded-full" />
+                            <img className="w-[50px] h-[50px] left-0 top-0 absolute rounded-full" src="https://via.placeholder.com/50x50" />
+                        </div>
+                    </div>
+                    <div className="pr-4 py-4 flex-col justify-start items-end inline-flex">
+                        <div className="w-[1069px] h-[70px] px-5 justify-center items-center gap-5 inline-flex">
+                            <div className="w-[170px] self-stretch text-zinc-950 text-[32px] font-medium font-['Inter'] leading-tight">Steve Jobs</div>
+                            <div className="grow shrink basis-0 self-stretch justify-start items-center gap-[47px] flex">
+                                <div className="w-[237px] h-[25px] text-zinc-500 text-2xl font-normal font-['Inter'] leading-tight">Replied</div>
+                            </div>
+                            <div className="w-[152px] self-stretch px-1.5 justify-center items-center gap-[47px] flex">
+                                <div className="w-[140px] h-[25px] text-right text-zinc-500 text-2xl font-normal font-['Inter'] leading-tight">1 hour ago</div>
+                            </div>
+                        </div>
+                        <div className="self-stretch h-[69px] pl-5 pr-[26px] pt-3.5 pb-[25px] flex-col justify-start items-start gap-2.5 flex">
+                            <div className="self-stretch text-black text-2xl font-normal font-['Inter'] leading-[30px]">Thankyou, i cannot believe i am speaking with the real Benjamin Franklin!</div>
+                        </div>
+                    </div>
+                </div>
+                <div className="pr-4 justify-end items-start gap-2.5 inline-flex">
+                    <div className="w-[70px] self-stretch px-2.5 py-[22px] justify-center items-start gap-2.5 flex">
+                        <div className="w-[50px] h-[50px] relative rounded-full">
+                            <div className="w-[50px] h-[50px] left-0 top-0 absolute bg-zinc-300 rounded-full" />
+                            <img className="w-[50px] h-[50px] left-0 top-0 absolute rounded-full" src="https://via.placeholder.com/50x50" />
+                        </div>
+                    </div>
+                    <div className="pr-4 py-4 flex-col justify-start items-end inline-flex">
+                        <div className="w-[1069px] h-[70px] px-5 justify-center items-center gap-5 inline-flex">
+                            <div className="text-zinc-950 text-[32px] font-medium font-['Inter'] leading-tight">Ben Franklin</div>
+                            <div className="grow shrink basis-0 self-stretch justify-start items-center gap-[47px] flex">
+                                <div className="w-[237px] h-[25px] text-zinc-500 text-2xl font-normal font-['Inter'] leading-tight">Replied</div>
+                            </div>
+                            <div className="w-[152px] self-stretch px-1.5 justify-center items-center gap-[47px] flex">
+                                <div className="w-[140px] h-[25px] text-right text-zinc-500 text-2xl font-normal font-['Inter'] leading-tight">1 hour ago</div>
+                            </div>
+                        </div>
+                        <div className="self-stretch h-[69px] pl-5 pr-[26px] pt-3.5 pb-[25px] flex-col justify-start items-start gap-2.5 flex">
+                            <div className="self-stretch text-black text-2xl font-normal font-['Inter'] leading-[30px]">Lol</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div className="h-[102px] p-4 bg-neutral-50 rounded-[15px] flex-col justify-start items-center gap-2.5 flex">
+        <div className="self-stretch h-[70px] justify-between items-center inline-flex">
+            <div className="grow shrink basis-0 self-stretch px-5 justify-between items-center flex">
+                <div className="w-[50px] h-[50px] relative rounded-full">
+                    <div className="w-[50px] h-[50px] left-0 top-0 absolute bg-zinc-300 rounded-full" />
+                    <img className="w-[50px] h-[50px] left-0 top-0 absolute rounded-full" src="https://via.placeholder.com/50x50" />
+                </div>
+                <div className="w-[1084px] h-[46px] px-4 py-2 bg-white border border-zinc-200 justify-start items-center flex">
+                    <div className="w-[293px] text-zinc-500 text-2xl font-normal font-['Inter'] leading-tight">Add a comment..</div>
+                </div>
+                <div className="h-[46px] bg-white justify-center items-center gap-2.5 flex">
+                    <div className="justify-start items-start gap-2.5 flex">
+                        <div className="p-2 border border-neutral-300 justify-center items-start flex">
+                            <div className="w-[30px] h-[30px] relative" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+  )
+}
 
 export function ClassificationFeedForIndividualPlanet(planetId, backgroundColorSet) {
   const supabase: SupabaseClient = useSupabaseClient();

diff --git a/pages/feed/index.tsx b/pages/feed/index.tsx
@@ -3,9 +3,10 @@ import React, { useEffect, useState } from "react";
 import CoreLayout from "../../components/Core/Layout";
 import Layout from "../../components/Section/Layout";
 import CardForum from "../../components/Content/DiscussCard";
-import ClassificationFeed from "../../components/Content/ClassificationFeed";
+import ClassificationFeed, { ClassificationFeedDemo } from "../../components/Content/ClassificationFeed";
 import CreatePostForm from "../../components/Content/CreatePostForm";
 import HomePlanetStats from "../../components/Blocks/HomePlanetStats";
+import DetectedAnomaliesBlock, { CurrentSilfur, MobilePlanetTest } from "../../components/Blocks/DetectedAnomalies";
 
 export default function Home() {
     const session = useSession();