Skip to content

Commit 86ff558

Browse files
xhulia028xhulia028
committed
add missing files
1 parent 355edca commit 86ff558

File tree

6 files changed

+411
-0
lines changed

6 files changed

+411
-0
lines changed

‎client/src/components/ui/input.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import * as React from "react";
2+
3+
import { cn } from "@/util/utils";
4+
5+
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
6+
return (
7+
<input
8+
type={type}
9+
data-slot="input"
10+
className={cn(
11+
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
12+
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
13+
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
14+
className,
15+
)}
16+
{...props}
17+
/>
18+
);
19+
}
20+
21+
export { Input };

‎client/src/components/ui/popover.tsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
"use client";
2+
3+
import * as React from "react";
4+
import * as PopoverPrimitive from "@radix-ui/react-popover";
5+
6+
import { cn } from "@/util/utils";
7+
8+
function Popover({
9+
...props
10+
}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
11+
return <PopoverPrimitive.Root data-slot="popover" {...props} />;
12+
}
13+
14+
function PopoverTrigger({
15+
...props
16+
}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
17+
return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
18+
}
19+
20+
function PopoverContent({
21+
className,
22+
align = "center",
23+
sideOffset = 4,
24+
...props
25+
}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
26+
return (
27+
<PopoverPrimitive.Portal>
28+
<PopoverPrimitive.Content
29+
data-slot="popover-content"
30+
align={align}
31+
sideOffset={sideOffset}
32+
className={cn(
33+
"bg-popover text-popover-foreground 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 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
34+
className,
35+
)}
36+
{...props}
37+
/>
38+
</PopoverPrimitive.Portal>
39+
);
40+
}
41+
42+
function PopoverAnchor({
43+
...props
44+
}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
45+
return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
46+
}
47+
48+
export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

