Skip to content

Commit ccf5a07

Browse files
GizmotronnGizmotronn
authored
🧿🚂 ↝ Merge pull request #94 from Signal-K/FCDB-21
🍑🧿 ↝ FCDB-21: Above & beyond - sectors are viewable, writeable & have a fairly nice UI
2 parents 4552f40 + 2477ece commit ccf5a07

30 files changed

+3036
-209
lines changed

‎.DS_Store

2 KB
Binary file not shown.

‎components/Blocks/DetectedAnomalies.tsx

+100
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import React from "react";
2+
3+
export default function DetectedAnomaliesBlock() {
4+
return (
5+
<div className="w-[289px] h-[249px] relative">
6+
<div className="w-[289px] h-[249px] left-0 top-[249px] absolute bg-white rounded-[10px]" />
7+
<div className="w-[253.07px] h-[186px] left-[17px] top-[19px] absolute">
8+
<div className="w-[94.74px] h-[26.66px] left-[158.33px] top-0 absolute">
9+
<div className="w-[94.74px] h-[26.66px] left-0 top-0 absolute bg-white rounded-[20px] shadow" />
10+
<div className="left-[9.84px] top-[8px] absolute text-center text-zinc-700 text-[8px] font-bold font-['Inter']">High to Low</div>
11+
<div className="w-[14.21px] h-4 left-[68.69px] top-[5.33px] absolute" />
12+
</div>
13+
<div className="left-0 top-[4.34px] absolute text-zinc-700 text-sm font-semibold font-['Inter']">Detected Anomolies</div>
14+
<div className="w-[217px] h-[132px] left-[0.33px] top-[54px] absolute">
15+
<div className="w-[58px] h-[127px] left-0 top-[3px] absolute flex-col justify-start items-start gap-[11px] inline-flex">
16+
<div className="text-zinc-700 text-[10px] font-normal font-['Inter']">Exoplanets</div>
17+
<div className="text-zinc-700 text-[10px] font-normal font-['Inter']">Black Holes</div>
18+
<div className="flex-col justify-start items-start gap-2.5 flex">
19+
<div className="w-[49px] text-zinc-700 text-[10px] font-normal font-['Inter']">Stars</div>
20+
</div>
21+
<div className="text-zinc-700 text-[10px] font-normal font-['Inter']">Meteors</div>
22+
<div className="text-zinc-700 text-[10px] font-normal font-['Inter']">Asteroids</div>
23+
<div className="text-zinc-700 text-[10px] font-normal font-['Inter']">Unidentified</div>
24+
</div>
25+
<div className="w-3.5 h-[132px] left-[203px] top-0 absolute flex-col justify-start items-center gap-2 inline-flex">
26+
<div className="text-center text-zinc-700 text-xs font-normal font-['Inter']">12</div>
27+
<div className="text-center text-zinc-700 text-xs font-normal font-['Inter']">11</div>
28+
<div className="text-center text-zinc-700 text-xs font-normal font-['Inter']">10</div>
29+
<div className="text-center text-zinc-700 text-xs font-normal font-['Inter']">8</div>
30+
<div className="text-center text-zinc-700 text-xs font-normal font-['Inter']">5</div>
31+
<div className="text-center text-zinc-700 text-xs font-normal font-['Inter']">2</div>
32+
</div>
33+
</div>
34+
<div className="w-[74px] h-[124px] left-[89.33px] top-[58px] absolute flex-col justify-start items-start gap-[13px] inline-flex">
35+
<div className="w-2.5 h-[74px] origin-top-left rotate-90 bg-sky-300 rounded-[100px]" />
36+
<div className="w-2.5 h-[70px] origin-top-left rotate-90 bg-sky-300 rounded-[100px]" />
37+
<div className="w-2.5 h-[66px] origin-top-left rotate-90 bg-sky-300 rounded-[100px]" />
38+
<div className="w-2.5 h-[54px] origin-top-left rotate-90 bg-sky-300 rounded-[100px]" />
39+
<div className="w-2.5 h-[45px] origin-top-left rotate-90 bg-sky-300 rounded-[100px]" />
40+
<div className="w-2.5 h-[29px] origin-top-left rotate-90 bg-sky-300 rounded-[100px]" />
41+
</div>
42+
</div>
43+
</div>
44+
);
45+
};
46+
47+
export const CurrentSilfur: React.FC = () => {
48+
return (
49+
<div className="w-[150px] h-[92px] relative">
50+
<div className="w-[150px] h-[92px] left-0 top-[92px] absolute bg-white rounded-[10px]" />
51+
<div className="w-[110px] left-[20px] top-[14px] absolute text-zinc-700 text-sm font-semibold font-['Inter']">
52+
Current Balance
53+
</div>
54+
<div className="left-[31px] top-[53.50px] absolute">
55+
<span className="text-zinc-700 text-sm font-bold font-['Inter']">19,750 </span>
56+
<span className="text-amber-400 text-sm font-bold font-['Inter']">Silfur</span>
57+
</div>
58+
</div>
59+
);
60+
};
61+
62+
export function MobilePlanetTest () {
63+
return (
64+
<div className="w-[1060px] h-[2212.87px] relative bg-white">
65+
<div className="w-[1060px] h-[2212.87px] left-0 top-0 absolute bg-black bg-opacity-30" />
66+
<div className="w-[1402px] h-[1386px] px-[61px] py-[66px] left-[359px] top-[-595px] absolute bg-yellow-300 bg-opacity-40 rounded-[9999px]" />
67+
<div className="w-[638px] h-[638px] left-[172px] top-[961px] absolute">
68+
<div className="w-[638px] h-[638px] left-0 top-0 absolute bg-purple-700 bg-opacity-50 rounded-full blur-[199.80px]" />
69+
<img className="w-[358.39px] h-[394px] left-[171px] top-[88px] absolute" src="https://via.placeholder.com/358x394" />
70+
</div>
71+
<img className="w-[106px] h-[108.28px] left-[25px] top-[718px] absolute" src="https://via.placeholder.com/106x108" />
72+
<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>
73+
<div className="left-[56px] top-[145px] absolute flex-col justify-start items-start gap-[31px] inline-flex">
74+
<div className="flex-col justify-start items-start gap-[4.75px] flex">
75+
<div className="text-center text-purple-500 text-2xl font-semibold font-['Inter'] tracking-[3.84px]">GALAXY</div>
76+
<div className="text-center text-white text-opacity-90 text-2xl font-normal font-['Inter']">Sombrero</div>
77+
</div>
78+
<div className="flex-col justify-start items-start gap-[4.75px] flex">
79+
<div className="text-center text-purple-500 text-2xl font-semibold font-['Inter'] uppercase tracking-[3.84px]">Diameter</div>
80+
<div className="text-center text-white text-opacity-90 text-2xl font-normal font-['Inter']">56,780 km</div>
81+
</div>
82+
<div className="flex-col justify-start items-start gap-[4.75px] flex">
83+
<div className="text-center text-purple-500 text-2xl font-semibold font-['Inter'] uppercase tracking-[3.84px]">Day Length</div>
84+
<div className="text-center text-white text-opacity-90 text-2xl font-normal font-['Inter']">12 Earth hours</div>
85+
</div>
86+
<div className="flex-col justify-start items-start gap-[4.75px] flex">
87+
<div className="text-center text-purple-500 text-2xl font-semibold font-['Inter'] uppercase tracking-[3.84px]">Avg Temperature</div>
88+
<div className="text-center text-white text-opacity-90 text-2xl font-normal font-['Inter']">60°C to 90°C</div>
89+
</div>
90+
<div className="flex-col justify-start items-start gap-[4.75px] flex">
91+
<div className="text-center text-purple-500 text-2xl font-semibold font-['Inter'] uppercase tracking-[3.84px]">Climate</div>
92+
<div className="text-center text-white text-opacity-90 text-2xl font-normal font-['Inter']">Tropical</div>
93+
</div>
94+
</div>
95+
<div className="w-[946px] h-[0px] left-[56px] top-[98px] absolute border border-white"></div>
96+
<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" />
97+
<img className="w-[131px] h-[131px] left-[1016.38px] top-[116px] absolute origin-top-left rotate-[70.37deg]" src="https://via.placeholder.com/131x131" />
98+
</div>
99+
)
100+
}

