39 lines
942 B
TypeScript
39 lines
942 B
TypeScript
import type { ReactNode } from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
const paddings = {
|
|
none: '',
|
|
sm: 'p-4',
|
|
md: 'p-6',
|
|
lg: 'p-6 lg:p-8',
|
|
} as const;
|
|
|
|
type CardProps = {
|
|
padding?: keyof typeof paddings;
|
|
/** Adds the crimson hover border used on clickable-looking cards. */
|
|
interactive?: boolean;
|
|
className?: string;
|
|
children: ReactNode;
|
|
};
|
|
|
|
export default function Card({
|
|
padding = 'md',
|
|
interactive = false,
|
|
className,
|
|
children,
|
|
}: CardProps) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'border-outline-variant/50 bg-surface-container-low relative rounded-2xl border shadow-sm dark:shadow-lg',
|
|
interactive &&
|
|
'group hover:border-primary/60 transition-all duration-300 hover:shadow-md',
|
|
paddings[padding],
|
|
className,
|
|
)}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|