jaydip.me
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-lg border bg-card text-card-foreground shadow-xs",
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(
39 "text-2xl font-semibold leading-none tracking-tight",
40 className
41 )}
42 {...props}
43 />
44))
45CardTitle.displayName = "CardTitle"
46
47const CardDescription = React.forwardRef<
48 HTMLParagraphElement,
49 React.HTMLAttributes<HTMLParagraphElement>
50>(({ className, ...props }, ref) => (
51 <p
52 ref={ref}
53 className={cn("text-sm text-muted-foreground", className)}
54 {...props}
55 />
56))
57CardDescription.displayName = "CardDescription"
58
59const CardContent = React.forwardRef<
60 HTMLDivElement,
61 React.HTMLAttributes<HTMLDivElement>
62>(({ className, ...props }, ref) => (
63 <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
64))
65CardContent.displayName = "CardContent"
66
67const CardFooter = React.forwardRef<
68 HTMLDivElement,
69 React.HTMLAttributes<HTMLDivElement>
70>(({ className, ...props }, ref) => (
71 <div
72 ref={ref}
73 className={cn("flex items-center p-6 pt-0", className)}
74 {...props}
75 />
76))
77CardFooter.displayName = "CardFooter"
78
79export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }