Card

1import React from "react";
2
3import { cn } from "@/lib/classes";
4
5interface CardProps extends React.ComponentProps<"div"> {}
6
7function Card({ className, ...props }: CardProps) {
8  return (
9    <div
10      data-slot="card"
11      className={cn(
12        "relative flex flex-col gap-3 overflow-hidden p-4 rounded-xl border border-border/60",
13        "bg-card shadow-xs in-data-[slot=popover-popup]:bg-transparent in-data-[slot=popover-popup]:shadow-none",
14        className
15      )}
16      {...props}
17    />
18  );
19}
20
21interface CardHeaderProps extends React.ComponentProps<"div"> {}
22
23function CardHeader({ className, ...props }: CardHeaderProps) {
24  return (
25    <div
26      data-slot="card-header"
27      className={cn("flex flex-col", className)}
28      {...props}
29    />
30  );
31}
32
33interface CardTitleProps extends React.ComponentProps<"h3"> {}
34
35function CardTitle({ className, ...props }: CardTitleProps) {
36  return (
37    <h3
38      data-slot="card-title"
39      className={cn("text-base text-card-foreground leading-6", className)}
40      {...props}
41    />
42  );
43}
44
45interface CardDescriptionProps extends React.ComponentProps<"p"> {}
46
47function CardDescription({ className, ...props }: CardDescriptionProps) {
48  return (
49    <p
50      data-slot="card-description"
51      className={cn("text-muted-foreground text-sm", className)}
52      {...props}
53    />
54  );
55}
56
57interface CardContentProps extends React.ComponentProps<"div"> {}
58
59function CardContent({ className, ...props }: CardContentProps) {
60  return (
61    <div
62      data-slot="card-content"
63      className={cn("flex flex-col gap-1 flex-1", className)}
64      {...props}
65    />
66  );
67}
68
69interface CardFooterProps extends React.ComponentProps<"div"> {}
70function CardFooter({ className, ...props }: CardFooterProps) {
71  return (
72    <div
73      data-slot="card-footer"
74      className={cn("flex flex-row items-center", className)}
75      {...props}
76    />
77  );
78}
79
80export {
81  Card,
82  CardHeader,
83  CardTitle,
84  CardDescription,
85  CardContent,
86  CardFooter,
87};