card

1import * as React from "react"
2import { cva, type VariantProps } from "class-variance-authority"
3import { cn } from "@/lib/utils"
4
5const cardVariants = cva(
6    "rounded-base border-2 border-black bg-white text-black shadow-brutal",
7    {
8        variants: {
9            variant: {
10                default: "",
11            },
12        },
13        defaultVariants: {
14            variant: "default",
15        },
16    }
17)
18
19export type CardProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof cardVariants>
20
21const Card = React.forwardRef<HTMLDivElement, CardProps>(
22    ({ className, variant, ...props }, ref) => (
23        <div
24            ref={ref}
25            className={cn(cardVariants({ variant }), "p-4", className)}
26            {...props}
27        />
28    )
29)
30Card.displayName = "Card"
31
32const CardHeader = React.forwardRef<
33    HTMLDivElement,
34    React.HTMLAttributes<HTMLDivElement>
35>(({ className, ...props }, ref) => (
36    <div
37        ref={ref}
38        className={cn("flex flex-col space-y-1.5 pb-2", className)}
39        {...props}
40    />
41))
42CardHeader.displayName = "CardHeader"
43
44const CardTitle = React.forwardRef<
45    HTMLHeadingElement,
46    React.HTMLAttributes<HTMLHeadingElement>
47>(({ className, ...props }, ref) => (
48    <h3
49        ref={ref}
50        className={cn(
51            "text-2xl font-bold",
52            className
53        )}
54        {...props}
55    />
56))
57CardTitle.displayName = "CardTitle"
58
59const CardContent = React.forwardRef<
60    HTMLDivElement,
61    React.HTMLAttributes<HTMLDivElement>
62>(({ className, ...props }, ref) => (
63    <div ref={ref} className={cn(className)} {...props} />
64))
65CardContent.displayName = "CardContent"
66
67const CardFooter = React.forwardRef<
68    HTMLDivElement,
69    React.HTMLAttributes<HTMLDivElement>
70>(({ className, ...props }, ref) => (
71    <div
72        ref={ref}
73        className={cn("flex items-center pt-6", className)}
74        {...props}
75    />
76))
77CardFooter.displayName = "CardFooter"
78
79export { Card, CardHeader, CardFooter, CardTitle, CardContent, cardVariants }