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-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  HTMLDivElement,
34  React.HTMLAttributes<HTMLDivElement>
35>(({ className, ...props }, ref) => (
36  <div
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  HTMLDivElement,
46  React.HTMLAttributes<HTMLDivElement>
47>(({ className, ...props }, ref) => (
48  <div
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 }