Skip to content

Commit 2a3c8da

Browse files
GizmotronnGizmotronn
committed
🏡🧸 ↝ [ SGV2-10 SGV2-9 SGV2-2 ] Silod areas for home navigation now
1 parent 77238a0 commit 2a3c8da

File tree

4 files changed

+260
-14
lines changed

4 files changed

+260
-14
lines changed

‎components/Gameplay/onboarding.tsx

+256
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,256 @@
1+
import { useSession } from "@supabase/auth-helpers-react";
2+
import Link from "next/link";
3+
4+
export function OnboardingWindows() {
5+
const session = useSession();
6+
7+
return (
8+
<div className="w-full">
9+
<div className="container px-4 md:px-6">
10+
<div className="grid max-w-6xl grid-cols-12 items-start gap-4 min-h-[calc(100vh-1px)] py-6 mx-auto">
11+
<div className="space-y-4 col-span-12 lg:col-span-3">
12+
<div className="flex items-center space-x-3">
13+
<div className="h-8 w-8 overflow-hidden rounded-xl">
14+
<img
15+
alt="Avatar"
16+
className="rounded-full aspect-square"
17+
height="32"
18+
src="/placeholder.svg"
19+
width="32"
20+
/>
21+
</div>
22+
<div className="space-y-0.5">
23+
<h1 className="text-xl font-bold tracking-wide">Welcome, Citizen!</h1>
24+
<p className="text-xs text-gray-500 dark:text-gray-400">ID: {session?.user?.id}</p>
25+
</div>
26+
</div>
27+
<nav className="space-y-2 grid grid-cols-3 md:grid-cols-1 lg:grid-cols-3 gap-4">
28+
<Link
29+
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"
30+
href="#"
31+
>
32+
<HomeIcon className="w-4 h-4" />
33+
Home
34+
</Link>
35+
<Link
36+
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"
37+
href="#"
38+
>
39+
<GoalIcon className="w-4 h-4" />
40+
Missions
41+
</Link>
42+
<Link
43+
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"
44+
href="#"
45+
>
46+
<WarehouseIcon className="w-4 h-4" />
47+
Inventory
48+
</Link>
49+
<Link
50+
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"
51+
href="#"
52+
>
53+
<BotIcon className="w-4 h-4" />
54+
Automations
55+
</Link>
56+
<Link
57+
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"
58+
href="#"
59+
>
60+
<SettingsIcon className="w-4 h-4" />
61+
Settings
62+
</Link>
63+
</nav>
64+
</div>
65+
{/* <div className="flex flex-col gap-4 col-span-12 lg:col-span-9">
66+
<div className="grid gap-4">
67+
<div className="rounded-xl border aspect-video overflow-hidden">
68+
<span className="object-cover w-full h-full rounded-md bg-muted" />
69+
</div>
70+
<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+
/>
138+
</div>
139+
</div>
140+
</div> */}
141+
</div>
142+
</div>
143+
</div>
144+
);
145+
};
146+
147+
function HomeIcon(props) {
148+
return (
149+
<svg
150+
{...props}
151+
xmlns="http://www.w3.org/2000/svg"
152+
width="24"
153+
height="24"
154+
viewBox="0 0 24 24"
155+
fill="none"
156+
stroke="currentColor"
157+
strokeWidth="2"
158+
strokeLinecap="round"
159+
strokeLinejoin="round"
160+
>
161+
<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
162+
<polyline points="9 22 9 12 15 12 15 22" />
163+
</svg>
164+
)
165+
}
166+
167+
168+
function GoalIcon(props) {
169+
return (
170+
<svg
171+
{...props}
172+
xmlns="http://www.w3.org/2000/svg"
173+
width="24"
174+
height="24"
175+
viewBox="0 0 24 24"
176+
fill="none"
177+
stroke="currentColor"
178+
strokeWidth="2"
179+
strokeLinecap="round"
180+
strokeLinejoin="round"
181+
>
182+
<path d="M12 13V2l8 4-8 4" />
183+
<path d="M20.55 10.23A9 9 0 1 1 8 4.94" />
184+
<path d="M8 10a5 5 0 1 0 8.9 2.02" />
185+
</svg>
186+
)
187+
}
188+
189+
190+
function WarehouseIcon(props) {
191+
return (
192+
<svg
193+
{...props}
194+
xmlns="http://www.w3.org/2000/svg"
195+
width="24"
196+
height="24"
197+
viewBox="0 0 24 24"
198+
fill="none"
199+
stroke="currentColor"
200+
strokeWidth="2"
201+
strokeLinecap="round"
202+
strokeLinejoin="round"
203+
>
204+
<path d="M22 8.35V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8.35A2 2 0 0 1 3.26 6.5l8-3.2a2 2 0 0 1 1.48 0l8 3.2A2 2 0 0 1 22 8.35Z" />
205+
<path d="M6 18h12" />
206+
<path d="M6 14h12" />
207+
<rect width="12" height="12" x="6" y="10" />
208+
</svg>
209+
)
210+
}
211+
212+
213+
function BotIcon(props) {
214+
return (
215+
<svg
216+
{...props}
217+
xmlns="http://www.w3.org/2000/svg"
218+
width="24"
219+
height="24"
220+
viewBox="0 0 24 24"
221+
fill="none"
222+
stroke="currentColor"
223+
strokeWidth="2"
224+
strokeLinecap="round"
225+
strokeLinejoin="round"
226+
>
227+
<path d="M12 8V4H8" />
228+
<rect width="16" height="12" x="4" y="8" rx="2" />
229+
<path d="M2 14h2" />
230+
<path d="M20 14h2" />
231+
<path d="M15 13v2" />
232+
<path d="M9 13v2" />
233+
</svg>
234+
)
235+
}
236+
237+
238+
function SettingsIcon(props) {
239+
return (
240+
<svg
241+
{...props}
242+
xmlns="http://www.w3.org/2000/svg"
243+
width="24"
244+
height="24"
245+
viewBox="0 0 24 24"
246+
fill="none"
247+
stroke="currentColor"
248+
strokeWidth="2"
249+
strokeLinecap="round"
250+
strokeLinejoin="round"
251+
>
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" />
254+
</svg>
255+
)
256+
}