‎components/Blocks/HomePlanetStats.tsx

+98
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
2+
import React, { useEffect, useState } from "react";
3+
4+
export default function HomePlanetStats() {
5+
const supabase = useSupabaseClient();
6+
const session = useSession();
7+
8+
const [homePlanetData, setHomePlanetData] = useState(null);
9+
10+
useEffect(() => {
11+
const fetchPlanetData = async () => {
12+
if (!session) {
13+
return;
14+
};
15+
16+
try {
17+
const { data, error } = await supabase
18+
.from('basePlanets')
19+
.select('*')
20+
// .eq('id', 1)
21+
.single();
22+
23+
if (data) {
24+
setHomePlanetData(data);
25+
};
26+
27+
if (error) {
28+
throw error;
29+
}
30+
31+
console.log(data);
32+
} catch (error: any) {
33+
console.error(error.message);
34+
};
35+
};
36+
}, [session]);
37+
38+
// if (!homePlanetData) {
39+
// return null;
40+
// }
41+
42+
// const { content, avatar_url, type, deepnote, cover, ticId, temperatureEq, smaxis, mass } = homePlanetData;
43+
44+
return (
45+
<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">
46+
<div className="h-[621px] p-5 justify-center items-center gap-[69px] inline-flex">
47+
<div className="w-11 h-11 relative" />
48+
<div className="self-stretch py-5 flex-col justify-start items-center gap-8 inline-flex">
49+
<div className="self-stretch h-[63.02px] pb-[26px] flex-col justify-start items-center gap-[5px] flex">
50+
{/* <div className="text-center text-gray-50 text-[32px] font-normal font-['Anonymous Pro'] tracking-[10.24px]">{content}</div> */}
51+
<div className="w-[472px] h-[0px] border-2 border-gray-200"></div>
52+
</div>
53+
<div className="w-[350px] h-[350px] pl-[17px] pr-[18px] pt-2.5 pb-[10.38px] justify-center items-center inline-flex">
54+
<div className="w-[315px] h-[329.62px] flex-col justify-center items-center inline-flex" />
55+
</div>
56+
<div className="self-stretch h-[54px] px-5 justify-between items-center inline-flex">
57+
<div className="w-[109px] self-stretch p-4 bg-white bg-opacity-25 rounded-md shadow justify-center items-center gap-2 flex">
58+
<div className="text-neutral-50 text-xl font-medium font-['Inter'] leading-tight">Preview</div>
59+
</div>
60+
<div className="w-[109px] h-[54px] p-4 bg-stone-950 rounded-md shadow justify-center items-center gap-2 flex">
61+
<div className="text-neutral-50 text-xl font-medium font-['Inter'] leading-tight">Select</div>
62+
</div>
63+
</div>
64+
</div>
65+
<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">
66+
<div className="self-stretch h-[68px] py-5 flex-col justify-start items-start gap-2.5 flex">
67+
<div className="justify-start items-center gap-2.5 inline-flex">
68+
<div className="text-white text-[32px] font-semibold font-['Inter'] leading-7">Planet Overview</div>
69+
</div>
70+
</div>
71+
<div className="self-stretch h-[433.77px] flex-col justify-start items-start gap-[30px] flex">
72+
<div className="flex-col justify-start items-start gap-[4.75px] flex">
73+
<div className="text-center text-white text-opacity-40 text-2xl font-semibold font-['Inter'] tracking-[3.84px]">GALAXY</div>
74+
<div className="text-center text-white text-opacity-30 text-2xl font-normal font-['Inter']">Sombrero</div>
75+
</div>
76+
<div className="flex-col justify-start items-start gap-[4.75px] flex">
77+
<div className="text-center text-white text-opacity-40 text-2xl font-semibold font-['Inter'] uppercase tracking-[3.84px]">Diameter</div>
78+
<div className="text-center text-white text-opacity-30 text-2xl font-normal font-['Inter']">56,780 km</div>
79+
</div>
80+
<div className="flex-col justify-start items-start gap-[4.75px] flex">
81+
<div className="text-center text-white text-opacity-40 text-2xl font-semibold font-['Inter'] uppercase tracking-[3.84px]">Day Length</div>
82+
<div className="text-center text-white text-opacity-30 text-2xl font-normal font-['Inter']">12 Earth hours</div>
83+
</div>
84+
<div className="flex-col justify-start items-start gap-[4.75px] flex">
85+
<div className="text-center text-white text-opacity-40 text-2xl font-semibold font-['Inter'] uppercase tracking-[3.84px]">Avg Temperature</div>
86+
<div className="text-center text-white text-opacity-30 text-2xl font-normal font-['Inter']">60°C to 90°C</div>
87+
</div>
88+
<div className="flex-col justify-start items-start gap-[4.75px] flex">
89+
<div className="text-center text-white text-opacity-40 text-2xl font-semibold font-['Inter'] uppercase tracking-[3.84px]">Climate</div>
90+
<div className="text-center text-white text-opacity-30 text-2xl font-normal font-['Inter']">Tropical</div>
91+
</div>
92+
</div>
93+
</div>
94+
<div className="w-11 h-11 relative origin-top-left rotate-180" />
95+
</div>
96+
</div></center>
97+
);
98+
};

0 commit comments

Comments
 (0)