36 lines
750 B
TypeScript
36 lines
750 B
TypeScript
import React from 'react';
|
|
|
|
export interface CardProps {
|
|
title?: string;
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
padding?: 'none' | 'sm' | 'md' | 'lg';
|
|
}
|
|
|
|
export const Card: React.FC<CardProps> = ({
|
|
title,
|
|
children,
|
|
className = '',
|
|
padding = 'md'
|
|
}) => {
|
|
const paddingClasses = {
|
|
none: '',
|
|
sm: 'p-4',
|
|
md: 'p-6',
|
|
lg: 'p-8'
|
|
};
|
|
|
|
return (
|
|
<div className={`bg-white rounded-lg border border-gray-200 shadow-sm ${className}`}>
|
|
{title && (
|
|
<div className="px-6 py-4 border-b border-gray-200">
|
|
<h3 className="text-lg font-semibold text-gray-900">{title}</h3>
|
|
</div>
|
|
)}
|
|
<div className={paddingClasses[padding]}>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|