147 lines
3.5 KiB
TypeScript
147 lines
3.5 KiB
TypeScript
import React from 'react';
|
|
|
|
export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
variant?: 'default' | 'elevated' | 'glass' | 'outline' | 'interactive';
|
|
padding?: 'none' | 'sm' | 'md' | 'lg';
|
|
}
|
|
|
|
const variantStyles: Record<NonNullable<CardProps['variant']>, string> = {
|
|
default:
|
|
'bg-white dark:bg-slate-900/90 border border-slate-200 dark:border-slate-800/80 shadow-sm',
|
|
elevated:
|
|
'bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 shadow-xl shadow-slate-200/50 dark:shadow-black/40',
|
|
glass:
|
|
'bg-white/80 dark:bg-slate-900/60 backdrop-blur-xl border border-slate-200/70 dark:border-slate-800/70 shadow-lg',
|
|
outline:
|
|
'bg-transparent border border-slate-300 dark:border-slate-800 shadow-none',
|
|
interactive:
|
|
'bg-white dark:bg-slate-900/90 border border-slate-200 dark:border-slate-800 shadow-sm hover:shadow-xl hover:shadow-cyan-500/10 hover:border-cyan-500/50 dark:hover:border-cyan-500/40 cursor-pointer transform hover:-translate-y-1 transition-all duration-300 ease-out',
|
|
};
|
|
|
|
const paddingStyles: Record<NonNullable<CardProps['padding']>, string> = {
|
|
none: 'p-0',
|
|
sm: 'p-4',
|
|
md: 'p-6',
|
|
lg: 'p-8',
|
|
};
|
|
|
|
export const Card = React.forwardRef<HTMLDivElement, CardProps>(
|
|
(
|
|
{
|
|
variant = 'default',
|
|
padding = 'none',
|
|
className = '',
|
|
children,
|
|
...props
|
|
},
|
|
ref
|
|
) => {
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className={`
|
|
rounded-2xl overflow-hidden transition-colors
|
|
${variantStyles[variant]}
|
|
${paddingStyles[padding]}
|
|
${className}
|
|
`}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
);
|
|
|
|
Card.displayName = 'Card';
|
|
|
|
export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
bordered?: boolean;
|
|
}
|
|
|
|
export const CardHeader: React.FC<CardHeaderProps> = ({
|
|
bordered = false,
|
|
className = '',
|
|
children,
|
|
...props
|
|
}) => {
|
|
return (
|
|
<div
|
|
className={`
|
|
p-5 sm:p-6 flex flex-col space-y-1.5
|
|
${bordered ? 'border-b border-slate-100 dark:border-slate-800/80' : ''}
|
|
${className}
|
|
`}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const CardTitle: React.FC<React.HTMLAttributes<HTMLHeadingElement>> = ({
|
|
className = '',
|
|
children,
|
|
...props
|
|
}) => {
|
|
return (
|
|
<h3
|
|
className={`text-lg sm:text-xl font-bold tracking-tight text-slate-900 dark:text-white transition-colors ${className}`}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</h3>
|
|
);
|
|
};
|
|
|
|
export const CardDescription: React.FC<React.HTMLAttributes<HTMLParagraphElement>> = ({
|
|
className = '',
|
|
children,
|
|
...props
|
|
}) => {
|
|
return (
|
|
<p
|
|
className={`text-xs sm:text-sm text-slate-500 dark:text-slate-400 leading-relaxed ${className}`}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</p>
|
|
);
|
|
};
|
|
|
|
export const CardContent: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
|
|
className = '',
|
|
children,
|
|
...props
|
|
}) => {
|
|
return (
|
|
<div className={`p-5 sm:p-6 ${className}`} {...props}>
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
bordered?: boolean;
|
|
}
|
|
|
|
export const CardFooter: React.FC<CardFooterProps> = ({
|
|
bordered = false,
|
|
className = '',
|
|
children,
|
|
...props
|
|
}) => {
|
|
return (
|
|
<div
|
|
className={`
|
|
p-5 sm:p-6 flex items-center justify-between
|
|
${bordered ? 'border-t border-slate-100 dark:border-slate-800/80' : ''}
|
|
${className}
|
|
`}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|