85 lines
1.7 KiB
TypeScript
85 lines
1.7 KiB
TypeScript
import React from 'react';
|
|
import { cn } from '@/utils/helpers';
|
|
|
|
interface CardProps {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
padding?: 'none' | 'sm' | 'md' | 'lg';
|
|
hover?: boolean;
|
|
}
|
|
|
|
export const Card: React.FC<CardProps> = ({
|
|
children,
|
|
className,
|
|
padding = 'md',
|
|
hover = false,
|
|
}) => {
|
|
const paddingClasses = {
|
|
none: '',
|
|
sm: 'p-3',
|
|
md: 'p-6',
|
|
lg: 'p-8',
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'bg-white rounded-lg shadow-md border border-gray-200',
|
|
paddingClasses[padding],
|
|
hover && 'transition-shadow hover:shadow-lg',
|
|
className
|
|
)}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
interface CardHeaderProps {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export const CardHeader: React.FC<CardHeaderProps> = ({ children, className }) => {
|
|
return (
|
|
<div className={cn('mb-4', className)}>
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
interface CardTitleProps {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export const CardTitle: React.FC<CardTitleProps> = ({ children, className }) => {
|
|
return (
|
|
<h3 className={cn('text-xl font-semibold text-gray-900', className)}>
|
|
{children}
|
|
</h3>
|
|
);
|
|
};
|
|
|
|
interface CardContentProps {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export const CardContent: React.FC<CardContentProps> = ({ children, className }) => {
|
|
return <div className={cn('text-gray-700', className)}>{children}</div>;
|
|
};
|
|
|
|
interface CardFooterProps {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export const CardFooter: React.FC<CardFooterProps> = ({ children, className }) => {
|
|
return (
|
|
<div className={cn('mt-4 pt-4 border-t border-gray-200', className)}>
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|