Skip to content

Commit 84ee676

Browse files
alphacoder-mp3alphacoder-mp3
committedJul 23, 2024
Add Shadcn setup and components
1 parent 9ab9ea4 commit 84ee676

13 files changed

+851
-70
lines changed
 

‎app/globals.css

+59-23
Original file line numberDiff line numberDiff line change
@@ -2,32 +2,68 @@
22
@tailwind components;
33
@tailwind utilities;
44

5-
:root {
6-
--foreground-rgb: 0, 0, 0;
7-
--background-start-rgb: 214, 219, 220;
8-
--background-end-rgb: 255, 255, 255;
9-
}
10-
11-
@media (prefers-color-scheme: dark) {
5+
@layer base {
126
:root {
13-
--foreground-rgb: 255, 255, 255;
14-
--background-start-rgb: 0, 0, 0;
15-
--background-end-rgb: 0, 0, 0;
7+
--background: 0 0% 100%;
8+
--foreground: 240 10% 3.9%;
9+
--card: 0 0% 100%;
10+
--card-foreground: 240 10% 3.9%;
11+
--popover: 0 0% 100%;
12+
--popover-foreground: 240 10% 3.9%;
13+
--primary: 240 5.9% 10%;
14+
--primary-foreground: 0 0% 98%;
15+
--secondary: 240 4.8% 95.9%;
16+
--secondary-foreground: 240 5.9% 10%;
17+
--muted: 240 4.8% 95.9%;
18+
--muted-foreground: 240 3.8% 46.1%;
19+
--accent: 240 4.8% 95.9%;
20+
--accent-foreground: 240 5.9% 10%;
21+
--destructive: 0 84.2% 60.2%;
22+
--destructive-foreground: 0 0% 98%;
23+
--border: 240 5.9% 90%;
24+
--input: 240 5.9% 90%;
25+
--ring: 240 10% 3.9%;
26+
--radius: 0.5rem;
27+
--chart-1: 12 76% 61%;
28+
--chart-2: 173 58% 39%;
29+
--chart-3: 197 37% 24%;
30+
--chart-4: 43 74% 66%;
31+
--chart-5: 27 87% 67%;
1632
}
17-
}
1833

19-
body {
20-
color: rgb(var(--foreground-rgb));
21-
background: linear-gradient(
22-
to bottom,
23-
transparent,
24-
rgb(var(--background-end-rgb))
25-
)
26-
rgb(var(--background-start-rgb));
34+
.dark {
35+
--background: 240 10% 3.9%;
36+
--foreground: 0 0% 98%;
37+
--card: 240 10% 3.9%;
38+
--card-foreground: 0 0% 98%;
39+
--popover: 240 10% 3.9%;
40+
--popover-foreground: 0 0% 98%;
41+
--primary: 0 0% 98%;
42+
--primary-foreground: 240 5.9% 10%;
43+
--secondary: 240 3.7% 15.9%;
44+
--secondary-foreground: 0 0% 98%;
45+
--muted: 240 3.7% 15.9%;
46+
--muted-foreground: 240 5% 64.9%;
47+
--accent: 240 3.7% 15.9%;
48+
--accent-foreground: 0 0% 98%;
49+
--destructive: 0 62.8% 30.6%;
50+
--destructive-foreground: 0 0% 98%;
51+
--border: 240 3.7% 15.9%;
52+
--input: 240 3.7% 15.9%;
53+
--ring: 240 4.9% 83.9%;
54+
--chart-1: 220 70% 50%;
55+
--chart-2: 160 60% 45%;
56+
--chart-3: 30 80% 55%;
57+
--chart-4: 280 65% 60%;
58+
--chart-5: 340 75% 55%;
59+
}
2760
}
2861

29-
@layer utilities {
30-
.text-balance {
31-
text-wrap: balance;
62+
@layer base {
63+
* {
64+
@apply border-border;
3265
}
33-
}
66+
body {
67+
@apply bg-background text-foreground;
68+
}
69+
}

‎app/layout.tsx

+18-8
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
import type { Metadata } from "next";
2-
import { Inter } from "next/font/google";
3-
import "./globals.css";
1+
import type { Metadata } from 'next';
2+
import { Inter } from 'next/font/google';
3+
import './globals.css';
4+
import { ThemeProvider } from 'next-themes';
45

5-
const inter = Inter({ subsets: ["latin"] });
6+
const inter = Inter({ subsets: ['latin'] });
67

78
export const metadata: Metadata = {
8-
title: "Create Next App",
9-
description: "Generated by create next app",
9+
title: 'Create Next App',
10+
description: 'Generated by create next app',
1011
};
1112

1213
export default function RootLayout({
@@ -15,8 +16,17 @@ export default function RootLayout({
1516
children: React.ReactNode;
1617
}>) {
1718
return (
18-
<html lang="en">
19-
<body className={inter.className}>{children}</body>
19+
<html lang="en" suppressHydrationWarning>
20+
<body className={inter.className}>
21+
<ThemeProvider
22+
attribute="class"
23+
defaultTheme="system"
24+
enableSystem
25+
disableTransitionOnChange
26+
>
27+
{children}
28+
</ThemeProvider>
29+
</body>
2030
</html>
2131
);
2232
}

‎components.json

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"$schema": "https://ui.shadcn.com/schema.json",
3+
"style": "new-york",
4+
"rsc": true,
5+
"tsx": true,
6+
"tailwind": {
7+
"config": "tailwind.config.ts",
8+
"css": "app/globals.css",
9+
"baseColor": "zinc",
10+
"cssVariables": true,
11+
"prefix": ""
12+
},
13+
"aliases": {
14+
"components": "@/components",
15+
"utils": "@/lib/utils"
16+
}
17+
}

‎components/createtodo.tsx

+3-9
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,7 @@ export default function CreateTodo() {
2020
return (
2121
<form ref={formRef} onSubmit={handleSubmit} className="space-y-4">
2222
<div>
23-
<label
24-
htmlFor="title"
25-
className="block text-sm font-medium text-gray-700"
26-
>
23+
<label htmlFor="title" className="block text-sm font-medium ">
2724
Title
2825
</label>
2926
<input
@@ -35,10 +32,7 @@ export default function CreateTodo() {
3532
/>
3633
</div>
3734
<div>
38-
<label
39-
htmlFor="description"
40-
className="block text-sm font-medium text-gray-700"
41-
>
35+
<label htmlFor="description" className="block text-sm font-medium ">
4236
Description
4337
</label>
4438
<textarea
@@ -50,7 +44,7 @@ export default function CreateTodo() {
5044
</div>
5145
<button
5246
type="submit"
53-
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
47+
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
5448
>
5549
Create Todo
5650
</button>

‎components/mode-toggle.tsx

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
'use client';
2+
3+
import * as React from 'react';
4+
import { Moon, Sun } from 'lucide-react';
5+
import { useTheme } from 'next-themes';
6+
7+
import { Button } from '@/components/ui/button';
8+
import {
9+
DropdownMenu,
10+
DropdownMenuContent,
11+
DropdownMenuItem,
12+
DropdownMenuTrigger,
13+
} from '@/components/ui/dropdown-menu';
14+
15+
export function ModeToggle() {
16+
const { setTheme } = useTheme();
17+
18+
return (
19+
<DropdownMenu>
20+
<DropdownMenuTrigger asChild>
21+
<Button variant="outline" size="icon">
22+
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
23+
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
24+
<span className="sr-only">Toggle theme</span>
25+
</Button>
26+
</DropdownMenuTrigger>
27+
<DropdownMenuContent align="end">
28+
<DropdownMenuItem onClick={() => setTheme('light')}>
29+
Light
30+
</DropdownMenuItem>
31+
<DropdownMenuItem onClick={() => setTheme('dark')}>
32+
Dark
33+
</DropdownMenuItem>
34+
<DropdownMenuItem onClick={() => setTheme('system')}>
35+
System
36+
</DropdownMenuItem>
37+
</DropdownMenuContent>
38+
</DropdownMenu>
39+
);
40+
}

‎components/signup.tsx

+4-16
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,7 @@ export default function SignUp() {
2727
className="space-y-4 max-w-md mx-auto"
2828
>
2929
<div>
30-
<label
31-
htmlFor="username"
32-
className="block text-sm font-medium text-gray-700"
33-
>
30+
<label htmlFor="username" className="block text-sm font-medium ">
3431
Username
3532
</label>
3633
<input
@@ -42,10 +39,7 @@ export default function SignUp() {
4239
/>
4340
</div>
4441
<div>
45-
<label
46-
htmlFor="password"
47-
className="block text-sm font-medium text-gray-700"
48-
>
42+
<label htmlFor="password" className="block text-sm font-medium ">
4943
Password
5044
</label>
5145
<input
@@ -57,10 +51,7 @@ export default function SignUp() {
5751
/>
5852
</div>
5953
<div>
60-
<label
61-
htmlFor="firstName"
62-
className="block text-sm font-medium text-gray-700"
63-
>
54+
<label htmlFor="firstName" className="block text-sm font-medium ">
6455
First Name
6556
</label>
6657
<input
@@ -72,10 +63,7 @@ export default function SignUp() {
7263
/>
7364
</div>
7465
<div>
75-
<label
76-
htmlFor="lastName"
77-
className="block text-sm font-medium text-gray-700"
78-
>
66+
<label htmlFor="lastName" className="block text-sm font-medium ">
7967
Last Name
8068
</label>
8169
<input

‎components/theme-provider.tsx

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
'use client';
2+
3+
import * as React from 'react';
4+
import { ThemeProvider as NextThemesProvider } from 'next-themes';
5+
import { type ThemeProviderProps } from 'next-themes/dist/types';
6+
7+
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
8+
return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
9+
}

‎components/ui/button.tsx

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import * as React from "react"
2+
import { Slot } from "@radix-ui/react-slot"
3+
import { cva, type VariantProps } from "class-variance-authority"
4+
5+
import { cn } from "@/lib/utils"
6+
7+
const buttonVariants = cva(
8+
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
9+
{
10+
variants: {
11+
variant: {
12+
default:
13+
"bg-primary text-primary-foreground shadow hover:bg-primary/90",
14+
destructive:
15+
"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
16+
outline:
17+
"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
18+
secondary:
19+
"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
20+
ghost: "hover:bg-accent hover:text-accent-foreground",
21+
link: "text-primary underline-offset-4 hover:underline",
22+
},
23+
size: {
24+
default: "h-9 px-4 py-2",
25+
sm: "h-8 rounded-md px-3 text-xs",
26+
lg: "h-10 rounded-md px-8",
27+
icon: "h-9 w-9",
28+
},
29+
},
30+
defaultVariants: {
31+
variant: "default",
32+
size: "default",
33+
},
34+
}
35+
)
36+
37+
export interface ButtonProps
38+
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
39+
VariantProps<typeof buttonVariants> {
40+
asChild?: boolean
41+
}
42+
43+
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
44+
({ className, variant, size, asChild = false, ...props }, ref) => {
45+
const Comp = asChild ? Slot : "button"
46+
return (
47+
<Comp
48+
className={cn(buttonVariants({ variant, size, className }))}
49+
ref={ref}
50+
{...props}
51+
/>
52+
)
53+
}
54+
)
55+
Button.displayName = "Button"
56+
57+
export { Button, buttonVariants }

‎components/ui/dropdown-menu.tsx

+205
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,205 @@
1+
"use client"
2+
3+
import * as React from "react"
4+
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
5+
import {
6+
CheckIcon,
7+
ChevronRightIcon,
8+
DotFilledIcon,
9+
} from "@radix-ui/react-icons"
10+
11+
import { cn } from "@/lib/utils"
12+
13+
const DropdownMenu = DropdownMenuPrimitive.Root
14+
15+
const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
16+
17+
const DropdownMenuGroup = DropdownMenuPrimitive.Group
18+
19+
const DropdownMenuPortal = DropdownMenuPrimitive.Portal
20+
21+
const DropdownMenuSub = DropdownMenuPrimitive.Sub
22+
23+
const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
24+
25+
const DropdownMenuSubTrigger = React.forwardRef<
26+
React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
27+
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
28+
inset?: boolean
29+
}
30+
>(({ className, inset, children, ...props }, ref) => (
31+
<DropdownMenuPrimitive.SubTrigger
32+
ref={ref}
33+
className={cn(
34+
"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
35+
inset && "pl-8",
36+
className
37+
)}
38+
{...props}
39+
>
40+
{children}
41+
<ChevronRightIcon className="ml-auto h-4 w-4" />
42+
</DropdownMenuPrimitive.SubTrigger>
43+
))
44+
DropdownMenuSubTrigger.displayName =
45+
DropdownMenuPrimitive.SubTrigger.displayName
46+
47+
const DropdownMenuSubContent = React.forwardRef<
48+
React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
49+
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
50+
>(({ className, ...props }, ref) => (
51+
<DropdownMenuPrimitive.SubContent
52+
ref={ref}
53+
className={cn(
54+
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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",
55+
className
56+
)}
57+
{...props}
58+
/>
59+
))
60+
DropdownMenuSubContent.displayName =
61+
DropdownMenuPrimitive.SubContent.displayName
62+
63+
const DropdownMenuContent = React.forwardRef<
64+
React.ElementRef<typeof DropdownMenuPrimitive.Content>,
65+
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
66+
>(({ className, sideOffset = 4, ...props }, ref) => (
67+
<DropdownMenuPrimitive.Portal>
68+
<DropdownMenuPrimitive.Content
69+
ref={ref}
70+
sideOffset={sideOffset}
71+
className={cn(
72+
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
73+
"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",
74+
className
75+
)}
76+
{...props}
77+
/>
78+
</DropdownMenuPrimitive.Portal>
79+
))
80+
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
81+
82+
const DropdownMenuItem = React.forwardRef<
83+
React.ElementRef<typeof DropdownMenuPrimitive.Item>,
84+
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
85+
inset?: boolean
86+
}
87+
>(({ className, inset, ...props }, ref) => (
88+
<DropdownMenuPrimitive.Item
89+
ref={ref}
90+
className={cn(
91+
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
92+
inset && "pl-8",
93+
className
94+
)}
95+
{...props}
96+
/>
97+
))
98+
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
99+
100+
const DropdownMenuCheckboxItem = React.forwardRef<
101+
React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
102+
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
103+
>(({ className, children, checked, ...props }, ref) => (
104+
<DropdownMenuPrimitive.CheckboxItem
105+
ref={ref}
106+
className={cn(
107+
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
108+
className
109+
)}
110+
checked={checked}
111+
{...props}
112+
>
113+
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
114+
<DropdownMenuPrimitive.ItemIndicator>
115+
<CheckIcon className="h-4 w-4" />
116+
</DropdownMenuPrimitive.ItemIndicator>
117+
</span>
118+
{children}
119+
</DropdownMenuPrimitive.CheckboxItem>
120+
))
121+
DropdownMenuCheckboxItem.displayName =
122+
DropdownMenuPrimitive.CheckboxItem.displayName
123+
124+
const DropdownMenuRadioItem = React.forwardRef<
125+
React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
126+
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
127+
>(({ className, children, ...props }, ref) => (
128+
<DropdownMenuPrimitive.RadioItem
129+
ref={ref}
130+
className={cn(
131+
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
132+
className
133+
)}
134+
{...props}
135+
>
136+
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
137+
<DropdownMenuPrimitive.ItemIndicator>
138+
<DotFilledIcon className="h-4 w-4 fill-current" />
139+
</DropdownMenuPrimitive.ItemIndicator>
140+
</span>
141+
{children}
142+
</DropdownMenuPrimitive.RadioItem>
143+
))
144+
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
145+
146+
const DropdownMenuLabel = React.forwardRef<
147+
React.ElementRef<typeof DropdownMenuPrimitive.Label>,
148+
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
149+
inset?: boolean
150+
}
151+
>(({ className, inset, ...props }, ref) => (
152+
<DropdownMenuPrimitive.Label
153+
ref={ref}
154+
className={cn(
155+
"px-2 py-1.5 text-sm font-semibold",
156+
inset && "pl-8",
157+
className
158+
)}
159+
{...props}
160+
/>
161+
))
162+
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
163+
164+
const DropdownMenuSeparator = React.forwardRef<
165+
React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
166+
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
167+
>(({ className, ...props }, ref) => (
168+
<DropdownMenuPrimitive.Separator
169+
ref={ref}
170+
className={cn("-mx-1 my-1 h-px bg-muted", className)}
171+
{...props}
172+
/>
173+
))
174+
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
175+
176+
const DropdownMenuShortcut = ({
177+
className,
178+
...props
179+
}: React.HTMLAttributes<HTMLSpanElement>) => {
180+
return (
181+
<span
182+
className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
183+
{...props}
184+
/>
185+
)
186+
}
187+
DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
188+
189+
export {
190+
DropdownMenu,
191+
DropdownMenuTrigger,
192+
DropdownMenuContent,
193+
DropdownMenuItem,
194+
DropdownMenuCheckboxItem,
195+
DropdownMenuRadioItem,
196+
DropdownMenuLabel,
197+
DropdownMenuSeparator,
198+
DropdownMenuShortcut,
199+
DropdownMenuGroup,
200+
DropdownMenuPortal,
201+
DropdownMenuSub,
202+
DropdownMenuSubContent,
203+
DropdownMenuSubTrigger,
204+
DropdownMenuRadioGroup,
205+
}

‎lib/utils.ts

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { type ClassValue, clsx } from "clsx"
2+
import { twMerge } from "tailwind-merge"
3+
4+
export function cn(...inputs: ClassValue[]) {
5+
return twMerge(clsx(inputs))
6+
}

‎package.json

+10-1
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,19 @@
1010
},
1111
"dependencies": {
1212
"@prisma/client": "^5.17.0",
13+
"@radix-ui/react-dropdown-menu": "^2.1.1",
14+
"@radix-ui/react-icons": "^1.3.0",
15+
"@radix-ui/react-slot": "^1.1.0",
1316
"bcryptjs": "^2.4.3",
17+
"class-variance-authority": "^0.7.0",
18+
"clsx": "^2.1.1",
19+
"lucide-react": "^0.414.0",
1420
"next": "14.2.5",
21+
"next-themes": "^0.3.0",
1522
"react": "^18",
16-
"react-dom": "^18"
23+
"react-dom": "^18",
24+
"tailwind-merge": "^2.4.0",
25+
"tailwindcss-animate": "^1.0.7"
1726
},
1827
"devDependencies": {
1928
"@types/bcryptjs": "^2.4.6",

‎tailwind.config.ts

+75-11
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,84 @@
1-
import type { Config } from "tailwindcss";
1+
import type { Config } from 'tailwindcss';
2+
import { fontFamily } from 'tailwindcss/defaultTheme';
23

3-
const config: Config = {
4+
const config = {
5+
darkMode: ['class'],
46
content: [
5-
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
6-
"./components/**/*.{js,ts,jsx,tsx,mdx}",
7-
"./app/**/*.{js,ts,jsx,tsx,mdx}",
7+
'./pages/**/*.{ts,tsx}',
8+
'./components/**/*.{ts,tsx}',
9+
'./app/**/*.{ts,tsx}',
10+
'./src/**/*.{ts,tsx}',
811
],
12+
prefix: '',
913
theme: {
14+
container: {
15+
center: true,
16+
padding: '2rem',
17+
screens: {
18+
'2xl': '1400px',
19+
},
20+
},
1021
extend: {
11-
backgroundImage: {
12-
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
13-
"gradient-conic":
14-
"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
22+
fontFamily: {
23+
sans: ['var(--font-sans)', ...fontFamily.sans],
24+
},
25+
colors: {
26+
border: 'hsl(var(--border))',
27+
input: 'hsl(var(--input))',
28+
ring: 'hsl(var(--ring))',
29+
background: 'hsl(var(--background))',
30+
foreground: 'hsl(var(--foreground))',
31+
primary: {
32+
DEFAULT: 'hsl(var(--primary))',
33+
foreground: 'hsl(var(--primary-foreground))',
34+
},
35+
secondary: {
36+
DEFAULT: 'hsl(var(--secondary))',
37+
foreground: 'hsl(var(--secondary-foreground))',
38+
},
39+
destructive: {
40+
DEFAULT: 'hsl(var(--destructive))',
41+
foreground: 'hsl(var(--destructive-foreground))',
42+
},
43+
muted: {
44+
DEFAULT: 'hsl(var(--muted))',
45+
foreground: 'hsl(var(--muted-foreground))',
46+
},
47+
accent: {
48+
DEFAULT: 'hsl(var(--accent))',
49+
foreground: 'hsl(var(--accent-foreground))',
50+
},
51+
popover: {
52+
DEFAULT: 'hsl(var(--popover))',
53+
foreground: 'hsl(var(--popover-foreground))',
54+
},
55+
card: {
56+
DEFAULT: 'hsl(var(--card))',
57+
foreground: 'hsl(var(--card-foreground))',
58+
},
59+
},
60+
borderRadius: {
61+
lg: 'var(--radius)',
62+
md: 'calc(var(--radius) - 2px)',
63+
sm: 'calc(var(--radius) - 4px)',
64+
},
65+
keyframes: {
66+
'accordion-down': {
67+
from: { height: '0' },
68+
to: { height: 'var(--radix-accordion-content-height)' },
69+
},
70+
'accordion-up': {
71+
from: { height: 'var(--radix-accordion-content-height)' },
72+
to: { height: '0' },
73+
},
74+
},
75+
animation: {
76+
'accordion-down': 'accordion-down 0.2s ease-out',
77+
'accordion-up': 'accordion-up 0.2s ease-out',
1578
},
1679
},
1780
},
18-
plugins: [],
19-
};
81+
plugins: [require('tailwindcss-animate')],
82+
} satisfies Config;
83+
2084
export default config;

‎yarn.lock

+348-2
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)
Please sign in to comment.