37 lines
827 B
TypeScript
37 lines
827 B
TypeScript
import type { ElementType, ReactNode } from 'react';
|
|
|
|
type CardPadding = 'none' | 'sm' | 'md' | 'lg';
|
|
|
|
type CardProps<T extends ElementType = 'div'> = {
|
|
children: ReactNode;
|
|
padding?: CardPadding;
|
|
as?: T;
|
|
className?: string;
|
|
} & Omit<React.ComponentPropsWithoutRef<T>, 'as' | 'children' | 'className'>;
|
|
|
|
const paddingClassMap: Record<CardPadding, string> = {
|
|
none: '',
|
|
sm: 'p-3',
|
|
md: 'p-4',
|
|
lg: 'p-6',
|
|
};
|
|
|
|
export function Card<T extends ElementType = 'div'>({
|
|
children,
|
|
as,
|
|
className = '',
|
|
padding = 'md',
|
|
...props
|
|
}: CardProps<T>) {
|
|
const Component = as ?? 'div';
|
|
|
|
return (
|
|
<Component
|
|
className={`rounded-[var(--radius-lg)] border border-card-border bg-card text-card-foreground ${paddingClassMap[padding]} ${className}`}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</Component>
|
|
);
|
|
}
|