website refactor

apps/website/components/shared/state/EmptyState.tsx

@@ -0,0 +1,329 @@
+
+
+import { Button } from '@/ui/Button';
+import { EmptyStateProps } from '@/ui/state-types';
+
+// Illustration components (simple SVG representations)
+const Illustrations = {
+  racing: () => (
+    <svg className="w-20 h-20" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M20 70 L80 70 L85 50 L80 30 L20 30 L15 50 Z" fill="currentColor" opacity="0.2"/>
+      <path d="M30 60 L70 60 L75 50 L70 40 L30 40 L25 50 Z" fill="currentColor" opacity="0.4"/>
+      <circle cx="35" cy="65" r="3" fill="currentColor"/>
+      <circle cx="65" cy="65" r="3" fill="currentColor"/>
+      <path d="M50 30 L50 20 M45 25 L50 20 L55 25" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
+    </svg>
+  ),
+  league: () => (
+    <svg className="w-20 h-20" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="50" cy="35" r="15" fill="currentColor" opacity="0.3"/>
+      <path d="M35 50 L50 45 L65 50 L65 70 L35 70 Z" fill="currentColor" opacity="0.2"/>
+      <path d="M40 55 L50 52 L60 55" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
+      <path d="M40 62 L50 59 L60 62" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
+    </svg>
+  ),
+  team: () => (
+    <svg className="w-20 h-20" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="35" cy="35" r="8" fill="currentColor" opacity="0.3"/>
+      <circle cx="65" cy="35" r="8" fill="currentColor" opacity="0.3"/>
+      <circle cx="50" cy="55" r="10" fill="currentColor" opacity="0.2"/>
+      <path d="M35 45 L35 60 M65 45 L65 60 M50 65 L50 80" stroke="currentColor" strokeWidth="3" strokeLinecap="round"/>
+    </svg>
+  ),
+  sponsor: () => (
+    <svg className="w-20 h-20" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect x="25" y="25" width="50" height="50" rx="8" fill="currentColor" opacity="0.2"/>
+      <path d="M35 50 L45 60 L65 40" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
+      <path d="M50 35 L50 65 M40 50 L60 50" stroke="currentColor" strokeWidth="2" opacity="0.5"/>
+    </svg>
+  ),
+  driver: () => (
+    <svg className="w-20 h-20" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="50" cy="30" r="8" fill="currentColor" opacity="0.3"/>
+      <path d="M42 38 L58 38 L55 55 L45 55 Z" fill="currentColor" opacity="0.2"/>
+      <path d="M45 55 L40 70 M55 55 L60 70" stroke="currentColor" strokeWidth="3" strokeLinecap="round"/>
+      <circle cx="40" cy="72" r="3" fill="currentColor"/>
+      <circle cx="60" cy="72" r="3" fill="currentColor"/>
+    </svg>
+  ),
+} as const;
+
+/**
+ * EmptyState Component
+ * 
+ * Provides consistent empty/placeholder states with 3 variants:
+ * - default: Standard empty state with icon, title, description, and action
+ * - minimal: Simple version without extra styling
+ * - full-page: Full page empty state with centered layout
+ * 
+ * Supports both icons and illustrations for visual appeal.
+ */
+export function EmptyState({
+  icon: Icon,
+  title,
+  description,
+  action,
+  variant = 'default',
+  className = '',
+  illustration,
+  ariaLabel = 'Empty state',
+}: EmptyStateProps) {
+  // Render illustration if provided
+  const IllustrationComponent = illustration ? Illustrations[illustration] : null;
+
+  // Common content
+  const Content = () => (
+    <>
+      {/* Visual - Icon or Illustration */}
+      <div className="flex justify-center mb-4">
+        {IllustrationComponent ? (
+          <div className="text-gray-500">
+            <IllustrationComponent />
+          </div>
+        ) : Icon ? (
+          <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-iron-gray/60 border border-charcoal-outline/50">
+            <Icon className="w-8 h-8 text-gray-500" />
+          </div>
+        ) : null}
+      </div>
+
+      {/* Title */}
+      <h3 className="text-xl font-semibold text-white mb-2 text-center">
+        {title}
+      </h3>
+
+      {/* Description */}
+      {description && (
+        <p className="text-gray-400 mb-6 text-center leading-relaxed">
+          {description}
+        </p>
+      )}
+
+      {/* Action Button */}
+      {action && (
+        <div className="flex justify-center">
+          <Button
+            variant={action.variant || 'primary'}
+            onClick={action.onClick}
+            className="min-w-[140px]"
+          >
+            {action.icon && (
+              <action.icon className="w-4 h-4 mr-2" />
+            )}
+            {action.label}
+          </Button>
+        </div>
+      )}
+    </>
+  );
+
+  // Render different variants
+  switch (variant) {
+    case 'default':
+      return (
+        <div
+          className={`text-center py-12 ${className}`}
+          role="status"
+          aria-label={ariaLabel}
+          aria-live="polite"
+        >
+          <div className="max-w-md mx-auto">
+            <Content />
+          </div>
+        </div>
+      );
+
+    case 'minimal':
+      return (
+        <div
+          className={`text-center py-8 ${className}`}
+          role="status"
+          aria-label={ariaLabel}
+          aria-live="polite"
+        >
+          <div className="max-w-sm mx-auto space-y-3">
+            {/* Minimal icon */}
+            {Icon && (
+              <div className="flex justify-center">
+                <Icon className="w-10 h-10 text-gray-600" />
+              </div>
+            )}
+            <h3 className="text-lg font-medium text-gray-300">
+              {title}
+            </h3>
+            {description && (
+              <p className="text-sm text-gray-500">
+                {description}
+              </p>
+            )}
+            {action && (
+              <button
+                onClick={action.onClick}
+                className="text-sm text-primary-blue hover:text-blue-400 font-medium mt-2 inline-flex items-center gap-1"
+              >
+                {action.label}
+                {action.icon && <action.icon className="w-3 h-3" />}
+              </button>
+            )}
+          </div>
+        </div>
+      );
+
+    case 'full-page':
+      return (
+        <div
+          className={`fixed inset-0 bg-deep-graphite flex items-center justify-center p-6 ${className}`}
+          role="status"
+          aria-label={ariaLabel}
+          aria-live="polite"
+        >
+          <div className="max-w-lg w-full text-center">
+            <div className="mb-6">
+              {IllustrationComponent ? (
+                <div className="text-gray-500 flex justify-center">
+                  <IllustrationComponent />
+                </div>
+              ) : Icon ? (
+                <div className="flex justify-center">
+                  <div className="flex h-20 w-20 items-center justify-center rounded-3xl bg-iron-gray/60 border border-charcoal-outline/50">
+                    <Icon className="w-10 h-10 text-gray-500" />
+                  </div>
+                </div>
+              ) : null}
+            </div>
+            
+            <h2 className="text-3xl font-bold text-white mb-4">
+              {title}
+            </h2>
+            
+            {description && (
+              <p className="text-gray-400 text-lg mb-8 leading-relaxed">
+                {description}
+              </p>
+            )}
+
+            {action && (
+              <div className="flex flex-col sm:flex-row gap-3 justify-center">
+                <Button
+                  variant={action.variant || 'primary'}
+                  onClick={action.onClick}
+                  className="min-w-[160px]"
+                >
+                  {action.icon && (
+                    <action.icon className="w-4 h-4 mr-2" />
+                  )}
+                  {action.label}
+                </Button>
+              </div>
+            )}
+
+            {/* Additional helper text for full-page variant */}
+            <div className="mt-8 text-sm text-gray-500">
+              Need help? Contact us at{' '}
+              <a 
+                href="mailto:support@gridpilot.com" 
+                className="text-primary-blue hover:underline"
+              >
+                support@gridpilot.com
+              </a>
+            </div>
+          </div>
+        </div>
+      );
+
+    default:
+      return null;
+  }
+}
+
+/**
+ * Convenience component for default empty state
+ */
+export function DefaultEmptyState({ icon, title, description, action, className, illustration }: EmptyStateProps) {
+  return (
+    <EmptyState
+      icon={icon}
+      title={title}
+      description={description}
+      action={action}
+      variant="default"
+      className={className}
+      illustration={illustration}
+    />
+  );
+}
+
+/**
+ * Convenience component for minimal empty state
+ */
+export function MinimalEmptyState({ icon, title, description, action, className }: Omit<EmptyStateProps, 'variant'>) {
+  return (
+    <EmptyState
+      icon={icon}
+      title={title}
+      description={description}
+      action={action}
+      variant="minimal"
+      className={className}
+    />
+  );
+}
+
+/**
+ * Convenience component for full-page empty state
+ */
+export function FullPageEmptyState({ icon, title, description, action, className, illustration }: EmptyStateProps) {
+  return (
+    <EmptyState
+      icon={icon}
+      title={title}
+      description={description}
+      action={action}
+      variant="full-page"
+      className={className}
+      illustration={illustration}
+    />
+  );
+}
+
+/**
+ * Pre-configured empty states for common scenarios
+ */
+
+import { Activity, Lock, Search } from 'lucide-react';
+
+export function NoDataEmptyState({ onRetry }: { onRetry?: () => void }) {
+  return (
+    <EmptyState
+      icon={Activity}
+      title="No data available"
+      description="There is nothing to display here at the moment"
+      action={onRetry ? { label: 'Refresh', onClick: onRetry } : undefined}
+      variant="default"
+    />
+  );
+}
+
+export function NoResultsEmptyState({ onRetry }: { onRetry?: () => void }) {
+  return (
+    <EmptyState
+      icon={Search}
+      title="No results found"
+      description="Try adjusting your search or filters"
+      action={onRetry ? { label: 'Clear Filters', onClick: onRetry } : undefined}
+      variant="default"
+    />
+  );
+}
+
+export function NoAccessEmptyState({ onBack }: { onBack?: () => void }) {
+  return (
+    <EmptyState
+      icon={Lock}
+      title="Access denied"
+      description="You don't have permission to view this content"
+      action={onBack ? { label: 'Go Back', onClick: onBack } : undefined}
+      variant="full-page"
+    />
+  );
+}