extract components from website

apps/website/components/shared/EmptyState.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { LucideIcon } from 'lucide-react';
+import Button from '@/components/ui/Button';
+
+interface EmptyStateProps {
+  icon: LucideIcon;
+  title: string;
+  description?: string;
+  action?: {
+    label: string;
+    onClick: () => void;
+  };
+  className?: string;
+}
+
+export const EmptyState = ({
+  icon: Icon,
+  title,
+  description,
+  action,
+  className = ''
+}: EmptyStateProps) => (
+  <div className={`text-center py-12 ${className}`}>
+    <div className="max-w-md mx-auto">
+      <div className="flex h-16 w-16 mx-auto items-center justify-center rounded-2xl bg-iron-gray/60 border border-charcoal-outline/50 mb-6">
+        <Icon className="w-8 h-8 text-gray-500" />
+      </div>
+      <h3 className="text-xl font-semibold text-white mb-3">{title}</h3>
+      {description && (
+        <p className="text-gray-400 mb-8">{description}</p>
+      )}
+      {action && (
+        <Button variant="primary" onClick={action.onClick} className="mx-auto">
+          {action.label}
+        </Button>
+      )}
+    </div>
+  </div>
+);

apps/website/components/shared/HeroSection.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import { LucideIcon } from 'lucide-react';
+import Heading from '@/components/ui/Heading';
+import Button from '@/components/ui/Button';
+
+interface HeroSectionProps {
+  title: string;
+  description?: string;
+  icon?: LucideIcon;
+  backgroundPattern?: React.ReactNode;
+  stats?: Array<{
+    icon: LucideIcon;
+    value: string | number;
+    label: string;
+  }>;
+  actions?: Array<{
+    label: string;
+    onClick: () => void;
+    variant?: 'primary' | 'secondary';
+  }>;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export const HeroSection = ({
+  title,
+  description,
+  icon: Icon,
+  backgroundPattern,
+  stats,
+  actions,
+  children,
+  className = ''
+}: HeroSectionProps) => (
+  <section className={`relative overflow-hidden ${className}`}>
+    {/* Background Pattern */}
+    {backgroundPattern && (
+      <div className="absolute inset-0">
+        {backgroundPattern}
+      </div>
+    )}
+
+    <div className="relative max-w-7xl mx-auto px-6 py-10">
+      <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-8">
+        {/* Main Content */}
+        <div className="max-w-2xl">
+          {Icon && (
+            <div className="flex items-center gap-3 mb-4">
+              <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-primary-blue/20 to-primary-blue/5 border border-primary-blue/20">
+                <Icon className="w-6 h-6 text-primary-blue" />
+              </div>
+              <Heading level={1} className="text-3xl lg:text-4xl">
+                {title}
+              </Heading>
+            </div>
+          )}
+          {!Icon && (
+            <Heading level={1} className="text-3xl lg:text-4xl mb-4">
+              {title}
+            </Heading>
+          )}
+          {description && (
+            <p className="text-gray-400 text-lg leading-relaxed">
+              {description}
+            </p>
+          )}
+
+          {/* Stats */}
+          {stats && stats.length > 0 && (
+            <div className="flex flex-wrap gap-6 mt-6">
+              {stats.map((stat, index) => (
+                <div key={index} className="flex items-center gap-2">
+                  <div className="w-2 h-2 rounded-full bg-primary-blue animate-pulse" />
+                  <span className="text-sm text-gray-400">
+                    <span className="text-white font-semibold">{stat.value}</span> {stat.label}
+                  </span>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Actions or Custom Content */}
+        {actions && actions.length > 0 && (
+          <div className="flex flex-col gap-4">
+            {actions.map((action, index) => (
+              <Button
+                key={index}
+                variant={action.variant || 'primary'}
+                onClick={action.onClick}
+                className="flex items-center gap-2 px-6 py-3"
+              >
+                {action.label}
+              </Button>
+            ))}
+          </div>
+        )}
+
+        {children}
+      </div>
+    </div>
+  </section>
+);

apps/website/components/shared/LoadingState.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+interface LoadingStateProps {
+  message?: string;
+  className?: string;
+}
+
+export const LoadingState = ({ message = 'Loading...', className = '' }: LoadingStateProps) => (
+  <div className={`flex items-center justify-center min-h-[200px] ${className}`}>
+    <div className="flex flex-col items-center gap-4">
+      <div className="w-10 h-10 border-2 border-primary-blue border-t-transparent rounded-full animate-spin" />
+      <p className="text-gray-400">{message}</p>
+    </div>
+  </div>
+);

apps/website/components/shared/StatusBadge.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { LucideIcon } from 'lucide-react';
+
+interface StatusBadgeProps {
+  status: string;
+  config?: {
+    icon: LucideIcon;
+    color: string;
+    bg: string;
+    border: string;
+    label: string;
+  };
+  className?: string;
+}
+
+export const StatusBadge = ({ status, config, className = '' }: StatusBadgeProps) => {
+  const defaultConfig = {
+    scheduled: {
+      icon: () => null,
+      color: 'text-primary-blue',
+      bg: 'bg-primary-blue/10',
+      border: 'border-primary-blue/30',
+      label: 'Scheduled',
+    },
+    running: {
+      icon: () => null,
+      color: 'text-performance-green',
+      bg: 'bg-performance-green/10',
+      border: 'border-performance-green/30',
+      label: 'LIVE',
+    },
+    completed: {
+      icon: () => null,
+      color: 'text-gray-400',
+      bg: 'bg-gray-500/10',
+      border: 'border-gray-500/30',
+      label: 'Completed',
+    },
+    cancelled: {
+      icon: () => null,
+      color: 'text-warning-amber',
+      bg: 'bg-warning-amber/10',
+      border: 'border-warning-amber/30',
+      label: 'Cancelled',
+    },
+  };
+
+  const badgeConfig = config || defaultConfig[status as keyof typeof defaultConfig] || {
+    icon: () => null,
+    color: 'text-gray-400',
+    bg: 'bg-gray-500/10',
+    border: 'border-gray-500/30',
+    label: status,
+  };
+
+  const Icon = badgeConfig.icon;
+
+  return (
+    <div className={`flex items-center gap-1.5 px-2.5 py-1 rounded-full ${badgeConfig.bg} ${badgeConfig.border} border ${className}`}>
+      {Icon && <Icon className={`w-3.5 h-3.5 ${badgeConfig.color}`} />}
+      <span className={`text-xs font-medium ${badgeConfig.color}`}>
+        {badgeConfig.label}
+      </span>
+    </div>
+  );
+};