Skip to content

Commit 02d9f74

Browse files
sk337sk337
committed
add skins
1 parent 82660b4 commit 02d9f74

File tree

3 files changed

+211
-6
lines changed

3 files changed

+211
-6
lines changed

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
"@babel/plugin-syntax-import-attributes": "^7.23.3",
1818
"@radix-ui/react-dialog": "^1.0.5",
1919
"@radix-ui/react-label": "^2.0.2",
20+
"@radix-ui/react-select": "^2.0.0",
2021
"@radix-ui/react-slot": "^1.0.2",
2122
"@radix-ui/react-toast": "^1.1.5",
2223
"@types/node": "^18.0.6",

‎src/App.jsx

+52-6
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,16 @@ import {
2525
SheetTrigger,
2626
} from "@/components/ui/sheet";
2727

28+
import {
29+
Select,
30+
SelectContent,
31+
SelectGroup,
32+
SelectItem,
33+
SelectLabel,
34+
SelectTrigger,
35+
SelectValue,
36+
} from "@/components/ui/select";
37+
2838
import loading from "@/loading.svg";
2939

3040
export default function App() {
@@ -183,6 +193,10 @@ export default function App() {
183193
});
184194
}
185195

196+
function buySkin() {
197+
let skin = document.getElementById("skin").value;
198+
}
199+
186200
// console.log(pubInfo)
187201
if (userData && pubInfo) {
188202
return (
@@ -197,8 +211,6 @@ export default function App() {
197211
</CardTitle>
198212
</CardHeader>
199213
<CardContent>
200-
// may need to get a new token ? alert("Username changed");
201-
window.location.reload();
202214
<p>
203215
<span className="text-sky-500">Username: </span>
204216
{userData.account.username}
@@ -248,9 +260,9 @@ export default function App() {
248260
</span>
249261
<br />
250262
<div className="flex flex-row w-full mt-5">
251-
<Sheet className="w-full mr-2">
263+
<Sheet className="w-full">
252264
<SheetTrigger className="w-full ">
253-
<Button className="w-full">Settings</Button>
265+
<Button className="w-full">Manage Account</Button>
254266
</SheetTrigger>
255267
<SheetContent>
256268
<p className="text-3xl font-bold m-3">Settings</p>
@@ -273,10 +285,44 @@ export default function App() {
273285
<Button className="mt-5" onClick={changeUsername}>
274286
Submit
275287
</Button>
288+
289+
<p className="font-bold mt-5">Buy Skin</p>
290+
<hr />
291+
<p>
292+
<span class="text-sky-500">Gems: </span>
293+
{prettyNum(userData.account.gems)}
294+
</p>
295+
<Select className="mt-10">
296+
<SelectTrigger className="w-[180px] mt-3">
297+
<SelectValue placeholder="Select a Skin " />
298+
</SelectTrigger>
299+
<SelectContent>
300+
<SelectGroup>
301+
<SelectLabel>Skins</SelectLabel>
302+
{cosmetics.skins.map((skin) => {
303+
if (
304+
!skin.og &&
305+
!userData.account.skins.owned.includes(
306+
skin.id
307+
) &&
308+
skin.price <= userData.account.gems
309+
) {
310+
return (
311+
<SelectItem key={skin.id} value={skin.id}>
312+
{skin.name}{" "}
313+
<span className="text-sky-500">
314+
{skin.price}
315+
</span>
316+
</SelectItem>
317+
);
318+
}
319+
})}
320+
</SelectGroup>
321+
</SelectContent>
322+
</Select>
323+
<Button></Button>
276324
</SheetContent>
277325
</Sheet>
278-
279-
<Button className="w-full ml-2">test</Button>
280326
</div>
281327
<Button
282328
className="bg-blue-500 hover:bg-blue-600 mt-5 text-center w-full"

‎src/components/ui/select.tsx

+158
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
import * as React from "react"
2+
import * as SelectPrimitive from "@radix-ui/react-select"
3+
import { Check, ChevronDown, ChevronUp } from "lucide-react"
4+
5+
import { cn } from "@/utils/utils"
6+
7+
const Select = SelectPrimitive.Root
8+
9+
const SelectGroup = SelectPrimitive.Group
10+
11+
const SelectValue = SelectPrimitive.Value
12+
13+
const SelectTrigger = React.forwardRef<
14+
React.ElementRef<typeof SelectPrimitive.Trigger>,
15+
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
16+
>(({ className, children, ...props }, ref) => (
17+
<SelectPrimitive.Trigger
18+
ref={ref}
19+
className={cn(
20+
"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
21+
className
22+
)}
23+
{...props}
24+
>
25+
{children}
26+
<SelectPrimitive.Icon asChild>
27+
<ChevronDown className="h-4 w-4 opacity-50" />
28+
</SelectPrimitive.Icon>
29+
</SelectPrimitive.Trigger>
30+
))
31+
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
32+
33+
const SelectScrollUpButton = React.forwardRef<
34+
React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
35+
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
36+
>(({ className, ...props }, ref) => (
37+
<SelectPrimitive.ScrollUpButton
38+
ref={ref}
39+
className={cn(
40+
"flex cursor-default items-center justify-center py-1",
41+
className
42+
)}
43+
{...props}
44+
>
45+
<ChevronUp className="h-4 w-4" />
46+
</SelectPrimitive.ScrollUpButton>
47+
))
48+
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
49+
50+
const SelectScrollDownButton = React.forwardRef<
51+
React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
52+
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
53+
>(({ className, ...props }, ref) => (
54+
<SelectPrimitive.ScrollDownButton
55+
ref={ref}
56+
className={cn(
57+
"flex cursor-default items-center justify-center py-1",
58+
className
59+
)}
60+
{...props}
61+
>
62+
<ChevronDown className="h-4 w-4" />
63+
</SelectPrimitive.ScrollDownButton>
64+
))
65+
SelectScrollDownButton.displayName =
66+
SelectPrimitive.ScrollDownButton.displayName
67+
68+
const SelectContent = React.forwardRef<
69+
React.ElementRef<typeof SelectPrimitive.Content>,
70+
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
71+
>(({ className, children, position = "popper", ...props }, ref) => (
72+
<SelectPrimitive.Portal>
73+
<SelectPrimitive.Content
74+
ref={ref}
75+
className={cn(
76+
"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
77+
position === "popper" &&
78+
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
79+
className
80+
)}
81+
position={position}
82+
{...props}
83+
>
84+
<SelectScrollUpButton />
85+
<SelectPrimitive.Viewport
86+
className={cn(
87+
"p-1",
88+
position === "popper" &&
89+
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
90+
)}
91+
>
92+
{children}
93+
</SelectPrimitive.Viewport>
94+
<SelectScrollDownButton />
95+
</SelectPrimitive.Content>
96+
</SelectPrimitive.Portal>
97+
))
98+
SelectContent.displayName = SelectPrimitive.Content.displayName
99+
100+
const SelectLabel = React.forwardRef<
101+
React.ElementRef<typeof SelectPrimitive.Label>,
102+
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
103+
>(({ className, ...props }, ref) => (
104+
<SelectPrimitive.Label
105+
ref={ref}
106+
className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
107+
{...props}
108+
/>
109+
))
110+
SelectLabel.displayName = SelectPrimitive.Label.displayName
111+
112+
const SelectItem = React.forwardRef<
113+
React.ElementRef<typeof SelectPrimitive.Item>,
114+
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
115+
>(({ className, children, ...props }, ref) => (
116+
<SelectPrimitive.Item
117+
ref={ref}
118+
className={cn(
119+
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
120+
className
121+
)}
122+
{...props}
123+
>
124+
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
125+
<SelectPrimitive.ItemIndicator>
126+
<Check className="h-4 w-4" />
127+
</SelectPrimitive.ItemIndicator>
128+
</span>
129+
130+
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
131+
</SelectPrimitive.Item>
132+
))
133+
SelectItem.displayName = SelectPrimitive.Item.displayName
134+
135+
const SelectSeparator = React.forwardRef<
136+
React.ElementRef<typeof SelectPrimitive.Separator>,
137+
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
138+
>(({ className, ...props }, ref) => (
139+
<SelectPrimitive.Separator
140+
ref={ref}
141+
className={cn("-mx-1 my-1 h-px bg-muted", className)}
142+
{...props}
143+
/>
144+
))
145+
SelectSeparator.displayName = SelectPrimitive.Separator.displayName
146+
147+
export {
148+
Select,
149+
SelectGroup,
150+
SelectValue,
151+
SelectTrigger,
152+
SelectContent,
153+
SelectLabel,
154+
SelectItem,
155+
SelectSeparator,
156+
SelectScrollUpButton,
157+
SelectScrollDownButton,
158+
}

0 commit comments

Comments
 (0)