50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
import React, { ReactNode, MouseEventHandler } from 'react';
|
|
import { Box, BoxProps } from './primitives/Box';
|
|
|
|
export interface CardProps extends Omit<BoxProps<'div'>, 'children' | 'onClick'> {
|
|
children: ReactNode;
|
|
onClick?: MouseEventHandler<HTMLDivElement>;
|
|
variant?: 'default' | 'outline' | 'ghost' | 'muted' | 'dark' | 'glass';
|
|
}
|
|
|
|
export function Card({
|
|
children,
|
|
className = '',
|
|
onClick,
|
|
variant = 'default',
|
|
...props
|
|
}: CardProps) {
|
|
const baseClasses = 'rounded-none transition-all duration-150 ease-smooth';
|
|
|
|
const variantClasses = {
|
|
default: 'bg-panel-gray border border-border-gray shadow-card',
|
|
outline: 'bg-transparent border border-border-gray',
|
|
ghost: 'bg-transparent border-none',
|
|
muted: 'bg-panel-gray/40 border border-border-gray',
|
|
dark: 'bg-graphite-black border border-border-gray',
|
|
glass: 'bg-graphite-black/60 backdrop-blur-md border border-border-gray'
|
|
};
|
|
|
|
const classes = [
|
|
baseClasses,
|
|
variantClasses[variant],
|
|
onClick ? 'cursor-pointer hover:bg-border-gray/30' : '',
|
|
className
|
|
].filter(Boolean).join(' ');
|
|
|
|
// Default padding if none provided
|
|
const hasPadding = props.p !== undefined || props.px !== undefined || props.py !== undefined ||
|
|
props.pt !== undefined || props.pb !== undefined || props.pl !== undefined || props.pr !== undefined;
|
|
|
|
return (
|
|
<Box
|
|
className={classes}
|
|
onClick={onClick}
|
|
p={hasPadding ? undefined : 4}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</Box>
|
|
);
|
|
}
|