Card

1import { cva, type VariantProps } from "class-variance-authority";
2import Image from "next/image";
3import { cn } from "@/lib/utils";
4import styles from "./card.module.css";
5 
6const cardVariants = cva(styles.card, {
7  variants: {
8    variant: {
9      default: "",
10      lift: styles.cardLift,
11    },
12  },
13  defaultVariants: {
14    variant: "default",
15  },
16});
17 
18function Card({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof cardVariants>) {
19  return <div className={cn(cardVariants({ variant }), className)} data-slot="card" {...props} />;
20}
21 
22function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
23  return <div className={cn(styles.header, className)} data-slot="card-header" {...props} />;
24}
25 
26function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
27  return <div className={cn(styles.title, className)} data-slot="card-title" {...props} />;
28}
29 
30function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
31  return <div className={cn(styles.description, className)} data-slot="card-description" {...props} />;
32}
33 
34function CardContent({ className, ...props }: React.ComponentProps<"div">) {
35  return <div className={cn(styles.content, className)} data-slot="card-content" {...props} />;
36}
37 
38function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
39  return <div className={cn(styles.footer, className)} data-slot="card-footer" {...props} />;
40}
41 
42function CardImage({
43  className,
44  src,
45  alt,
46  ...props
47}: {
48  className?: string;
49  src: string;
50  alt: string;
51} & Omit<React.ComponentProps<typeof Image>, "src" | "alt" | "width" | "height" | "children">) {
52  return (
53    <Image
54      alt={alt}
55      className={cn(styles.image, className)}
56      data-slot="card-image"
57      height={300}
58      src={src}
59      width={300}
60      {...props}
61    />
62  );
63}
64 
65function CardImageContent({ className, ...props }: React.ComponentProps<"div">) {
66  return <div className={cn(styles.imageContent, className)} data-slot="card-image-content" {...props} />;
67}
68 
69function CardIcon({ className, children, ...props }: React.ComponentProps<"div">) {
70  return (
71    <div className={cn(styles.icon, className)} data-slot="card-icon" {...props}>
72      {children}
73    </div>
74  );
75}
76 
77function CardAction({ className, ...props }: React.ComponentProps<"div">) {
78  return <div className={cn(styles.action, className)} data-slot="card-action" {...props} />;
79}
80 
81export {
82  Card,
83  CardAction,
84  CardContent,
85// … truncated