card

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