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}
93