‎client/src/components/ui/select.tsx‎

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
"use client";
2+
3+
import * as React from "react";
4+
import * as SelectPrimitive from "@radix-ui/react-select";
5+
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
6+
7+
import { cn } from "@/util/utils";
8+
9+
function Select({
10+
...props
11+
}: React.ComponentProps<typeof SelectPrimitive.Root>) {
12+
return <SelectPrimitive.Root data-slot="select" {...props} />;
13+
}
14+
15+
function SelectGroup({
16+
...props
17+
}: React.ComponentProps<typeof SelectPrimitive.Group>) {
18+
return <SelectPrimitive.Group data-slot="select-group" {...props} />;
19+
}
20+
21+
function SelectValue({
22+
...props
23+
}: React.ComponentProps<typeof SelectPrimitive.Value>) {
24+
return <SelectPrimitive.Value data-slot="select-value" {...props} />;
25+
}
26+
27+
function SelectTrigger({
28+
className,
29+
size = "default",
30+
children,
31+
...props
32+
}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
33+
size?: "sm" | "default";
34+
}) {
35+
return (
36+
<SelectPrimitive.Trigger
37+
data-slot="select-trigger"
38+
data-size={size}
39+
className={cn(
40+
"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
41+
className,
42+
)}
43+
{...props}
44+
>
45+
{children}
46+
<SelectPrimitive.Icon asChild>
47+
<ChevronDownIcon className="size-4 opacity-50" />
48+
</SelectPrimitive.Icon>
49+
</SelectPrimitive.Trigger>
50+
);
51+
}
52+
53+
function SelectContent({
54+
className,
55+
children,
56+
position = "popper",
57+
...props
58+
}: React.ComponentProps<typeof SelectPrimitive.Content>) {
59+
return (
60+
<SelectPrimitive.Portal>
61+
<SelectPrimitive.Content
62+
data-slot="select-content"
63+
className={cn(
64+
"bg-popover text-popover-foreground 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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
65+
position === "popper" &&
66+
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
67+
className,
68+
)}
69+
position={position}
70+
{...props}
71+
>
72+
<SelectScrollUpButton />
73+
<SelectPrimitive.Viewport
74+
className={cn(
75+
"p-1",
76+
position === "popper" &&
77+
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
78+
)}
79+
>
80+
{children}
81+
</SelectPrimitive.Viewport>
82+
<SelectScrollDownButton />
83+
</SelectPrimitive.Content>
84+
</SelectPrimitive.Portal>
85+
);
86+
}
87+
88+
function SelectLabel({
89+
className,
90+
...props
91+
}: React.ComponentProps<typeof SelectPrimitive.Label>) {
92+
return (
93+
<SelectPrimitive.Label
94+
data-slot="select-label"
95+
className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
96+
{...props}
97+
/>
98+
);
99+
}
100+
101+
function SelectItem({
102+
className,
103+
children,
104+
...props
105+
}: React.ComponentProps<typeof SelectPrimitive.Item>) {
106+
return (
107+
<SelectPrimitive.Item
108+
data-slot="select-item"
109+
className={cn(
110+
"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
111+
className,
112+
)}
113+
{...props}
114+
>
115+
<span className="absolute right-2 flex size-3.5 items-center justify-center">
116+
<SelectPrimitive.ItemIndicator>
117+
<CheckIcon className="size-4" />
118+
</SelectPrimitive.ItemIndicator>
119+
</span>
120+
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
121+
</SelectPrimitive.Item>
122+
);
123+
}
124+
125+
function SelectSeparator({
126+
className,
127+
...props
128+
}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
129+
return (
130+
<SelectPrimitive.Separator
131+
data-slot="select-separator"
132+
className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
133+
{...props}
134+
/>
135+
);
136+
}
137+
138+
function SelectScrollUpButton({
139+
className,
140+
...props
141+
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
142+
return (
143+
<SelectPrimitive.ScrollUpButton
144+
data-slot="select-scroll-up-button"
145+
className={cn(
146+
"flex cursor-default items-center justify-center py-1",
147+
className,
148+
)}
149+
{...props}
150+
>
151+
<ChevronUpIcon className="size-4" />
152+
</SelectPrimitive.ScrollUpButton>
153+
);
154+
}
155+
156+
function SelectScrollDownButton({
157+
className,
158+
...props
159+
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
160+
return (
161+
<SelectPrimitive.ScrollDownButton
162+
data-slot="select-scroll-down-button"
163+
className={cn(
164+
"flex cursor-default items-center justify-center py-1",
165+
className,
166+
)}
167+
{...props}
168+
>
169+
<ChevronDownIcon className="size-4" />
170+
</SelectPrimitive.ScrollDownButton>
171+
);
172+
}
173+
174+
export {
175+
Select,
176+
SelectContent,
177+
SelectGroup,
178+
SelectItem,
179+
SelectLabel,
180+
SelectScrollDownButton,
181+
SelectScrollUpButton,
182+
SelectSeparator,
183+
SelectTrigger,
184+
SelectValue,
185+
};

‎client/src/components/ui/separator.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
"use client";
2+
3+
import * as React from "react";
4+
import * as SeparatorPrimitive from "@radix-ui/react-separator";
5+
6+
import { cn } from "@/util/utils";
7+
8+
function Separator({
9+
className,
10+
orientation = "horizontal",
11+
decorative = true,
12+
...props
13+
}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
14+
return (
15+
<SeparatorPrimitive.Root
16+
data-slot="separator-root"
17+
decorative={decorative}
18+
orientation={orientation}
19+
className={cn(
20+
"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
21+
className,
22+
)}
23+
{...props}
24+
/>
25+
);
26+
}
27+
28+
export { Separator };

‎client/src/components/ui/slider.tsx‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
"use client";
2+
3+
import * as React from "react";
4+
import * as SliderPrimitive from "@radix-ui/react-slider";
5+
6+
import { cn } from "@/util/utils";
7+
8+
function Slider({
9+
className,
10+
defaultValue,
11+
value,
12+
min = 0,
13+
max = 100,
14+
...props
15+
}: React.ComponentProps<typeof SliderPrimitive.Root>) {
16+
const _values = React.useMemo(
17+
() =>
18+
Array.isArray(value)
19+
? value
20+
: Array.isArray(defaultValue)
21+
? defaultValue
22+
: [min, max],
23+
[value, defaultValue, min, max],
24+
);
25+
26+
return (
27+
<SliderPrimitive.Root
28+
data-slot="slider"
29+
defaultValue={defaultValue}
30+
value={value}
31+
min={min}
32+
max={max}
33+
className={cn(
34+
"relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
35+
className,
36+
)}
37+
{...props}
38+
>
39+
<SliderPrimitive.Track
40+
data-slot="slider-track"
41+
className={cn(
42+
"bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5",
43+
)}
44+
>
45+
<SliderPrimitive.Range
46+
data-slot="slider-range"
47+
className={cn(
48+
"bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full",
49+
)}
50+
/>
51+
</SliderPrimitive.Track>
52+
{Array.from({ length: _values.length }, (_, index) => (
53+
<SliderPrimitive.Thumb
54+
data-slot="slider-thumb"
55+
key={index}
56+
className="border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
57+
/>
58+
))}
59+
</SliderPrimitive.Root>
60+
);
61+
}
62+
63+
export { Slider };

0 commit comments

Comments
 (0)