| 1 | import * as React from "react"; |
| 2 | |
| 3 | import { cn } from "@/lib/utils"; |
| 4 | |
| 5 | const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => ( |
| 6 | <div ref={ref} className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)} {...props} /> |
| 7 | )); |
| 8 | Card.displayName = "Card"; |
| 9 | |
| 10 | const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>( |
| 11 | ({ className, ...props }, ref) => ( |
| 12 | <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} /> |
| 13 | ), |
| 14 | ); |
| 15 | CardHeader.displayName = "CardHeader"; |
| 16 | |
| 17 | const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>( |
| 18 | ({ className, ...props }, ref) => ( |
| 19 | <h3 ref={ref} className={cn("text-2xl font-semibold leading-none tracking-tight", className)} {...props} /> |
| 20 | ), |
| 21 | ); |
| 22 | CardTitle.displayName = "CardTitle"; |
| 23 | |
| 24 | const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>( |
| 25 | ({ className, ...props }, ref) => ( |
| 26 | <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} /> |
| 27 | ), |
| 28 | ); |
| 29 | CardDescription.displayName = "CardDescription"; |
| 30 | |
| 31 | const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>( |
| 32 | ({ className, ...props }, ref) => <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />, |
| 33 | ); |
| 34 | CardContent.displayName = "CardContent"; |
| 35 | |
| 36 | const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>( |
| 37 | ({ className, ...props }, ref) => ( |
| 38 | <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} /> |
| 39 | ), |
| 40 | ); |
| 41 | CardFooter.displayName = "CardFooter"; |
| 42 | |
| 43 | export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }; |