|
1 | | -import * as React from "react" |
2 | | -import { cva, type VariantProps } from "class-variance-authority" |
| 1 | +import { cva, type VariantProps } from 'class-variance-authority'; |
| 2 | +import type * as React from 'react'; |
3 | 3 |
|
4 | | -import { cn } from "@/lib/utils" |
| 4 | +import { cn } from '@/lib/utils'; |
5 | 5 |
|
6 | 6 | const alertVariants = cva( |
7 | | - "not-content relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current", |
| 7 | + 'not-content relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current', |
8 | 8 | { |
9 | 9 | variants: { |
10 | 10 | variant: { |
11 | | - default: "bg-card text-card-foreground", |
| 11 | + default: 'bg-card text-card-foreground', |
12 | 12 | destructive: |
13 | | - "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90", |
| 13 | + 'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90', |
14 | 14 | }, |
15 | 15 | }, |
16 | 16 | defaultVariants: { |
17 | | - variant: "default", |
| 17 | + variant: 'default', |
18 | 18 | }, |
19 | | - } |
20 | | -) |
| 19 | + }, |
| 20 | +); |
21 | 21 |
|
22 | 22 | function Alert({ |
23 | 23 | className, |
24 | 24 | variant, |
25 | 25 | ...props |
26 | | -}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) { |
| 26 | +}: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) { |
27 | 27 | return ( |
28 | 28 | <div |
29 | 29 | data-slot="alert" |
30 | 30 | role="alert" |
31 | 31 | className={cn(alertVariants({ variant }), className)} |
32 | 32 | {...props} |
33 | 33 | /> |
34 | | - ) |
| 34 | + ); |
35 | 35 | } |
36 | 36 |
|
37 | | -function AlertTitle({ className, ...props }: React.ComponentProps<"div">) { |
| 37 | +function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) { |
38 | 38 | return ( |
39 | 39 | <div |
40 | 40 | data-slot="alert-title" |
41 | 41 | className={cn( |
42 | | - "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", |
43 | | - className |
| 42 | + 'col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', |
| 43 | + className, |
44 | 44 | )} |
45 | 45 | {...props} |
46 | 46 | /> |
47 | | - ) |
| 47 | + ); |
48 | 48 | } |
49 | 49 |
|
50 | 50 | function AlertDescription({ |
51 | 51 | className, |
52 | 52 | ...props |
53 | | -}: React.ComponentProps<"div">) { |
| 53 | +}: React.ComponentProps<'div'>) { |
54 | 54 | return ( |
55 | 55 | <div |
56 | 56 | data-slot="alert-description" |
57 | 57 | className={cn( |
58 | | - "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed", |
59 | | - className |
| 58 | + 'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed', |
| 59 | + className, |
60 | 60 | )} |
61 | 61 | {...props} |
62 | 62 | /> |
63 | | - ) |
| 63 | + ); |
64 | 64 | } |
65 | 65 |
|
66 | | -export { Alert, AlertTitle, AlertDescription } |
| 66 | +export { Alert, AlertTitle, AlertDescription }; |
0 commit comments