uup

app/components/ui/Card.tsx

@@ -0,0 +1,118 @@
+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>
+  );
+}