Card

1import * as React from 'react'
2import { cn } from '@/lib/utils'
3 
4const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
5  ({ className, ...props }, ref) => (
6    <div
7      ref={ref}
8      className={cn(
9        'bg-[var(--surface)] border border-[var(--border)]',
10        'text-[var(--text-secondary)] font-mono',
11        className
12      )}
13      {...props}
14    />
15  )
16)
17Card.displayName = 'Card'
18 
19const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
20  ({ className, ...props }, ref) => (
21    <div
22      ref={ref}
23      className={cn('flex flex-col gap-1.5 p-4 border-b border-[var(--border)]', className)}
24      {...props}
25    />
26  )
27)
28CardHeader.displayName = 'CardHeader'
29 
30const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
31  ({ className, ...props }, ref) => (
32    <h3
33      ref={ref}
34      className={cn(
35        'text-sm font-semibold uppercase tracking-widest text-[var(--color-green)]',
36        className
37      )}
38      {...props}
39    />
40  )
41)
42CardTitle.displayName = 'CardTitle'
43 
44const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
45  ({ className, ...props }, ref) => (
46    <p
47      ref={ref}
48      className={cn('text-xs text-[var(--text-muted)]', className)}
49      {...props}
50    />
51  )
52)
53CardDescription.displayName = 'CardDescription'
54 
55const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
56  ({ className, ...props }, ref) => (
57    <div ref={ref} className={cn('p-4', className)} {...props} />
58  )
59)
60CardContent.displayName = 'CardContent'
61 
62const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
63  ({ className, ...props }, ref) => (
64    <div
65      ref={ref}
66      className={cn('flex items-center p-4 border-t border-[var(--border)]', className)}
67      {...props}
68    />
69  )
70)
71CardFooter.displayName = 'CardFooter'
72 
73export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter }