118 lines
2.6 KiB
TypeScript
118 lines
2.6 KiB
TypeScript
import { ReactNode } from 'react';
|
|
import { defaultLayoutConfig, type LayoutConfig } from '~/lib/layout-utils';
|
|
|
|
interface CardProps {
|
|
children: ReactNode;
|
|
className?: string;
|
|
config?: Partial<LayoutConfig>;
|
|
padding?: 'none' | 'sm' | 'md' | 'lg';
|
|
shadow?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
|
|
rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
|
|
border?: boolean;
|
|
hover?: boolean;
|
|
}
|
|
|
|
export function Card({
|
|
children,
|
|
className = '',
|
|
config = {},
|
|
padding = 'md',
|
|
shadow = 'md',
|
|
rounded = 'lg',
|
|
border = true,
|
|
hover = false
|
|
}: CardProps) {
|
|
const layoutConfig = { ...defaultLayoutConfig, ...config };
|
|
|
|
const paddingClasses = {
|
|
none: '',
|
|
sm: 'p-3',
|
|
md: 'p-4 sm:p-6',
|
|
lg: 'p-6 sm:p-8',
|
|
};
|
|
|
|
const shadowClasses = {
|
|
none: '',
|
|
sm: 'shadow-sm',
|
|
md: 'shadow-md',
|
|
lg: 'shadow-lg',
|
|
xl: 'shadow-xl',
|
|
};
|
|
|
|
const roundedClasses = {
|
|
none: '',
|
|
sm: 'rounded-sm',
|
|
md: 'rounded-md',
|
|
lg: 'rounded-lg',
|
|
xl: 'rounded-xl',
|
|
};
|
|
|
|
const borderClass = border ? 'border border-gray-200' : '';
|
|
const hoverClass = hover ? 'hover:shadow-lg transition-shadow duration-200' : '';
|
|
|
|
return (
|
|
<div
|
|
className={`bg-white ${paddingClasses[padding]} ${shadowClasses[shadow]} ${roundedClasses[rounded]} ${borderClass} ${hoverClass} ${className}`}
|
|
dir={layoutConfig.direction}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface CardHeaderProps {
|
|
children: ReactNode;
|
|
className?: string;
|
|
config?: Partial<LayoutConfig>;
|
|
}
|
|
|
|
export function CardHeader({ children, className = '', config = {} }: CardHeaderProps) {
|
|
const layoutConfig = { ...defaultLayoutConfig, ...config };
|
|
|
|
return (
|
|
<div
|
|
className={`border-b border-gray-200 pb-4 mb-4 ${className}`}
|
|
dir={layoutConfig.direction}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface CardBodyProps {
|
|
children: ReactNode;
|
|
className?: string;
|
|
config?: Partial<LayoutConfig>;
|
|
}
|
|
|
|
export function CardBody({ children, className = '', config = {} }: CardBodyProps) {
|
|
const layoutConfig = { ...defaultLayoutConfig, ...config };
|
|
|
|
return (
|
|
<div
|
|
className={className}
|
|
dir={layoutConfig.direction}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface CardFooterProps {
|
|
children: ReactNode;
|
|
className?: string;
|
|
config?: Partial<LayoutConfig>;
|
|
}
|
|
|
|
export function CardFooter({ children, className = '', config = {} }: CardFooterProps) {
|
|
const layoutConfig = { ...defaultLayoutConfig, ...config };
|
|
|
|
return (
|
|
<div
|
|
className={`border-t border-gray-200 pt-4 mt-4 ${className}`}
|
|
dir={layoutConfig.direction}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
} |