1  import * as React from "react"
 2  
 3  import { cn } from "@/lib/utils"
 4  
 5  const 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-sm",
13        className
14      )}
15      {...props}
16    />
17  ))
18  Card.displayName = "Card"
19  
20  const 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  ))
30  CardHeader.displayName = "CardHeader"
31  
32  const CardTitle = React.forwardRef<
33    HTMLParagraphElement,
34    React.HTMLAttributes<HTMLHeadingElement>
35  >(({ className, ...props }, ref) => (
36    <h3
37      ref={ref}
38      className={cn(
39        "text-lg font-semibold leading-none tracking-tight",
40        className
41      )}
42      {...props}
43    />
44  ))
45  CardTitle.displayName = "CardTitle"
46  
47  const 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  ))
57  CardDescription.displayName = "CardDescription"
58  
59  const 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  ))
65  CardContent.displayName = "CardContent"
66  
67  const 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  ))
77  CardFooter.displayName = "CardFooter"
78  
79  export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }