1import * as React from 'react'
2
3import { cn } from '@/lib/utils'
4
5const Card = React.forwardRef<
6 HTMLDivElement,
7 React.HTMLAttributes<HTMLDivElement>
8>(({ className, ...props }, ref) => (
9 <div
10 ref={ref}
11 className={cn(
12 'rounded-xl border bg-card text-card-foreground shadow',
13 className,
14 )}
15 {...props}
16 />
17))
18Card.displayName = 'Card'
19
20const CardHeader = React.forwardRef<
21 HTMLDivElement,
22 React.HTMLAttributes<HTMLDivElement>
23>(({ className, ...props }, ref) => (
24 <div
25 ref={ref}
26 className={cn('flex flex-col space-y-1.5 p-6', className)}
27 {...props}
28 />
29))
30CardHeader.displayName = 'CardHeader'
31
32const CardTitle = React.forwardRef<
33 HTMLParagraphElement,
34 React.HTMLAttributes<HTMLHeadingElement>
35>(({ className, ...props }, ref) => (
36 <h3
37 ref={ref}
38 className={cn('font-semibold leading-none tracking-tight', className)}
39 {...props}
40 />
41))
42CardTitle.displayName = 'CardTitle'
43
44const CardDescription = React.forwardRef<
45 HTMLParagraphElement,
46 React.HTMLAttributes<HTMLParagraphElement>
47>(({ className, ...props }, ref) => (
48 <p
49 ref={ref}
50 className={cn('text-sm text-muted-foreground', className)}
51 {...props}
52 />
53))
54CardDescription.displayName = 'CardDescription'
55
56const CardContent = React.forwardRef<
57 HTMLDivElement,
58 React.HTMLAttributes<HTMLDivElement>
59>(({ className, ...props }, ref) => (
60 <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
61))
62CardContent.displayName = 'CardContent'
63
64const CardFooter = React.forwardRef<
65 HTMLDivElement,
66 React.HTMLAttributes<HTMLDivElement>
67>(({ className, ...props }, ref) => (
68 <div
69 ref={ref}
70 className={cn('flex items-center p-6 pt-0', className)}
71 {...props}
72 />
73))
74CardFooter.displayName = 'CardFooter'
75
76export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
77