‎pages/index.tsx

+3-14
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import Navigation, {
2222
import { GardenDashboard } from "../components/garden-dashboard";
2323
import FeedOverlay from "../components/Overlays/1-Feed";
2424
import UponSignupModal from "../components/Modals/UponSignup";
25+
import { OnboardingWindows } from "../components/Gameplay/onboarding";
2526

2627
export const metadata: Metadata = {
2728
title: "Star Sailors",
@@ -90,7 +91,7 @@ export function PublicLanding() {
9091
<style jsx global>
9192
{`
9293
body {
93-
background: url('https://cdn.cloud.scenario.com/assets-transform/FKed9FEBQ1mNn0i1QB1tBw?p=100&Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uY2xvdWQuc2NlbmFyaW8uY29tL2Fzc2V0cy10cmFuc2Zvcm0vRktlZDlGRUJRMW1ObjBpMVFCMXRCdz9wPTEwMCoiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE3MTI1MzQzOTl9fX1dfQ__&Key-Pair-Id=K36FIAB9LE2OLR&Signature=JUKjqO~M456dmof52LL6FHiL2-~WE0ua7LKdmRXEw0n4CILx7A2FuI-PfLN8NMFpXJmQFGpBM30WHKN9C-gaCfZoBDOIue8Ffk8-J8cv5DU0u1qiu7bClXCGIRZK5YC6UjMc68bqlqV-QyvdS0yauG90WzkOQsv2vNSxpeguNW1vBX3z8xxN1G1uG1WmMhMVrtr9PuPZ6Lb1CtuxrXEpA4O5ONdOCKWPuIhSkA7OIKNSmqvhm8~KUxilj0eW8gi4jIztiZZIZHGQasSnSkXStKKCnnm-oIccP1GHzv7H33Rgxkg1Bj~LIoJARdmLAS84HQAenvXW-TD-VsaHr0XBqg__') center/cover;
94+
background: url('Ice.png') center/cover;
9495
}
9596
9697
@media only screen and (max-width: 767px) {
@@ -141,19 +142,7 @@ export function PublicLanding() {
141142
)}
142143
</div>
143144
</div>
144-
<div className="chat-container">
145-
<div className="mx-20 mt-20">
146-
<div className="chat chat-start mt-20 justify-left mt-20">
147-
<div className="chat-bubble">You need to pick a planet!</div>
148-
</div>
149-
<div className="chat chat-end">
150-
<div className="chat-bubble">You've got 5 new deposits to explore</div>
151-
</div>
152-
<div className="chat chat-start">
153-
<div className="chat-bubble">A dust storm is brewing on your home planet, time to investigate.</div>
154-
</div></div>
155-
{isDesktopOrLaptop && ( <UponSignupModal /> )}
156-
</div>
145+
<OnboardingWindows />
157146
<div className="absolute inset-0 grid grid-cols-3 grid-rows-3 gap-4 p-40 my-12">
158147
{/* Content here */}
159148
</div>

‎public/Ice.png

716 KB
Loading

‎public/placeholder.svg

+1
Loading

0 commit comments

Comments
 (0)