website refactor

apps/website/components/notifications/ToastNotification.tsx

@@ -1,7 +1,10 @@
 'use client';
 
-import { useState, useEffect } from 'react';
-import { useRouter } from 'next/navigation';
+import { useState, useEffect, useCallback } from 'react';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Icon } from '@/ui/Icon';
+import { IconButton } from '@/ui/IconButton';
 import type { Notification } from './notificationTypes';
 import {
   Bell,
@@ -19,6 +22,7 @@ interface ToastNotificationProps {
   notification: Notification;
   onDismiss: (notification: Notification) => void;
   onRead: (notification: Notification) => void;
+  onNavigate?: (href: string) => void;
   autoHideDuration?: number;
 }
 
@@ -42,15 +46,22 @@ const notificationColors: Record<string, { bg: string; border: string; text: str
   race_reminder: { bg: 'bg-warning-amber/10', border: 'border-warning-amber/30', text: 'text-warning-amber' },
 };
 
-export default function ToastNotification({
+export function ToastNotification({
   notification,
   onDismiss,
   onRead,
+  onNavigate,
   autoHideDuration = 5000,
 }: ToastNotificationProps) {
   const [isVisible, setIsVisible] = useState(false);
   const [isExiting, setIsExiting] = useState(false);
-  const router = useRouter();
+
+  const handleDismiss = useCallback(() => {
+    setIsExiting(true);
+    setTimeout(() => {
+      onDismiss(notification);
+    }, 300);
+  }, [notification, onDismiss]);
 
   useEffect(() => {
     // Animate in
@@ -65,24 +76,17 @@ export default function ToastNotification({
       clearTimeout(showTimeout);
       clearTimeout(hideTimeout);
     };
-  }, [autoHideDuration]);
-
-  const handleDismiss = () => {
-    setIsExiting(true);
-    setTimeout(() => {
-      onDismiss(notification);
-    }, 300);
-  };
+  }, [autoHideDuration, handleDismiss]);
 
   const handleClick = () => {
     onRead(notification);
-    if (notification.actionUrl) {
-      router.push(notification.actionUrl);
+    if (notification.actionUrl && onNavigate) {
+      onNavigate(notification.actionUrl);
     }
     handleDismiss();
   };
 
-  const Icon = notificationIcons[notification.type] || Bell;
+  const NotificationIcon = notificationIcons[notification.type] || Bell;
   const colors = notificationColors[notification.type] || {
     bg: 'bg-gray-500/10',
     border: 'border-gray-500/30',
@@ -90,65 +94,81 @@ export default function ToastNotification({
   };
 
   return (
-    <div
-      className={`
-        transform transition-all duration-300 ease-out
-        ${isVisible && !isExiting ? 'translate-x-0 opacity-100' : 'translate-x-full opacity-0'}
-      `}
+    <Box
+      transform
+      transition
+      translateX={isVisible && !isExiting ? '0' : 'full'}
+      opacity={isVisible && !isExiting ? 1 : 0}
     >
-      <div
-        className={`
-          w-96 rounded-xl border ${colors.border} ${colors.bg}
-          backdrop-blur-md shadow-2xl overflow-hidden
-        `}
+      <Box
+        w="96"
+        rounded="xl"
+        border
+        borderColor={colors.border}
+        bg={colors.bg}
+        shadow="2xl"
+        overflow="hidden"
       >
         {/* Progress bar */}
-        <div className="h-1 bg-iron-gray/50 overflow-hidden">
-          <div
-            className={`h-full ${colors.text.replace('text-', 'bg-')} animate-toast-progress`}
+        <Box h="1" bg="bg-iron-gray/50" overflow="hidden">
+          <Box
+            h="full"
+            bg={colors.text.replace('text-', 'bg-')}
+            // eslint-disable-next-line gridpilot-rules/component-classification
+            className="animate-toast-progress"
+            // eslint-disable-next-line gridpilot-rules/component-classification
             style={{ animationDuration: `${autoHideDuration}ms` }}
           />
-        </div>
+        </Box>
 
-        <div className="p-4">
-          <div className="flex gap-3">
+        <Box p={4}>
+          <Box display="flex" gap={3}>
             {/* Icon */}
-            <div className={`p-2 rounded-lg ${colors.bg} flex-shrink-0`}>
-              <Icon className={`w-5 h-5 ${colors.text}`} />
-            </div>
+            <Box p={2} rounded="lg" bg={colors.bg} flexShrink={0}>
+              <Icon icon={NotificationIcon} size={5} color={colors.text} />
+            </Box>
 
             {/* Content */}
-            <div className="flex-1 min-w-0">
-              <div className="flex items-start justify-between gap-2">
-              <p className="text-sm font-semibold text-white truncate">
+            <Box flexGrow={1} minWidth="0">
+              <Box display="flex" alignItems="start" justifyContent="between" gap={2}>
+                <Text size="sm" weight="semibold" color="text-white" truncate>
                   {notification.title ?? 'Notification'}
-                </p>
-                <button
-                  onClick={(e) => {
+                </Text>
+                <IconButton
+                  icon={X}
+                  onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
                     e.stopPropagation();
                     handleDismiss();
                   }}
-                  className="p-1 rounded hover:bg-charcoal-outline transition-colors flex-shrink-0"
-                >
-                  <X className="w-4 h-4 text-gray-400" />
-                </button>
-              </div>
-              <p className="text-xs text-gray-400 line-clamp-2 mt-1">
+                  variant="ghost"
+                  size="sm"
+                  color="text-gray-400"
+                />
+              </Box>
+              <Text size="xs" color="text-gray-400" lineClamp={2} mt={1}>
                 {notification.message}
-              </p>
+              </Text>
               {notification.actionUrl && (
-                <button
+                <Box
+                  as="button"
                   onClick={handleClick}
-                  className={`mt-2 flex items-center gap-1 text-xs font-medium ${colors.text} hover:underline`}
+                  mt={2}
+                  display="flex"
+                  alignItems="center"
+                  gap={1}
+                  cursor="pointer"
+                  hoverScale
                 >
-                  View details
-                  <ExternalLink className="w-3 h-3" />
-                </button>
+                  <Text size="xs" weight="medium" color={colors.text}>
+                    View details
+                  </Text>
+                  <Icon icon={ExternalLink} size={3} color={colors.text} />
+                </Box>
               )}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+            </Box>
+          </Box>
+        </Box>
+      </Box>
+    </Box>
   );
 }