Skip to content

Commit fe8eb14

Browse files
GizmotronnGizmotronn
committed
📇🧘🏻‍♂️ ↝ [SGV2-22]: A new component library
1 parent 14c0f07 commit fe8eb14

File tree

3 files changed

+225
-1
lines changed

3 files changed

+225
-1
lines changed

‎components/_Core/Section/Header.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,4 +28,4 @@ export default function Header() {
2828
</div>
2929
</div>
3030
);
31-
};
31+
};

‎components/_Core/Section/Planet.tsx

+223
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,223 @@
1+
import * as React from "react";
2+
3+
interface PlanetProps {
4+
backgroundImage: string;
5+
logoImage: string;
6+
planetName: string;
7+
leftArrowImage: string;
8+
rightArrowImage: string;
9+
compassImage: string;
10+
structureImage: string;
11+
activeRoverImage: string;
12+
idleRoverImage: string;
13+
galleryImages: string[];
14+
centerButtonImage: string;
15+
}
16+
17+
const Planet: React.FC<PlanetProps> = ({
18+
backgroundImage,
19+
logoImage,
20+
planetName,
21+
leftArrowImage,
22+
rightArrowImage,
23+
compassImage,
24+
structureImage,
25+
activeRoverImage,
26+
idleRoverImage,
27+
galleryImages,
28+
centerButtonImage,
29+
}) => {
30+
return (
31+
<div className="flex flex-col justify-center">
32+
<div className="flex overflow-hidden relative flex-col w-full min-h-[2413px] max-md:max-w-full">
33+
<img
34+
loading="lazy"
35+
src={backgroundImage}
36+
className="object-cover absolute inset-0 size-full"
37+
/>
38+
<Header
39+
logoImage={logoImage}
40+
planetName={planetName}
41+
leftArrowImage={leftArrowImage}
42+
rightArrowImage={rightArrowImage}
43+
compassImage={compassImage}
44+
/>
45+
<RoverSection
46+
structureImage={structureImage}
47+
activeRoverImage={activeRoverImage}
48+
idleRoverImage={idleRoverImage}
49+
/>
50+
<Gallery images={galleryImages} centerButtonImage={centerButtonImage} />
51+
</div>
52+
</div>
53+
);
54+
};
55+
56+
interface HeaderProps {
57+
logoImage: string;
58+
planetName: string;
59+
leftArrowImage: string;
60+
rightArrowImage: string;
61+
compassImage: string;
62+
}
63+
64+
const Header: React.FC<HeaderProps> = ({
65+
logoImage,
66+
planetName,
67+
leftArrowImage,
68+
rightArrowImage,
69+
compassImage,
70+
}) => {
71+
return (
72+
<div className="flex relative flex-col justify-center w-full backdrop-blur-[5px] bg-white bg-opacity-0 max-md:max-w-full">
73+
<div className="flex gap-2.5 justify-between items-center px-12 py-5 w-full max-md:flex-wrap max-md:px-5 max-md:max-w-full">
74+
<img
75+
loading="lazy"
76+
src={logoImage}
77+
className="shrink-0 self-stretch my-auto max-w-full aspect-square w-[100px]"
78+
/>
79+
<div className="flex flex-col justify-center self-stretch max-md:max-w-full">
80+
<div className="flex flex-col justify-center items-center py-1.5 max-md:max-w-full">
81+
<div className="justify-center px-4 py-1 text-xl font-medium text-center text-white whitespace-nowrap rounded-xl shadow-sm bg-indigo-600 bg-opacity-40">
82+
Main
83+
</div>
84+
<div className="flex gap-5 justify-center items-center self-stretch px-3 mt-2 text-3xl font-semibold text-center text-white uppercase tracking-[5.12px] max-md:flex-wrap">
85+
<img
86+
loading="lazy"
87+
src={leftArrowImage}
88+
className="shrink-0 self-stretch my-auto border-white border-solid aspect-square border-[3px] stroke-[3px] stroke-white w-[33px]"
89+
/>
90+
<div className="self-stretch">{planetName}</div>
91+
<img
92+
loading="lazy"
93+
src={rightArrowImage}
94+
className="shrink-0 self-stretch my-auto border-white border-solid aspect-square border-[3px] stroke-[3px] stroke-white w-[33px]"
95+
/>
96+
</div>
97+
<div className="flex justify-center items-center p-1.5 mt-2 w-[47px]">
98+
<img loading="lazy" src={compassImage} className="w-full aspect-square" />
99+
</div>
100+
</div>
101+
</div>
102+
<img
103+
loading="lazy"
104+
src={logoImage}
105+
className="shrink-0 self-stretch my-auto max-w-full aspect-square w-[100px]"
106+
/>
107+
</div>
108+
</div>
109+
);
110+
};
111+
112+
interface RoverSectionProps {
113+
structureImage: string;
114+
activeRoverImage: string;
115+
idleRoverImage: string;
116+
}
117+
118+
const RoverSection: React.FC<RoverSectionProps> = ({
119+
structureImage,
120+
activeRoverImage,
121+
idleRoverImage,
122+
}) => {
123+
return (
124+
<div className="relative self-center w-full max-w-[906px] mt-[1554px] max-md:mt-10 max-md:max-w-full">
125+
<div className="flex gap-5 max-md:flex-col max-md:gap-0">
126+
<div className="flex flex-col w-[26%] max-md:ml-0 max-md:w-full">
127+
<div className="flex relative flex-col px-5 mt-1 text-xl font-semibold text-center text-white uppercase whitespace-nowrap tracking-[3.2px] max-md:mt-10">
128+
<div>structure</div>
129+
<div className="shrink-0 self-start mt-20 rounded-full shadow-2xl backdrop-blur-[5px] bg-cyan-300 bg-opacity-50 h-[45px] max-md:mt-10" />
130+
</div>
131+
</div>
132+
<div className="flex flex-col ml-5 w-[74%] max-md:ml-0 max-md:w-full">
133+
<div className="relative grow max-md:mt-10 max-md:max-w-full">
134+
<div className="flex gap-5 max-md:flex-col max-md:gap-0">
135+
<div className="flex flex-col w-[68%] max-md:ml-0 max-md:w-full">
136+
<div className="flex relative grow gap-4 items-start mt-16 max-md:mt-10">
137+
<div className="flex flex-col flex-1 px-5">
138+
<div className="justify-center self-center px-4 py-1 text-xl font-medium text-center text-white whitespace-nowrap rounded-xl shadow-sm bg-green-500 bg-opacity-40">
139+
Active
140+
</div>
141+
<div className="text-xl font-semibold text-center text-white uppercase tracking-[3.2px]">
142+
rover
143+
</div>
144+
<div className="flex flex-col justify-center px-10 py-0.5 max-md:px-5">
145+
<div className="flex flex-col items-start pt-5">
146+
<img
147+
loading="lazy"
148+
src={activeRoverImage}
149+
className="aspect-[1.18] w-[92px]"
150+
/>
151+
</div>
152+
</div>
153+
</div>
154+
<div className="flex flex-col flex-1 px-5 mt-1.5">
155+
<div className="justify-center self-center px-4 py-1 text-xl font-medium text-center text-white whitespace-nowrap rounded-xl shadow-sm bg-red-600 bg-opacity-40">
156+
Idle
157+
</div>
158+
<div className="text-xl font-semibold text-center text-white uppercase tracking-[3.2px]">
159+
rover
160+
</div>
161+
<div className="flex flex-col justify-center px-10 py-0.5 max-md:px-5">
162+
<div className="flex flex-col items-start pt-5">
163+
<img
164+
loading="lazy"
165+
src={idleRoverImage}
166+
className="aspect-[1.18] w-[92px]"
167+
/>
168+
</div>
169+
</div>
170+
</div>
171+
</div>
172+
</div>
173+
<div className="flex flex-col ml-5 w-[32%] max-md:ml-0 max-md:w-full">
174+
<div className="flex relative flex-col px-5 text-xl font-semibold text-center text-white uppercase whitespace-nowrap tracking-[3.2px] max-md:mt-9">
175+
<div>structure</div>
176+
<div className="shrink-0 self-start mt-20 rounded-full shadow-2xl backdrop-blur-[5px] bg-cyan-300 bg-opacity-50 h-[45px] max-md:mt-10" />
177+
</div>
178+
</div>
179+
</div>
180+
</div>
181+
</div>
182+
</div>
183+
</div>
184+
);
185+
};
186+
187+
interface GalleryProps {
188+
images: string[];
189+
centerButtonImage: string;
190+
}
191+
192+
const Gallery: React.FC<GalleryProps> = ({ images, centerButtonImage }) => {
193+
return (
194+
<div className="flex relative flex-col justify-center mt-16 w-full max-md:mt-10 max-md:max-w-full">
195+
<div className="flex flex-col justify-center py-5 w-full max-md:max-w-full">
196+
<div className="flex flex-col justify-center w-full max-md:max-w-full">
197+
<div className="flex justify-center items-center px-16 py-6 w-full max-md:px-5 max-md:max-w-full">
198+
<div className="flex gap-5 justify-between max-md:flex-wrap">
199+
{images.map((image, index) => (
200+
<div
201+
key={index}
202+
className="flex overflow-hidden relative flex-col justify-center aspect-[1.08] w-[140px]"
203+
>
204+
<img
205+
loading="lazy"
206+
src={image}
207+
className="object-cover absolute inset-0 size-full"
208+
/>
209+
<div className="relative shrink-0 h-[130px]" />
210+
</div>
211+
))}
212+
</div>
213+
</div>
214+
</div>
215+
<div className="flex justify-center items-center self-center px-2.5 mt-10 bg-indigo-700 h-[108px] rounded-[100px] w-[108px]">
216+
<img loading="lazy" src={centerButtonImage} className="w-full aspect-square" />
217+
</div>
218+
</div>
219+
</div>
220+
);
221+
};
222+
223+
export default Planet;

