card

1import { cn } from "@/lib/utils"
2import * as React from "react"
3 
4function Card({ className, ...props }: React.ComponentProps<"div">) {
5  return (
6    <div
7      data-slot="card"
8      className={cn(
9        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
10        className,
11      )}
12      {...props}
13    />
14  )
15}
16 
17function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
18  return (
19    <div
20      data-slot="card-header"
21      className={cn("flex flex-col gap-1.5 px-6", className)}
22      {...props}
23    />
24  )
25}
26 
27function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
28  return (
29    <div
30      data-slot="card-title"
31      className={cn("leading-none font-semibold", className)}
32      {...props}
33    />
34  )
35}
36 
37function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
38  return (
39    <div
40      data-slot="card-description"
41      className={cn("text-muted-foreground text-sm", className)}
42      {...props}
43    />
44  )
45}
46 
47function CardContent({ className, ...props }: React.ComponentProps<"div">) {
48  return (
49    <div
50      data-slot="card-content"
51      className={cn("px-6", className)}
52      {...props}
53    />
54  )
55}
56 
57function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
58  return (
59    <div
60      data-slot="card-footer"
61      className={cn("flex items-center px-6", className)}
62      {...props}
63    />
64  )
65}
66 
67export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }