website refactor

2026-01-17 15:46:55 +01:00
parent 4d5ce9bfd6
commit 72a626ce71
346 changed files with 19308 additions and 8605 deletions
--- a/apps/website/components/shared/ux/Toast.tsx
+++ b/apps/website/components/shared/ux/Toast.tsx
@@ -0,0 +1,123 @@
+'use client';
+
+import React, { useState, useEffect, createContext, useContext } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
+import { CheckCircle, AlertCircle, Info, X } from 'lucide-react';
+
+interface Toast {
+  id: string;
+  message: string;
+  variant: 'success' | 'error' | 'info';
+}
+
+interface ToastContextType {
+  showToast: (message: string, variant: 'success' | 'error' | 'info') => void;
+}
+
+const ToastContext = createContext<ToastContextType | undefined>(undefined);
+
+export function ToastProvider({ children }: { children: React.ReactNode }) {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  const showToast = (message: string, variant: 'success' | 'error' | 'info') => {
+    const id = Math.random().toString(36).substring(2, 9);
+    setToasts((prev) => [...prev, { id, message, variant }]);
+    setTimeout(() => {
+      setToasts((prev) => prev.filter((t) => t.id !== id));
+    }, 5000);
+  };
+
+  return (
+    <ToastContext.Provider value={{ showToast }}>
+      {children}
+      <Box
+        position="fixed"
+        bottom={6}
+        right={6}
+        zIndex={50}
+        className="pointer-events-none space-y-3"
+      >
+        <AnimatePresence>
+          {toasts.map((toast) => (
+            <ToastItem
+              key={toast.id}
+              toast={toast}
+              onClose={() => setToasts((prev) => prev.filter((t) => t.id !== toast.id))}
+            />
+          ))}
+        </AnimatePresence>
+      </Box>
+    </ToastContext.Provider>
+  );
+}
+
+export function useToast() {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error('useToast must be used within a ToastProvider');
+  }
+  return context;
+}
+
+function ToastItem({ toast, onClose }: { toast: Toast; onClose: () => void }) {
+  const variants = {
+    success: {
+      bg: 'bg-deep-graphite',
+      border: 'border-performance-green/30',
+      icon: CheckCircle,
+      iconColor: 'text-performance-green',
+    },
+    error: {
+      bg: 'bg-deep-graphite',
+      border: 'border-racing-red/30',
+      icon: AlertCircle,
+      iconColor: 'text-racing-red',
+    },
+    info: {
+      bg: 'bg-deep-graphite',
+      border: 'border-primary-blue/30',
+      icon: Info,
+      iconColor: 'text-primary-blue',
+    },
+  };
+
+  const config = variants[toast.variant];
+  const Icon = config.icon;
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20, scale: 0.95 }}
+      animate={{ opacity: 1, y: 0, scale: 1 }}
+      exit={{ opacity: 0, scale: 0.95 }}
+      className="pointer-events-auto"
+    >
+      <Box
+        px={4}
+        py={3}
+        rounded="lg"
+        bg={config.bg}
+        border
+        borderColor={config.border}
+        shadow="xl"
+        display="flex"
+        alignItems="center"
+        gap={3}
+        minW="300px"
+      >
+        <Icon className={`w-5 h-5 ${config.iconColor}`} />
+        <Text size="sm" color="text-white" flexGrow={1}>
+          {toast.message}
+        </Text>
+        <button
+          onClick={onClose}
+          className="text-gray-500 hover:text-white transition-colors"
+        >
+          <X className="w-4 h-4" />
+        </button>
+      </Box>
+    </motion.div>
+  );
+}