Card Variants

1"use client";
2 
3import * as React from "react";
4import { ChevronDown } from "lucide-react";
5 
6import { Badge } from "@/components/ui/atoms/badge";
7import { Button } from "@/components/ui/atoms/button";
8import {
9  Card,
10  CardAction,
11  CardContent,
12  CardDescription,
13  CardFooter,
14  CardHeader,
15  CardHeading,
16  CardImage,
17  CardTitle,
18  type CardProps,
19} from "@/components/ui/atoms/card";
20import { cn } from "@/lib/utils";
21 
22type CompositionProps = CardProps;
23 
24interface BasicContentCardProps extends Omit<CompositionProps, "title"> {
25  title: React.ReactNode;
26  description?: React.ReactNode;
27  action?: React.ReactNode;
28}
29 
30function BasicContentCard({
31  action,
32  children,
33  description,
34  title,
35  ...props
36}: BasicContentCardProps) {
37  return (
38    <Card data-slot="basic-content-card" {...props}>
39      <CardHeader>
40        <CardHeading>
41          <CardTitle>{title}</CardTitle>
42          {description && <CardDescription>{description}</CardDescription>}
43        </CardHeading>
44        {action && <CardAction>{action}</CardAction>}
45      </CardHeader>
46      {children && <CardContent>{children}</CardContent>}
47    </Card>
48  );
49}
50 
51interface ImageContentCardProps extends Omit<CompositionProps, "title"> {
52  src: string;
53  alt: string;
54  title: React.ReactNode;
55  description?: React.ReactNode;
56  category?: React.ReactNode;
57  action?: React.ReactNode;
58}
59 
60function ImageContentCard({
61  action,
62  alt,
63  category,
64  description,
65  src,
66  title,
67  ...props
68}: ImageContentCardProps) {
69  return (
70    <Card data-slot="image-content-card" variant="interactive" className="group" {...props}>
71      <CardImage>
72        <img
73          src={src}
74          alt={alt}
75          className="size-full object-cover transition-transform duration-300 group-hover:scale-[1.03]"
76        />
77      </CardImage>
78      <CardHeader>
79        <CardHeading>
80          {category && (
81            <Badge size="sm" className="mb-1 w-fit">
82              {category}
83            </Badge>
84          )}
85          <CardTitle>{title}</CardTitle>
86          {description && <CardDescription>{description}</CardDescription>}
87        </CardHeading>
88      </CardHeader>
89      {action && <CardFooter>{action}</CardFooter>}
90    </Card>
91  );
92}
93 
94interface HorizontalCardProps extends ImageContentCardProps {
95  imageClassName?: string;
96}
97 
98function HorizontalCard({
99  action,
100  alt,
101  category,
102  description,
103  imageClassName,
104  src,
105  title,
106  ...props
107}: HorizontalCardProps) {
108  return (
109    <Card
110      data-slot="horizontal-card"
111// … truncated