Card

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 data-slot="card-title" className={cn("font-heading leading-none", className)} {...props} />
34  );
35}
36 
37function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
38  return (
39    <div data-slot="card-description" className={cn("text-sm font-base", className)} {...props} />
40  );
41}
42 
43function CardAction({ className, ...props }: React.ComponentProps<"div">) {
44  return (
45    <div
46      data-slot="card-action"
47      className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
48      {...props}
49    />
50  );
51}
52 
53function CardContent({ className, ...props }: React.ComponentProps<"div">) {
54  return <div data-slot="card-content" className={cn("px-6", className)} {...props} />;
55}
56 
57function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
58  return (
59    <div
60      data-slot="card-footer"
61      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
62      {...props}
63    />
64  );
65}
66 
67export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent, CardAction };