Card

1import * as React from 'react'
2import { cn } from '@/lib/utils'
3 
4const Card = React.forwardRef<
5  HTMLDivElement,
6  React.HTMLAttributes<HTMLDivElement> & { interactive?: boolean }
7>(({ className, interactive, role = 'article', ...props }, ref) => (
8  <div
9    ref={ref}
10    role={role}
11    className={cn(
12      'bg-card text-card-foreground border-3 border-foreground shadow-[4px_4px_0px_hsl(var(--shadow-color))] bk-interactive',
13      interactive && 'cursor-pointer hover:translate-x-[4px] hover:translate-y-[4px] hover:shadow-none active:translate-x-[4px] active:translate-y-[4px] active:shadow-none',
14      className
15    )}
16    {...props}
17  />
18))
19Card.displayName = 'Card'
20 
21const CardHeader = React.forwardRef<
22  HTMLDivElement,
23  React.HTMLAttributes<HTMLDivElement>
24>(({ className, ...props }, ref) => (
25  <div
26    ref={ref}
27    className={cn('flex flex-col space-y-1.5 p-6 border-b-3 border-foreground', className)}
28    {...props}
29  />
30))
31CardHeader.displayName = 'CardHeader'
32 
33const CardTitle = React.forwardRef<
34  HTMLHeadingElement,
35  React.HTMLAttributes<HTMLHeadingElement>
36>(({ className, ...props }, ref) => (
37  <h3
38    ref={ref}
39    className={cn('text-xl font-bold uppercase tracking-wide leading-none', className)}
40    {...props}
41  />
42))
43CardTitle.displayName = 'CardTitle'
44 
45const CardDescription = React.forwardRef<
46  HTMLDivElement,
47  React.HTMLAttributes<HTMLDivElement>
48>(({ className, ...props }, ref) => (
49  <div
50    ref={ref}
51    className={cn('text-sm text-muted-foreground', className)}
52    {...props}
53  />
54))
55CardDescription.displayName = 'CardDescription'
56 
57const CardContent = React.forwardRef<
58  HTMLDivElement,
59  React.HTMLAttributes<HTMLDivElement>
60>(({ className, ...props }, ref) => (
61  <div ref={ref} className={cn('p-6', className)} {...props} />
62))
63CardContent.displayName = 'CardContent'
64 
65const CardFooter = React.forwardRef<
66  HTMLDivElement,
67  React.HTMLAttributes<HTMLDivElement>
68>(({ className, ...props }, ref) => (
69  <div
70    ref={ref}
71    className={cn('flex items-center p-6 border-t-3 border-foreground bg-muted/50', className)}
72    {...props}
73  />
74))
75CardFooter.displayName = 'CardFooter'
76 
77export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }