card

1import * as React from "react"
2import { cva, type VariantProps } from "class-variance-authority"
3 
4import { cn } from "@/lib/utils"
5import "./card.css"
6 
7const cardVariants = cva(
8  "card-base flex flex-col gap-[var(--layout-gap-xl)] p-[var(--layout-padding-xl)] rounded-[var(--layout-radius-xl)]",
9  {
10    variants: {
11      variant: {
12        outline: "card-outline",
13        ghost: "card-ghost",
14      },
15    },
16    defaultVariants: {
17      variant: "outline",
18    },
19  }
20)
21 
22function Card({
23  className,
24  variant,
25  ...props
26}: React.ComponentProps<"div"> & VariantProps<typeof cardVariants>) {
27  return (
28    <div
29      data-slot="card"
30      className={cn(cardVariants({ variant, className }))}
31      {...props}
32    />
33  )
34}
35 
36function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
37  return (
38    <div
39      data-slot="card-header"
40      className={cn("flex flex-col gap-[var(--layout-gap-sm)]", className)}
41      {...props}
42    />
43  )
44}
45 
46function CardTitle({ className, ...props }: React.ComponentProps<"h3">) {
47  return (
48    <h3
49      data-slot="card-title"
50      className={cn("text-heading-small font-bold", className)}
51      {...props}
52    />
53  )
54}
55 
56function CardDescription({ className, ...props }: React.ComponentProps<"p">) {
57  return (
58    <p
59      data-slot="card-description"
60      className={cn("text-content-note", className)}
61      {...props}
62    />
63  )
64}
65 
66function CardContent({ className, ...props }: React.ComponentProps<"div">) {
67  return (
68    <div
69      data-slot="card-content"
70      className={cn(className)}
71      {...props}
72    />
73  )
74}
75 
76function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
77  return (
78    <div
79      data-slot="card-footer"
80      className={cn(
81        "flex items-center gap-[var(--layout-gap-md)]",
82        className
83      )}
84      {...props}
85    />
86  )
87}
88 
89export {
90  Card,
91  CardHeader,
92  CardFooter,
93  CardTitle,
94  CardDescription,
95  CardContent,
96  cardVariants,
97}