Card

1import * as React from "react"
2
3import { cn } from "@/lib/utils"
4
5function Card({ className, ...props }: React.ComponentProps<"div">) {
6  return (
7    <div
8      data-slot="card"
9      className={cn(
10        "rounded-base flex flex-col shadow-shadow border-2 gap-6 py-6 border-border bg-background text-foreground font-base",
11        className,
12      )}
13      {...props}
14    />
15  )
16}
17
18function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
19  return (
20    <div
21      data-slot="card-header"
22      className={cn(
23        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-[data-slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
24        className,
25      )}
26      {...props}
27    />
28  )
29}
30
31function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
32  return (
33    <div
34      data-slot="card-title"
35      className={cn("font-heading leading-none", className)}
36      {...props}
37    />
38  )
39}
40
41function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
42  return (
43    <div
44      data-slot="card-description"
45      className={cn("text-sm font-base", className)}
46      {...props}
47    />
48  )
49}
50
51function CardAction({ className, ...props }: React.ComponentProps<"div">) {
52  return (
53    <div
54      data-slot="card-action"
55      className={cn(
56        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
57        className,
58      )}
59      {...props}
60    />
61  )
62}
63
64function CardContent({ className, ...props }: React.ComponentProps<"div">) {
65  return (
66    <div
67      data-slot="card-content"
68      className={cn("px-6", className)}
69      {...props}
70    />
71  )
72}
73
74function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
75  return (
76    <div
77      data-slot="card-footer"
78      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
79      {...props}
80    />
81  )
82}
83
84export {
85  Card,
86  CardHeader,
87  CardFooter,
88  CardTitle,
89  CardDescription,
90  CardContent,
91  CardAction,
92}