card

1import * as React from "react"
2 
3import { cn } from "@/lib/utils"
4 
5function Card({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
6	return (
7		<div
8			data-slot="card"
9			className={cn(
10				"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
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("leading-none font-semibold", 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-muted-foreground text-sm", 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	CardAction,
88	CardTitle,
89	CardDescription,
90	CardContent,
91	CardFooter,
92}