Card

1import * as React from "react";
2 
3import { cn } from "@/lib/utils";
4 
5const Card = React.memo(
6  React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
7    ({ className, ...props }, ref) => (
8      <div
9        ref={ref}
10        className={cn(
11          "border-border bg-card text-card-foreground rounded-md border shadow-[var(--shadow-panel)]",
12          className,
13        )}
14        {...props}
15      />
16    ),
17  ),
18);
19Card.displayName = "Card";
20 
21const CardHeader = React.memo(
22  React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
23    ({ className, ...props }, ref) => (
24      <div ref={ref} className={cn("flex flex-col gap-1 p-4", className)} {...props} />
25    ),
26  ),
27);
28CardHeader.displayName = "CardHeader";
29 
30const CardTitle = React.memo(
31  React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
32    ({ className, ...props }, ref) => (
33      <div
34        ref={ref}
35        className={cn("text-sm leading-none font-semibold tracking-tight", className)}
36        {...props}
37      />
38    ),
39  ),
40);
41CardTitle.displayName = "CardTitle";
42 
43const CardDescription = React.memo(
44  React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
45    ({ className, ...props }, ref) => (
46      <div ref={ref} className={cn("text-foreground-muted text-xs", className)} {...props} />
47    ),
48  ),
49);
50CardDescription.displayName = "CardDescription";
51 
52const CardContent = React.memo(
53  React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
54    ({ className, ...props }, ref) => (
55      <div ref={ref} className={cn("p-4 pt-0", className)} {...props} />
56    ),
57  ),
58);
59CardContent.displayName = "CardContent";
60 
61const CardFooter = React.memo(
62  React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
63    ({ className, ...props }, ref) => (
64      <div
65        ref={ref}
66        className={cn("border-border/60 flex items-center border-t p-4 pt-0", className)}
67        {...props}
68      />
69    ),
70  ),
71);
72CardFooter.displayName = "CardFooter";
73 
74export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter };