Card

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-2xl bg-background text-card-foreground surface-card",
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  HTMLHeadingElement,
34  React.HTMLAttributes<HTMLHeadingElement>
35>(({ className, children, ...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    {children}
45  </h3>
46))
47CardTitle.displayName = "CardTitle"
48 
49const CardDescription = React.forwardRef<
50  HTMLParagraphElement,
51  React.HTMLAttributes<HTMLParagraphElement>
52>(({ className, ...props }, ref) => (
53  <p
54    ref={ref}
55    className={cn("text-sm text-muted-foreground", className)}
56    {...props}
57  />
58))
59CardDescription.displayName = "CardDescription"
60 
61const CardContent = React.forwardRef<
62  HTMLDivElement,
63  React.HTMLAttributes<HTMLDivElement>
64>(({ className, ...props }, ref) => (
65  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
66))
67CardContent.displayName = "CardContent"
68 
69const CardFooter = React.forwardRef<
70  HTMLDivElement,
71  React.HTMLAttributes<HTMLDivElement>
72>(({ className, ...props }, ref) => (
73  <div
74    ref={ref}
75    className={cn("flex items-center p-6 pt-0", className)}
76    {...props}
77  />
78))
79CardFooter.displayName = "CardFooter"
80 
81export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }