43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
import { HTMLAttributes, forwardRef, memo } from "react";
|
|
import { cn } from "@/utils/cn";
|
|
|
|
export interface CardProps extends HTMLAttributes<HTMLDivElement> {
|
|
variant?: "default" | "ai" | "metric";
|
|
hover?: boolean;
|
|
}
|
|
|
|
const Card = memo(forwardRef<HTMLDivElement, CardProps>(
|
|
(
|
|
{ className, variant = "default", hover = true, children, ...props },
|
|
ref
|
|
) => {
|
|
const baseStyles = "rounded-md p-3 transition-all duration-200";
|
|
|
|
const variantStyles = {
|
|
default: cn(
|
|
"bg-transparent",
|
|
hover && "hover:bg-white/5"
|
|
),
|
|
ai: cn(
|
|
"bg-gradient-to-br from-[#121212] to-[#0f0f0f] border border-[#1c1c1c]",
|
|
hover && "hover:border-yellow-500/30"
|
|
),
|
|
metric: "bg-[#0f0f0f] border border-[#1c1c1c]",
|
|
};
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className={cn(baseStyles, variantStyles[variant], className)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
));
|
|
|
|
Card.displayName = "Card";
|
|
|
|
export { Card };
|