Card

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