28 lines
681 B
TypeScript
28 lines
681 B
TypeScript
|
import { HTMLAttributes } from "react";
|
||
|
|
import { cn } from "@/lib/utils";
|
||
|
|
|
||
|
|
interface CardProps extends HTMLAttributes<HTMLDivElement> {
|
||
|
|
hoverable?: boolean;
|
||
|
|
padded?: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function Card({
|
||
|
|
className,
|
||
|
|
hoverable = false,
|
||
|
|
padded = true,
|
||
|
|
...props
|
||
|
|
}: CardProps) {
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className={cn(
|
||
|
|
"rounded-(--radius-lg) bg-(--color-surface-default) shadow-(--shadow-cute-sm) border border-(--color-border-subtle)",
|
||
|
|
padded && "p-5",
|
||
|
|
hoverable &&
|
||
|
|
"transition-all duration-200 hover:-translate-y-1 hover:shadow-(--shadow-cute-md) hover:border-(--color-brand-200)",
|
||
|
|
className
|
||
|
|
)}
|
||
|
|
{...props}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|