32 lines
682 B
TypeScript
32 lines
682 B
TypeScript
import { ElementType, ReactNode } from "react";
|
|
import clsx from "clsx";
|
|
import styles from "./Card.module.css";
|
|
|
|
type CardVariant = "default" | "strong" | "subtle";
|
|
|
|
type CardProps = {
|
|
as?: ElementType;
|
|
children: ReactNode;
|
|
className?: string | undefined;
|
|
hoverable?: boolean;
|
|
padded?: boolean;
|
|
variant?: CardVariant;
|
|
};
|
|
|
|
export function Card({
|
|
as: Component = "section",
|
|
children,
|
|
className,
|
|
hoverable = false,
|
|
padded = true,
|
|
variant = "default",
|
|
}: CardProps) {
|
|
return (
|
|
<Component
|
|
className={clsx(styles.root, styles[variant], hoverable && styles.hoverable, padded && styles.padded, className)}
|
|
>
|
|
{children}
|
|
</Component>
|
|
);
|
|
}
|