47 lines
956 B
TypeScript
47 lines
956 B
TypeScript
/**
|
|
* Card Component
|
|
* Container component for content
|
|
*/
|
|
|
|
import React, { HTMLAttributes, ReactNode } from 'react';
|
|
|
|
export interface CardProps extends HTMLAttributes<HTMLDivElement> {
|
|
variant?: 'default' | 'elevated' | 'outlined';
|
|
padding?: 'none' | 'sm' | 'md' | 'lg';
|
|
children: ReactNode;
|
|
}
|
|
|
|
export const Card: React.FC<CardProps> = ({
|
|
variant = 'default',
|
|
padding = 'md',
|
|
children,
|
|
className = '',
|
|
...props
|
|
}) => {
|
|
const variantStyles = {
|
|
default: 'bg-gray-900 border border-gray-800',
|
|
elevated: 'bg-gray-900 shadow-xl',
|
|
outlined: 'bg-transparent border-2 border-gray-700',
|
|
};
|
|
|
|
const paddingStyles = {
|
|
none: '',
|
|
sm: 'p-3',
|
|
md: 'p-4',
|
|
lg: 'p-6',
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={`
|
|
rounded-lg transition-all duration-200
|
|
${variantStyles[variant]}
|
|
${paddingStyles[padding]}
|
|
${className}
|
|
`}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|