WIP. A little custom music server
chore: run prettier
+844
-1024
+21
-21
web/src/components/ui/separator.tsx
+21
-21
web/src/components/ui/separator.tsx
···
1
-
"use client"
1
+
"use client";
2
2
3
-
import * as React from "react"
4
-
import * as SeparatorPrimitive from "@radix-ui/react-separator"
3
+
import * as React from "react";
4
+
import * as SeparatorPrimitive from "@radix-ui/react-separator";
5
5
6
-
import { cn } from "@/lib/utils"
6
+
import { cn } from "@/lib/utils";
7
7
8
8
function Separator({
9
-
className,
10
-
orientation = "horizontal",
11
-
decorative = true,
12
-
...props
9
+
className,
10
+
orientation = "horizontal",
11
+
decorative = true,
12
+
...props
13
13
}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
14
-
return (
15
-
<SeparatorPrimitive.Root
16
-
data-slot="separator"
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
-
)
14
+
return (
15
+
<SeparatorPrimitive.Root
16
+
data-slot="separator"
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
26
}
27
27
28
-
export { Separator }
28
+
export { Separator };
+74
-110
web/src/components/ui/sheet.tsx
+74
-110
web/src/components/ui/sheet.tsx
···
1
-
"use client"
1
+
"use client";
2
2
3
-
import * as React from "react"
4
-
import * as SheetPrimitive from "@radix-ui/react-dialog"
5
-
import { XIcon } from "lucide-react"
3
+
import * as React from "react";
4
+
import * as SheetPrimitive from "@radix-ui/react-dialog";
5
+
import { XIcon } from "lucide-react";
6
6
7
-
import { cn } from "@/lib/utils"
7
+
import { cn } from "@/lib/utils";
8
8
9
9
function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
10
-
return <SheetPrimitive.Root data-slot="sheet" {...props} />
10
+
return <SheetPrimitive.Root data-slot="sheet" {...props} />;
11
11
}
12
12
13
-
function SheetTrigger({
14
-
...props
15
-
}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
16
-
return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
13
+
function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
14
+
return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
17
15
}
18
16
19
-
function SheetClose({
20
-
...props
21
-
}: React.ComponentProps<typeof SheetPrimitive.Close>) {
22
-
return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
17
+
function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>) {
18
+
return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
23
19
}
24
20
25
-
function SheetPortal({
26
-
...props
27
-
}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
28
-
return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
21
+
function SheetPortal({ ...props }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
22
+
return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
29
23
}
30
24
31
-
function SheetOverlay({
32
-
className,
33
-
...props
34
-
}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
35
-
return (
36
-
<SheetPrimitive.Overlay
37
-
data-slot="sheet-overlay"
38
-
className={cn(
39
-
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
40
-
className
41
-
)}
42
-
{...props}
43
-
/>
44
-
)
25
+
function SheetOverlay({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
26
+
return (
27
+
<SheetPrimitive.Overlay
28
+
data-slot="sheet-overlay"
29
+
className={cn(
30
+
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
31
+
className,
32
+
)}
33
+
{...props}
34
+
/>
35
+
);
45
36
}
46
37
47
38
function SheetContent({
48
-
className,
49
-
children,
50
-
side = "right",
51
-
...props
39
+
className,
40
+
children,
41
+
side = "right",
42
+
...props
52
43
}: React.ComponentProps<typeof SheetPrimitive.Content> & {
53
-
side?: "top" | "right" | "bottom" | "left"
44
+
side?: "top" | "right" | "bottom" | "left";
54
45
}) {
55
-
return (
56
-
<SheetPortal>
57
-
<SheetOverlay />
58
-
<SheetPrimitive.Content
59
-
data-slot="sheet-content"
60
-
className={cn(
61
-
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
62
-
side === "right" &&
63
-
"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
64
-
side === "left" &&
65
-
"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
66
-
side === "top" &&
67
-
"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
68
-
side === "bottom" &&
69
-
"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
70
-
className
71
-
)}
72
-
{...props}
73
-
>
74
-
{children}
75
-
<SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
76
-
<XIcon className="size-4" />
77
-
<span className="sr-only">Close</span>
78
-
</SheetPrimitive.Close>
79
-
</SheetPrimitive.Content>
80
-
</SheetPortal>
81
-
)
46
+
return (
47
+
<SheetPortal>
48
+
<SheetOverlay />
49
+
<SheetPrimitive.Content
50
+
data-slot="sheet-content"
51
+
className={cn(
52
+
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
53
+
side === "right"
54
+
&& "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
55
+
side === "left"
56
+
&& "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
57
+
side === "top"
58
+
&& "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
59
+
side === "bottom"
60
+
&& "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
61
+
className,
62
+
)}
63
+
{...props}
64
+
>
65
+
{children}
66
+
<SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
67
+
<XIcon className="size-4" />
68
+
<span className="sr-only">Close</span>
69
+
</SheetPrimitive.Close>
70
+
</SheetPrimitive.Content>
71
+
</SheetPortal>
72
+
);
82
73
}
83
74
84
75
function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
85
-
return (
86
-
<div
87
-
data-slot="sheet-header"
88
-
className={cn("flex flex-col gap-1.5 p-4", className)}
89
-
{...props}
90
-
/>
91
-
)
76
+
return <div data-slot="sheet-header" className={cn("flex flex-col gap-1.5 p-4", className)} {...props} />;
92
77
}
93
78
94
79
function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
95
-
return (
96
-
<div
97
-
data-slot="sheet-footer"
98
-
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
99
-
{...props}
100
-
/>
101
-
)
80
+
return <div data-slot="sheet-footer" className={cn("mt-auto flex flex-col gap-2 p-4", className)} {...props} />;
102
81
}
103
82
104
-
function SheetTitle({
105
-
className,
106
-
...props
107
-
}: React.ComponentProps<typeof SheetPrimitive.Title>) {
108
-
return (
109
-
<SheetPrimitive.Title
110
-
data-slot="sheet-title"
111
-
className={cn("text-foreground font-semibold", className)}
112
-
{...props}
113
-
/>
114
-
)
83
+
function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>) {
84
+
return (
85
+
<SheetPrimitive.Title
86
+
data-slot="sheet-title"
87
+
className={cn("text-foreground font-semibold", className)}
88
+
{...props}
89
+
/>
90
+
);
115
91
}
116
92
117
-
function SheetDescription({
118
-
className,
119
-
...props
120
-
}: React.ComponentProps<typeof SheetPrimitive.Description>) {
121
-
return (
122
-
<SheetPrimitive.Description
123
-
data-slot="sheet-description"
124
-
className={cn("text-muted-foreground text-sm", className)}
125
-
{...props}
126
-
/>
127
-
)
93
+
function SheetDescription({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Description>) {
94
+
return (
95
+
<SheetPrimitive.Description
96
+
data-slot="sheet-description"
97
+
className={cn("text-muted-foreground text-sm", className)}
98
+
{...props}
99
+
/>
100
+
);
128
101
}
129
102
130
-
export {
131
-
Sheet,
132
-
SheetTrigger,
133
-
SheetClose,
134
-
SheetContent,
135
-
SheetHeader,
136
-
SheetFooter,
137
-
SheetTitle,
138
-
SheetDescription,
139
-
}
103
+
export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription };
+3
-9
web/src/components/ui/skeleton.tsx
+3
-9
web/src/components/ui/skeleton.tsx
···
1
-
import { cn } from "@/lib/utils"
1
+
import { cn } from "@/lib/utils";
2
2
3
3
function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
4
-
return (
5
-
<div
6
-
data-slot="skeleton"
7
-
className={cn("bg-accent animate-pulse rounded-md", className)}
8
-
{...props}
9
-
/>
10
-
)
4
+
return <div data-slot="skeleton" className={cn("bg-accent animate-pulse rounded-md", className)} {...props} />;
11
5
}
12
6
13
-
export { Skeleton }
7
+
export { Skeleton };
+35
-48
web/src/components/ui/tooltip.tsx
+35
-48
web/src/components/ui/tooltip.tsx
···
1
-
"use client"
1
+
"use client";
2
2
3
-
import * as React from "react"
4
-
import * as TooltipPrimitive from "@radix-ui/react-tooltip"
3
+
import * as React from "react";
4
+
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
5
5
6
-
import { cn } from "@/lib/utils"
6
+
import { cn } from "@/lib/utils";
7
7
8
-
function TooltipProvider({
9
-
delayDuration = 0,
10
-
...props
11
-
}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
12
-
return (
13
-
<TooltipPrimitive.Provider
14
-
data-slot="tooltip-provider"
15
-
delayDuration={delayDuration}
16
-
{...props}
17
-
/>
18
-
)
8
+
function TooltipProvider({ delayDuration = 0, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
9
+
return <TooltipPrimitive.Provider data-slot="tooltip-provider" delayDuration={delayDuration} {...props} />;
19
10
}
20
11
21
-
function Tooltip({
22
-
...props
23
-
}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
24
-
return (
25
-
<TooltipProvider>
26
-
<TooltipPrimitive.Root data-slot="tooltip" {...props} />
27
-
</TooltipProvider>
28
-
)
12
+
function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
13
+
return (
14
+
<TooltipProvider>
15
+
<TooltipPrimitive.Root data-slot="tooltip" {...props} />
16
+
</TooltipProvider>
17
+
);
29
18
}
30
19
31
-
function TooltipTrigger({
32
-
...props
33
-
}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
34
-
return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
20
+
function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
21
+
return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
35
22
}
36
23
37
24
function TooltipContent({
38
-
className,
39
-
sideOffset = 0,
40
-
children,
41
-
...props
25
+
className,
26
+
sideOffset = 0,
27
+
children,
28
+
...props
42
29
}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
43
-
return (
44
-
<TooltipPrimitive.Portal>
45
-
<TooltipPrimitive.Content
46
-
data-slot="tooltip-content"
47
-
sideOffset={sideOffset}
48
-
className={cn(
49
-
"bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
50
-
className
51
-
)}
52
-
{...props}
53
-
>
54
-
{children}
55
-
<TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]" />
56
-
</TooltipPrimitive.Content>
57
-
</TooltipPrimitive.Portal>
58
-
)
30
+
return (
31
+
<TooltipPrimitive.Portal>
32
+
<TooltipPrimitive.Content
33
+
data-slot="tooltip-content"
34
+
sideOffset={sideOffset}
35
+
className={cn(
36
+
"bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
37
+
className,
38
+
)}
39
+
{...props}
40
+
>
41
+
{children}
42
+
<TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]" />
43
+
</TooltipPrimitive.Content>
44
+
</TooltipPrimitive.Portal>
45
+
);
59
46
}
60
47
61
-
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
48
+
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+13
-13
web/src/hooks/use-mobile.ts
+13
-13
web/src/hooks/use-mobile.ts
···
1
-
import * as React from "react"
1
+
import * as React from "react";
2
2
3
-
const MOBILE_BREAKPOINT = 768
3
+
const MOBILE_BREAKPOINT = 768;
4
4
5
5
export function useIsMobile() {
6
-
const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
6
+
const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
7
7
8
-
React.useEffect(() => {
9
-
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
10
-
const onChange = () => {
11
-
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
12
-
}
13
-
mql.addEventListener("change", onChange)
14
-
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
15
-
return () => mql.removeEventListener("change", onChange)
16
-
}, [])
8
+
React.useEffect(() => {
9
+
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
10
+
const onChange = () => {
11
+
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
12
+
};
13
+
mql.addEventListener("change", onChange);
14
+
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
15
+
return () => mql.removeEventListener("change", onChange);
16
+
}, []);
17
17
18
-
return !!isMobile
18
+
return !!isMobile;
19
19
}
+14
-12
web/src/pages/album/index.tsx
+14
-12
web/src/pages/album/index.tsx
···
3
3
import { FetchFailedError } from "@/lib/errors";
4
4
import { Effect, pipe } from "effect";
5
5
6
-
const getAlbums = () => pipe(
7
-
Effect.tryPromise({
8
-
try: () => client.albums.get(),
9
-
catch: (err) => new FetchFailedError({
10
-
cause: err,
11
-
message: "Failed to fetch album"
12
-
})
13
-
}),
14
-
Effect.map(x => x.data),
15
-
Effect.flatMap(Effect.fromNullable)
16
-
)
6
+
const getAlbums = () =>
7
+
pipe(
8
+
Effect.tryPromise({
9
+
try: () => client.albums.get(),
10
+
catch: (err) =>
11
+
new FetchFailedError({
12
+
cause: err,
13
+
message: "Failed to fetch album",
14
+
}),
15
+
}),
16
+
Effect.map((x) => x.data),
17
+
Effect.flatMap(Effect.fromNullable),
18
+
);
17
19
18
20
const AlbumPage = () =>
19
21
Effect.gen(function* () {
···
28
30
</div>
29
31
</div>
30
32
);
31
-
})
33
+
});
32
34
33
35
export default () => Effect.runPromise(AlbumPage());
+106
-106
web/src/styles.css
+106
-106
web/src/styles.css
···
4
4
@custom-variant dark (&:is(.dark *));
5
5
6
6
:root {
7
-
--radius: 0.65rem;
8
-
--background: oklch(1 0 0);
9
-
--foreground: oklch(0.141 0.005 285.823);
10
-
--card: oklch(1 0 0);
11
-
--card-foreground: oklch(0.141 0.005 285.823);
12
-
--popover: oklch(1 0 0);
13
-
--popover-foreground: oklch(0.141 0.005 285.823);
14
-
--primary: oklch(0.705 0.213 47.604);
15
-
--primary-foreground: oklch(0.98 0.016 73.684);
16
-
--secondary: oklch(0.967 0.001 286.375);
17
-
--secondary-foreground: oklch(0.21 0.006 285.885);
18
-
--muted: oklch(0.967 0.001 286.375);
19
-
--muted-foreground: oklch(0.552 0.016 285.938);
20
-
--accent: oklch(0.967 0.001 286.375);
21
-
--accent-foreground: oklch(0.21 0.006 285.885);
22
-
--destructive: oklch(0.577 0.245 27.325);
23
-
--border: oklch(0.92 0.004 286.32);
24
-
--input: oklch(0.92 0.004 286.32);
25
-
--ring: oklch(0.705 0.213 47.604);
26
-
--chart-1: oklch(0.646 0.222 41.116);
27
-
--chart-2: oklch(0.6 0.118 184.704);
28
-
--chart-3: oklch(0.398 0.07 227.392);
29
-
--chart-4: oklch(0.828 0.189 84.429);
30
-
--chart-5: oklch(0.769 0.188 70.08);
31
-
--sidebar: oklch(0.985 0 0);
32
-
--sidebar-foreground: oklch(0.141 0.005 285.823);
33
-
--sidebar-primary: oklch(0.705 0.213 47.604);
34
-
--sidebar-primary-foreground: oklch(0.98 0.016 73.684);
35
-
--sidebar-accent: oklch(0.967 0.001 286.375);
36
-
--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
37
-
--sidebar-border: oklch(0.92 0.004 286.32);
38
-
--sidebar-ring: oklch(0.705 0.213 47.604);
7
+
--radius: 0.65rem;
8
+
--background: oklch(1 0 0);
9
+
--foreground: oklch(0.141 0.005 285.823);
10
+
--card: oklch(1 0 0);
11
+
--card-foreground: oklch(0.141 0.005 285.823);
12
+
--popover: oklch(1 0 0);
13
+
--popover-foreground: oklch(0.141 0.005 285.823);
14
+
--primary: oklch(0.705 0.213 47.604);
15
+
--primary-foreground: oklch(0.98 0.016 73.684);
16
+
--secondary: oklch(0.967 0.001 286.375);
17
+
--secondary-foreground: oklch(0.21 0.006 285.885);
18
+
--muted: oklch(0.967 0.001 286.375);
19
+
--muted-foreground: oklch(0.552 0.016 285.938);
20
+
--accent: oklch(0.967 0.001 286.375);
21
+
--accent-foreground: oklch(0.21 0.006 285.885);
22
+
--destructive: oklch(0.577 0.245 27.325);
23
+
--border: oklch(0.92 0.004 286.32);
24
+
--input: oklch(0.92 0.004 286.32);
25
+
--ring: oklch(0.705 0.213 47.604);
26
+
--chart-1: oklch(0.646 0.222 41.116);
27
+
--chart-2: oklch(0.6 0.118 184.704);
28
+
--chart-3: oklch(0.398 0.07 227.392);
29
+
--chart-4: oklch(0.828 0.189 84.429);
30
+
--chart-5: oklch(0.769 0.188 70.08);
31
+
--sidebar: oklch(0.985 0 0);
32
+
--sidebar-foreground: oklch(0.141 0.005 285.823);
33
+
--sidebar-primary: oklch(0.705 0.213 47.604);
34
+
--sidebar-primary-foreground: oklch(0.98 0.016 73.684);
35
+
--sidebar-accent: oklch(0.967 0.001 286.375);
36
+
--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
37
+
--sidebar-border: oklch(0.92 0.004 286.32);
38
+
--sidebar-ring: oklch(0.705 0.213 47.604);
39
39
}
40
40
41
41
.dark {
42
-
--background: oklch(0.141 0.005 285.823);
43
-
--foreground: oklch(0.985 0 0);
44
-
--card: oklch(0.21 0.006 285.885);
45
-
--card-foreground: oklch(0.985 0 0);
46
-
--popover: oklch(0.21 0.006 285.885);
47
-
--popover-foreground: oklch(0.985 0 0);
48
-
--primary: oklch(0.646 0.222 41.116);
49
-
--primary-foreground: oklch(0.98 0.016 73.684);
50
-
--secondary: oklch(0.274 0.006 286.033);
51
-
--secondary-foreground: oklch(0.985 0 0);
52
-
--muted: oklch(0.274 0.006 286.033);
53
-
--muted-foreground: oklch(0.705 0.015 286.067);
54
-
--accent: oklch(0.274 0.006 286.033);
55
-
--accent-foreground: oklch(0.985 0 0);
56
-
--destructive: oklch(0.704 0.191 22.216);
57
-
--border: oklch(1 0 0 / 10%);
58
-
--input: oklch(1 0 0 / 15%);
59
-
--ring: oklch(0.646 0.222 41.116);
60
-
--chart-1: oklch(0.488 0.243 264.376);
61
-
--chart-2: oklch(0.696 0.17 162.48);
62
-
--chart-3: oklch(0.769 0.188 70.08);
63
-
--chart-4: oklch(0.627 0.265 303.9);
64
-
--chart-5: oklch(0.645 0.246 16.439);
65
-
--sidebar: oklch(0.21 0.006 285.885);
66
-
--sidebar-foreground: oklch(0.985 0 0);
67
-
--sidebar-primary: oklch(0.646 0.222 41.116);
68
-
--sidebar-primary-foreground: oklch(0.98 0.016 73.684);
69
-
--sidebar-accent: oklch(0.274 0.006 286.033);
70
-
--sidebar-accent-foreground: oklch(0.985 0 0);
71
-
--sidebar-border: oklch(1 0 0 / 10%);
72
-
--sidebar-ring: oklch(0.646 0.222 41.116);
42
+
--background: oklch(0.141 0.005 285.823);
43
+
--foreground: oklch(0.985 0 0);
44
+
--card: oklch(0.21 0.006 285.885);
45
+
--card-foreground: oklch(0.985 0 0);
46
+
--popover: oklch(0.21 0.006 285.885);
47
+
--popover-foreground: oklch(0.985 0 0);
48
+
--primary: oklch(0.646 0.222 41.116);
49
+
--primary-foreground: oklch(0.98 0.016 73.684);
50
+
--secondary: oklch(0.274 0.006 286.033);
51
+
--secondary-foreground: oklch(0.985 0 0);
52
+
--muted: oklch(0.274 0.006 286.033);
53
+
--muted-foreground: oklch(0.705 0.015 286.067);
54
+
--accent: oklch(0.274 0.006 286.033);
55
+
--accent-foreground: oklch(0.985 0 0);
56
+
--destructive: oklch(0.704 0.191 22.216);
57
+
--border: oklch(1 0 0 / 10%);
58
+
--input: oklch(1 0 0 / 15%);
59
+
--ring: oklch(0.646 0.222 41.116);
60
+
--chart-1: oklch(0.488 0.243 264.376);
61
+
--chart-2: oklch(0.696 0.17 162.48);
62
+
--chart-3: oklch(0.769 0.188 70.08);
63
+
--chart-4: oklch(0.627 0.265 303.9);
64
+
--chart-5: oklch(0.645 0.246 16.439);
65
+
--sidebar: oklch(0.21 0.006 285.885);
66
+
--sidebar-foreground: oklch(0.985 0 0);
67
+
--sidebar-primary: oklch(0.646 0.222 41.116);
68
+
--sidebar-primary-foreground: oklch(0.98 0.016 73.684);
69
+
--sidebar-accent: oklch(0.274 0.006 286.033);
70
+
--sidebar-accent-foreground: oklch(0.985 0 0);
71
+
--sidebar-border: oklch(1 0 0 / 10%);
72
+
--sidebar-ring: oklch(0.646 0.222 41.116);
73
73
}
74
74
75
75
@theme inline {
76
-
--color-background: var(--background);
77
-
--color-foreground: var(--foreground);
78
-
--color-card: var(--card);
79
-
--color-card-foreground: var(--card-foreground);
80
-
--color-popover: var(--popover);
81
-
--color-popover-foreground: var(--popover-foreground);
82
-
--color-primary: var(--primary);
83
-
--color-primary-foreground: var(--primary-foreground);
84
-
--color-primary-background: var(--primary-foreground);
85
-
--color-secondary: var(--secondary);
86
-
--color-secondary-foreground: var(--secondary-foreground);
87
-
--color-muted: var(--muted);
88
-
--color-muted-foreground: var(--muted-foreground);
89
-
--color-accent: var(--accent);
90
-
--color-accent-foreground: var(--accent-foreground);
91
-
--color-destructive: var(--destructive);
92
-
--color-destructive-foreground: var(--destructive-foreground);
93
-
--color-border: var(--border);
94
-
--color-input: var(--input);
95
-
--color-ring: var(--ring);
96
-
--color-chart-1: var(--chart-1);
97
-
--color-chart-2: var(--chart-2);
98
-
--color-chart-3: var(--chart-3);
99
-
--color-chart-4: var(--chart-4);
100
-
--color-chart-5: var(--chart-5);
101
-
--radius-sm: calc(var(--radius) - 4px);
102
-
--radius-md: calc(var(--radius) - 2px);
103
-
--radius-lg: var(--radius);
104
-
--radius-xl: calc(var(--radius) + 4px);
105
-
--color-sidebar: var(--sidebar);
106
-
--color-sidebar-foreground: var(--sidebar-foreground);
107
-
--color-sidebar-primary: var(--sidebar-primary);
108
-
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
109
-
--color-sidebar-accent: var(--sidebar-accent);
110
-
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
111
-
--color-sidebar-border: var(--sidebar-border);
112
-
--color-sidebar-ring: var(--sidebar-ring);
76
+
--color-background: var(--background);
77
+
--color-foreground: var(--foreground);
78
+
--color-card: var(--card);
79
+
--color-card-foreground: var(--card-foreground);
80
+
--color-popover: var(--popover);
81
+
--color-popover-foreground: var(--popover-foreground);
82
+
--color-primary: var(--primary);
83
+
--color-primary-foreground: var(--primary-foreground);
84
+
--color-primary-background: var(--primary-foreground);
85
+
--color-secondary: var(--secondary);
86
+
--color-secondary-foreground: var(--secondary-foreground);
87
+
--color-muted: var(--muted);
88
+
--color-muted-foreground: var(--muted-foreground);
89
+
--color-accent: var(--accent);
90
+
--color-accent-foreground: var(--accent-foreground);
91
+
--color-destructive: var(--destructive);
92
+
--color-destructive-foreground: var(--destructive-foreground);
93
+
--color-border: var(--border);
94
+
--color-input: var(--input);
95
+
--color-ring: var(--ring);
96
+
--color-chart-1: var(--chart-1);
97
+
--color-chart-2: var(--chart-2);
98
+
--color-chart-3: var(--chart-3);
99
+
--color-chart-4: var(--chart-4);
100
+
--color-chart-5: var(--chart-5);
101
+
--radius-sm: calc(var(--radius) - 4px);
102
+
--radius-md: calc(var(--radius) - 2px);
103
+
--radius-lg: var(--radius);
104
+
--radius-xl: calc(var(--radius) + 4px);
105
+
--color-sidebar: var(--sidebar);
106
+
--color-sidebar-foreground: var(--sidebar-foreground);
107
+
--color-sidebar-primary: var(--sidebar-primary);
108
+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
109
+
--color-sidebar-accent: var(--sidebar-accent);
110
+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
111
+
--color-sidebar-border: var(--sidebar-border);
112
+
--color-sidebar-ring: var(--sidebar-ring);
113
113
}
114
114
115
115
@layer base {
116
-
* {
117
-
@apply border-border outline-ring/50;
118
-
}
119
-
body {
120
-
@apply bg-background text-foreground;
121
-
}
116
+
* {
117
+
@apply border-border outline-ring/50;
118
+
}
119
+
body {
120
+
@apply bg-background text-foreground;
121
+
}
122
122
}
123
123
@font-face {
124
124
font-family: "Geist";