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        "relative flex flex-col gap-6 overflow-hidden rounded-2xl border [background:var(--surface-background)] [border-color:var(--surface-border)] text-card-foreground [box-shadow:var(--surface-shadow)] transition-[border-color,background-color,box-shadow,transform] duration-300 ease-[cubic-bezier(.16,1,.3,1)] hover:-translate-y-0.5 hover:[border-color:color-mix(in_oklch,var(--surface-border)_70%,var(--primary))] hover:[box-shadow:var(--surface-shadow-hover)] motion-reduce:transform-none",
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("grid gap-1.5 px-6 pt-6", className)}
23      {...props}
24    />
25  );
26}
27 
28function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
29  return (
30    <div
31      data-slot="card-title"
32      className={cn(
33        "font-semibold leading-none tracking-[-0.025em]",
34        className,
35      )}
36      {...props}
37    />
38  );
39}
40 
41function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
42  return (
43    <div
44      data-slot="card-description"
45      className={cn("text-sm leading-relaxed text-muted-foreground", className)}
46      {...props}
47    />
48  );
49}
50 
51function CardContent({ className, ...props }: React.ComponentProps<"div">) {
52  return (
53    <div
54      data-slot="card-content"
55      className={cn("px-6", className)}
56      {...props}
57    />
58  );
59}
60 
61function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
62  return (
63    <div
64      data-slot="card-footer"
65      className={cn("flex items-center px-6 pb-6", className)}
66      {...props}
67    />
68  );
69}
70 
71export {
72  Card,
73  CardContent,
74  CardDescription,
75  CardFooter,
76  CardHeader,
77  CardTitle,
78};