feat: enhance Kanban components with new UI elements

- Added `ColumnHeader`, `EmptyState`, and `DropZone` components to improve the Kanban UI structure and user experience. - Refactored `KanbanColumn` to utilize the new components, enhancing readability and maintainability. - Updated `Card` component to support flexible props for shadow, border, and background, allowing for better customization across the application. - Adjusted `SwimlanesBase` to incorporate the new `ColumnHeader` for consistent column representation.
2025-09-28 22:10:12 +02:00
parent 5a3d825b8e
commit 687d02ff3a
9 changed files with 499 additions and 97 deletions
--- a/src/components/ui/EmptyState.tsx
+++ b/src/components/ui/EmptyState.tsx
@@ -0,0 +1,107 @@
+import { HTMLAttributes, forwardRef } from 'react';
+import { cn } from '@/lib/utils';
+
+interface EmptyStateProps extends HTMLAttributes<HTMLDivElement> {
+  icon?: string;
+  title?: string;
+  description?: string;
+  accentColor?: string;
+  borderColor?: string;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+const EmptyState = forwardRef<HTMLDivElement, EmptyStateProps>(
+  ({ 
+    className, 
+    icon, 
+    title = "NO DATA", 
+    description,
+    accentColor, 
+    borderColor,
+    size = 'md',
+    ...props 
+  }, ref) => {
+    const sizes = {
+      sm: {
+        container: 'py-8',
+        icon: 'w-8 h-8 text-lg',
+        title: 'text-xs',
+        divider: 'w-4 h-0.5'
+      },
+      md: {
+        container: 'py-20',
+        icon: 'w-16 h-16 text-2xl',
+        title: 'text-xs',
+        divider: 'w-8 h-0.5'
+      },
+      lg: {
+        container: 'py-32',
+        icon: 'w-24 h-24 text-3xl',
+        title: 'text-sm',
+        divider: 'w-12 h-0.5'
+      }
+    };
+
+    const currentSize = sizes[size];
+
+    return (
+      <div
+        ref={ref}
+        className={cn("text-center", currentSize.container, className)}
+        {...props}
+      >
+        <div 
+          className={cn(
+            "mx-auto mb-4 rounded-full bg-[var(--card)] border-2 border-dashed flex items-center justify-center",
+            currentSize.icon,
+            borderColor || "border-[var(--border)]"
+          )}
+        >
+          <span 
+            className={cn(
+              "opacity-50",
+              accentColor || "text-[var(--muted-foreground)]"
+            )}
+          >
+            {icon || "📋"}
+          </span>
+        </div>
+        
+        <p 
+          className={cn(
+            "font-mono uppercase tracking-wide",
+            currentSize.title,
+            accentColor || "text-[var(--muted-foreground)]"
+          )}
+        >
+          {title}
+        </p>
+        
+        {description && (
+          <p 
+            className={cn(
+              "mt-2 text-xs text-[var(--muted-foreground)]",
+              accentColor || "text-[var(--muted-foreground)]"
+            )}
+          >
+            {description}
+          </p>
+        )}
+        
+        <div className="mt-2 flex justify-center">
+          <div 
+            className={cn(
+              "opacity-30",
+              currentSize.divider,
+              accentColor ? accentColor.replace('text-', 'bg-') : "bg-[var(--muted-foreground)]"
+            )}
+          />
+        </div>
+      </div>
+    );
+  }
+);
+
+EmptyState.displayName = 'EmptyState';
+
+export { EmptyState };