website refactor

apps/website/components/shared/ux/Toast.tsx

@@ -1,10 +1,9 @@
 'use client';
 
-import { IconButton } from '@/ui/IconButton';
-import { Stack } from '@/ui/primitives/Stack';
+import { Toast as UIToast } from '@/ui/Toast';
 import { Text } from '@/ui/Text';
-import { AnimatePresence, motion } from 'framer-motion';
-import { AlertCircle, CheckCircle, Info, X } from 'lucide-react';
+import { Icon } from '@/ui/Icon';
+import { AlertCircle, CheckCircle, Info } from 'lucide-react';
 import React, { createContext, useContext, useState } from 'react';
 
 interface Toast {
@@ -33,23 +32,16 @@ export function ToastProvider({ children }: { children: React.ReactNode }) {
   return (
     <ToastContext.Provider value={{ showToast }}>
       {children}
-      <Stack
-        position="fixed"
-        bottom={6}
-        right={6}
-        zIndex={50}
-        className="pointer-events-none space-y-3"
-      >
-        <AnimatePresence>
-          {toasts.map((toast) => (
+      <div style={{ position: 'fixed', bottom: '1.5rem', right: '1.5rem', zIndex: 100, display: 'flex', flexDirection: 'column', gap: '0.75rem', pointerEvents: 'none' }}>
+        {toasts.map((toast) => (
+          <div key={toast.id} style={{ pointerEvents: 'auto' }}>
             <ToastItem
-              key={toast.id}
               toast={toast}
               onClose={() => setToasts((prev) => prev.filter((t) => t.id !== toast.id))}
             />
-          ))}
-        </AnimatePresence>
-      </Stack>
+          </div>
+        ))}
+      </div>
     </ToastContext.Provider>
   );
 }
@@ -65,60 +57,32 @@ export function useToast() {
 function ToastItem({ toast, onClose }: { toast: Toast; onClose: () => void }) {
   const variants = {
     success: {
-      bg: 'bg-deep-graphite',
-      border: 'border-performance-green/30',
+      intent: 'success' as const,
       icon: CheckCircle,
-      iconColor: 'text-performance-green',
     },
     error: {
-      bg: 'bg-deep-graphite',
-      border: 'border-racing-red/30',
+      intent: 'critical' as const,
       icon: AlertCircle,
-      iconColor: 'text-racing-red',
     },
     info: {
-      bg: 'bg-deep-graphite',
-      border: 'border-primary-blue/30',
+      intent: 'primary' as const,
       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"
+    <UIToast
+      onClose={onClose}
+      intent={config.intent}
+      icon={<Icon icon={config.icon} size={5} intent={config.intent} />}
+      isVisible={true}
+      isExiting={false}
     >
-      <Stack
-        px={4}
-        py={3}
-        rounded="lg"
-        bg={config.bg}
-        border
-        borderColor={config.border}
-        shadow="xl"
-        direction="row"
-        align="center"
-        gap={3}
-        {...({ minWidth: "300px" } as any)}
-      >
-        <Icon className={`w-5 h-5 ${config.iconColor}`} />
-        <Text size="sm" color="text-white" flexGrow={1}>
-          {toast.message}
-        </Text>
-        <IconButton
-          icon={X}
-          onClick={onClose}
-          variant="ghost"
-          size="sm"
-          className="text-gray-500 hover:text-white transition-colors"
-        />
-      </Stack>
-    </motion.div>
+      <Text size="sm" variant="high">
+        {toast.message}
+      </Text>
+    </UIToast>
   );
 }