1  import * as React from "react";
 2  
 3  import { cn } from "../../lib/util";
 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-2xl 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 {
80    Card,
81    CardContent,
82    CardDescription,
83    CardFooter,
84    CardHeader,
85    CardTitle,
86  };