Skip to content

Commit 042d859

Browse files
GizmotronnGizmotronn
committed
🧟‍♂️🍫 ↝ [ SGV2-10 SGV2-9 SGV2-2 FCDB-24 ] Automation & other accordion areas on index onboarding
1 parent 2a3c8da commit 042d859

File tree

3 files changed

+88
-85
lines changed

3 files changed

+88
-85
lines changed

‎components/Gameplay/onboarding.tsx

+87-84
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,14 @@
1+
import { useState } from "react";
12
import { useSession } from "@supabase/auth-helpers-react";
23
import Link from "next/link";
34

45
export function OnboardingWindows() {
56
const session = useSession();
7+
const [expandedSection, setExpandedSection] = useState(null);
8+
9+
const toggleSection = (section) => {
10+
setExpandedSection((prevSection) => (prevSection === section ? null : section));
11+
};
612

713
return (
814
<div className="w-full">
@@ -57,92 +63,73 @@ export function OnboardingWindows() {
5763
className="flex items-center space-x-2 font-medium rounded-md bg-gray-100 px-3 py-2.5 transition-colors hover:bg-gray-200 dark:hover:bg-gray-50"
5864
href="#"
5965
>
60-
<SettingsIcon className="w-4 h-4" />
61-
Settings
66+
<SectorsIcon className="w-4 h-4" />
67+
Sectors
68+
</Link>
69+
<Link
70+
className="flex items-center space-x-2 font-medium rounded-md bg-gray-100 px-3 py-2.5 transition-colors hover:bg-gray-200 dark:hover:bg-gray-50"
71+
href="#"
72+
>
73+
<StructuresIcon className="w-4 h-4" />
74+
Structures
6275
</Link>
6376
</nav>
6477
</div>
65-
{/* <div className="flex flex-col gap-4 col-span-12 lg:col-span-9">
78+
<div className="flex flex-col gap-4 col-span-12 lg:col-span-9">
6679
<div className="grid gap-4">
6780
<div className="rounded-xl border aspect-video overflow-hidden">
6881
<span className="object-cover w-full h-full rounded-md bg-muted" />
6982
</div>
7083
<div className="grid gap-4 grid-cols-2 md:grid-cols-1 lg:grid-cols-3">
71-
<div className="rounded-xl border aspect-image overflow-hidden">
72-
<img
73-
alt="Image"
74-
className="object-cover w-full h-full"
75-
height="600"
76-
src="/placeholder.svg"
77-
style={{
78-
aspectRatio: "800/600",
79-
objectFit: "cover",
80-
}}
81-
width="800"
82-
/>
83-
</div>
84-
<div className="rounded-xl border aspect-image overflow-hidden">
85-
<img
86-
alt="Image"
87-
className="object-cover w-full h-full"
88-
height="600"
89-
src="/placeholder.svg"
90-
style={{
91-
aspectRatio: "800/600",
92-
objectFit: "cover",
93-
}}
94-
width="800"
95-
/>
96-
</div>
97-
<div className="rounded-xl border aspect-image overflow-hidden">
98-
<img
99-
alt="Image"
100-
className="object-cover w-full h-full"
101-
height="600"
102-
src="/placeholder.svg"
103-
style={{
104-
aspectRatio: "800/600",
105-
objectFit: "cover",
106-
}}
107-
width="800"
108-
/>
109-
</div>
110-
</div>
111-
</div>
112-
<div className="grid gap-4">
113-
<div className="rounded-xl border aspect-image overflow-hidden">
114-
<img
115-
alt="Image"
116-
className="object-cover w-full h-full"
117-
height="600"
118-
src="/placeholder.svg"
119-
style={{
120-
aspectRatio: "800/600",
121-
objectFit: "cover",
122-
}}
123-
width="800"
124-
/>
125-
</div>
126-
<div className="rounded-xl border aspect-image overflow-hidden">
127-
<img
128-
alt="Image"
129-
className="object-cover w-full h-full"
130-
height="600"
131-
src="/placeholder.svg"
132-
style={{
133-
aspectRatio: "800/600",
134-
objectFit: "cover",
135-
}}
136-
width="800"
137-
/>
84+
{Array.from({ length: 6 }, (_, index) => (
85+
<div
86+
key={index}
87+
className={`rounded-xl border aspect-image overflow-hidden cursor-pointer ${
88+
expandedSection === index ? "col-span-2" : "col-span-1"
89+
}`}
90+
onClick={() => toggleSection(index)}
91+
>
92+
{expandedSection === index && (
93+
<>
94+
<img
95+
alt="Image"
96+
className="object-cover w-full h-full"
97+
height="600"
98+
src="/placeholder.svg"
99+
style={{
100+
aspectRatio: "800/600",
101+
objectFit: "cover",
102+
}}
103+
width="800"
104+
/>
105+
<div className="absolute top-0 left-0 w-full h-full bg-black bg-opacity-50 flex items-center justify-center">
106+
<p className="text-white font-bold text-lg">Expanded Section {index + 1}</p>
107+
</div>
108+
</>
109+
)}
110+
{!expandedSection && (
111+
<img
112+
alt="Image"
113+
className="object-cover w-full h-full"
114+
height="600"
115+
src="/placeholder.svg"
116+
style={{
117+
aspectRatio: "800/600",
118+
objectFit: "cover",
119+
}}
120+
width="800"
121+
/>
122+
)}
123+
</div>
124+
))}
138125
</div>
139126
</div>
140-
</div> */}
127+
</div>
141128
</div>
142129
</div>
143130
</div>
144131
);
145-
};
132+
}
146133

147134
function HomeIcon(props) {
148135
return (
@@ -161,10 +148,9 @@ function HomeIcon(props) {
161148
<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
162149
<polyline points="9 22 9 12 15 12 15 22" />
163150
</svg>
164-
)
151+
);
165152
}
166153

167-
168154
function GoalIcon(props) {
169155
return (
170156
<svg
@@ -183,10 +169,9 @@ function GoalIcon(props) {
183169
<path d="M20.55 10.23A9 9 0 1 1 8 4.94" />
184170
<path d="M8 10a5 5 0 1 0 8.9 2.02" />
185171
</svg>
186-
)
172+
);
187173
}
188174

189-
190175
function WarehouseIcon(props) {
191176
return (
192177
<svg
@@ -206,10 +191,9 @@ function WarehouseIcon(props) {
206191
<path d="M6 14h12" />
207192
<rect width="12" height="12" x="6" y="10" />
208193
</svg>
209-
)
194+
);
210195
}
211196

212-
213197
function BotIcon(props) {
214198
return (
215199
<svg
@@ -231,11 +215,10 @@ function BotIcon(props) {
231215
<path d="M15 13v2" />
232216
<path d="M9 13v2" />
233217
</svg>
234-
)
218+
);
235219
}
236220

237-
238-
function SettingsIcon(props) {
221+
function SectorsIcon(props) {
239222
return (
240223
<svg
241224
{...props}
@@ -249,8 +232,28 @@ function SettingsIcon(props) {
249232
strokeLinecap="round"
250233
strokeLinejoin="round"
251234
>
252-
<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
253-
<circle cx="12" cy="12" r="3" />
235+
<path d="M21 3a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h18z" />
236+
<path d="M10 9h4v6h-4z" />
237+
<path d="M7 13h10" />
254238
</svg>
255-
)
239+
);
256240
}
241+
242+
function StructuresIcon(props) {
243+
return (
244+
<svg
245+
{...props}
246+
xmlns="http://www.w3.org/2000/svg"
247+
width="24"
248+
height="24"
249+
viewBox="0 0 24 24"
250+
fill="none"
251+
stroke="currentColor"
252+
strokeWidth="2"
253+
strokeLinecap="round"
254+
strokeLinejoin="round"
255+
>
256+
<path d="M12 4a1 1 0 0 1 1 1v12a1 1 0 0 1-2 0V5a1 1 0 0 1 1-1zM18 4a1 1 0 0 1 1 1v12a1 1 0 0 1-2 0V5a1 1 0 0 1 1-1zM6 4a1 1 0 0 1 1 1v12a1 1 0 0 1-2 0V5a1 1 0 0 1 1-1z" />
257+
</svg>
258+
);
259+
};

‎pages/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ export function PublicLanding() {
9191
<style jsx global>
9292
{`
9393
body {
94-
background: url('Ice.png') center/cover;
94+
background: url('Waterdrop.jpg') center/cover;
9595
}
9696
9797
@media only screen and (max-width: 767px) {

‎public/Waterdrop.jpg

1.28 MB
Loading

0 commit comments

Comments
 (0)