card

1import type * as React from "react"
2 
3import { createAnatomy } from "@ark-ui/react/anatomy"
4 
5import { cn } from "@/lib/utils"
6 
7const anatomy = createAnatomy("card", [
8  "root",
9  "header",
10  "footer",
11  "title",
12  "description",
13  "content",
14  "action",
15])
16const parts = anatomy.build()
17 
18function Card({ className, ...props }: React.ComponentProps<"div">) {
19  return (
20    <div
21      {...parts.root.attrs}
22      className={cn(
23        "flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm",
24        className
25      )}
26      {...props}
27    />
28  )
29}
30 
31function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
32  return (
33    <div
34      {...parts.header.attrs}
35      className={cn(
36        "@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",
37        className
38      )}
39      {...props}
40    />
41  )
42}
43 
44function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
45  return (
46    <div
47      {...parts.title.attrs}
48      className={cn("font-semibold leading-none", className)}
49      {...props}
50    />
51  )
52}
53 
54function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
55  return (
56    <div
57      {...parts.description.attrs}
58      className={cn("text-muted-foreground text-sm", className)}
59      {...props}
60    />
61  )
62}
63 
64function CardAction({ className, ...props }: React.ComponentProps<"div">) {
65  return (
66    <div
67      {...parts.action.attrs}
68      className={cn(
69        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
70        className
71      )}
72      {...props}
73    />
74  )
75}
76 
77function CardContent({ className, ...props }: React.ComponentProps<"div">) {
78  return (
79    <div
80      {...parts.content.attrs}
81      className={cn("px-6", className)}
82      {...props}
83    />
84  )
85}
86 
87function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
88  return (
89    <div
90      {...parts.footer.attrs}
91      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
92      {...props}
93    />
94  )
95}
96 
97export {
98  Card,
99  CardAction,
100  CardContent,
101  CardDescription,
102  CardFooter,
103  CardHeader,
104  CardTitle,
105}