1
import type { HTMLAttributes, ReactNode } from "react";
2
 
3
type CardVariant = "default" | "accent";
4
 
5
interface CardProps extends HTMLAttributes<HTMLDivElement> {
6
  variant?: CardVariant;
7
  interactive?: boolean;
8
  children: ReactNode;
9
}
10
 
11
const VARIANT_CLASSES: Record<CardVariant, string> = {
12
  default: "border-zinc-800/60 bg-zinc-900/50",
13
  accent: "border-accent-500/20 bg-gradient-to-br from-zinc-900/80 to-zinc-900/40",
14
};
15
 
16
export const Card = ({ variant = "default", interactive = false, children, className, ...rest }: CardProps) => (
17
  <div
18
    className={[
19
      "rounded-2xl border p-5 sm:p-6",
20
      VARIANT_CLASSES[variant],
21
      interactive && "hover:-translate-y-0.5 hover:shadow-sm transition-[transform,box-shadow] cursor-pointer",
22
      className,
23
    ]
24
      .filter(Boolean)
25
      .join(" ")}
26
    {...rest}
27
  >
28
    {children}
29
  </div>
30
);