Card

1import * as React from "react";
2 
3import { cn } from "@/lib/utils";
4 
5function Card({
6	className,
7	size = "default",
8	decorations = false,
9	children,
10	...props
11}) {
12	return (
13		<div
14			data-slot="card"
15			data-size={size}
16			className={cn(
17				"ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-lg py-4 has-[data-slot=card-footer]:pb-0 text-xs/relaxed ring-1 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 *:[img:first-child]:rounded-t-lg *:[img:last-child]:rounded-b-lg group/card flex flex-col relative",
18				decorations && "rounded-none overflow-visible",
19				className,
20			)}
21			{...props}
22		>
23			{children}
24 
25			{decorations && (
26				<div className={cn("absolute -left-[1px] -top-[1px] z-10")}>
27					<div className="relative">
28						<div className="bg-muted-foreground w-[1px] h-[7.87px] rounded-full absolute top-0" />
29						<div className="bg-muted-foreground w-[7.87px] h-[1px] rounded-full absolute left-0" />
30					</div>
31				</div>
32			)}
33 
34			{decorations && (
35				<div className={cn("absolute -right-[0px] -top-[1px] z-10")}>
36					<div className="relative">
37						<div className="bg-muted-foreground w-[1px] h-[7.87px] rounded-full absolute top-0" />
38						<div className="bg-muted-foreground w-[7.87px] h-[1px] rounded-full absolute -left-[7px]" />
39					</div>
40				</div>
41			)}
42 
43			{decorations && (
44				<div className={cn("absolute -left-[1px] -bottom-[0px] z-10")}>
45					<div className="relative">
46						<div className="bg-muted-foreground w-[1px] h-[7.87px] rounded-full absolute -top-[7px]" />
47						<div className="bg-muted-foreground w-[7.87px] h-[1px] rounded-full absolute left-0" />
48					</div>
49				</div>
50			)}
51 
52			{decorations && (
53				<div className={cn("absolute -right-[0px] -bottom-[0px] z-10")}>
54					<div className="relative">
55						<div className="bg-muted-foreground w-[1px] h-[7.87px] rounded-full absolute -top-[7px]" />
56						<div className="bg-muted-foreground w-[7.87px] h-[1px] rounded-full absolute -left-[7px]" />
57					</div>
58				</div>
59			)}
60		</div>
61	);
62}
63 
64function CardHeader({ className, ...props }) {
65	return (
66		<div
67			data-slot="card-header"
68			className={cn(
69				"gap-1 rounded-t-lg px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]",
70				className,
71			)}
72			{...props}
73		/>
74	);
75}
76 
77// … truncated