‎pages/index.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export default function Home() {
2121
<Layout>
2222
<p>Run into the shadows</p>
2323
</Layout>
24+
// <Planet backgroundImage="https://cdn.cloud.scenario.com/assets/asset_J8Mo3eYBJWMjdC8wSQQ15edx?p=100&Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uY2xvdWQuc2NlbmFyaW8uY29tL2Fzc2V0cy9hc3NldF9KOE1vM2VZQkpXTWpkQzh3U1FRMTVlZHg~cD0xMDAqIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNzE1MTI2Mzk5fX19XX0_&Key-Pair-Id=K36FIAB9LE2OLR&Signature=OuEtnaPodT1W4BsZZep27dJD5Sk3jzwsrSj1Dktkh2GoojVG~Ttn0WFhDvEBx~m6bX0~~8tEIcqk-NuornLcTtfG0TIE0H18LOPj-BWhTS9dg72-Zkg3ris1MwpAkSuQ~9GUlKPt3N4VgYz5b6h7TmDa06u7PPATCEuIwcjXBs23sNZbW4bAOS9EQTzv9bjPY6rc1IPFq~9ua8xx8~3q8qMlcZ1NoB1pYhCJEM7ROBPBu0fWtp2IlUYNAX21zBJFTgvnqjsIazuual3wLR1ennoO3mRuMS8uzTq6eoHBiIwKkY4rQUFsUpuORWcOpevh7Wz6eGBn7d4X5xDhuBV6oA__&format=jpeg" logoImage="https://avatars.githubusercontent.com/u/78838067?s=200&v=4" leftArrowImage="https://www.svgrepo.com/show/27797/left-arrow.svg" rightArrowImage="https://www.svgrepo.com/show/27797/right-arrow.svg" structureImage="https://github.com/Signal-K/client/blob/initialClassification/public/assets/Inventory/Structures/TelescopeReceiver.png?raw=true" compassImage="https://www.svgrepo.com/show/532904/compass-drafting.svg" planetName="HelloWorld" activeRoverImage="https://cdn-icons-png.flaticon.com/512/7717/7717354.png" idleRoverImage="https://www.svgrepo.com/show/440444/space-rover-2.svg" galleryImages={['https://www.svgrepo.com/show/440444/space-rover-2.svg']} centerButtonImage="https://www.svgrepo.com/show/440396/black-hole.svg" />
2425
);
2526
};
2627

0 commit comments

Comments
 (0)