website refactor

apps/website/components/notifications/NotificationProvider.tsx

@@ -3,8 +3,11 @@
 import { createContext, ReactNode, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { v4 as uuid } from 'uuid';
 
-import ModalNotification from './ModalNotification';
-import ToastNotification from './ToastNotification';
+import { ModalNotification } from './ModalNotification';
+import { ToastNotification } from './ToastNotification';
+
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
 
 import type { Notification, NotificationAction, NotificationVariant } from './notificationTypes';
 
@@ -45,7 +48,7 @@ interface NotificationProviderProps {
   children: ReactNode;
 }
 
-export default function NotificationProvider({ children }: NotificationProviderProps) {
+export function NotificationProvider({ children }: NotificationProviderProps) {
   const [notifications, setNotifications] = useState<Notification[]>([]);
 
   const addNotification = useCallback((input: AddNotificationInput): string => {
@@ -133,29 +136,31 @@ export default function NotificationProvider({ children }: NotificationProviderP
       {children}
 
       {/* Toast notifications container */}
-      <div className="fixed top-20 right-4 z-50 space-y-3">
-        {toastNotifications.map((notification) => (
-          <ToastNotification
-            key={notification.id}
-            notification={notification}
-            onDismiss={() => dismissNotification(notification.id)}
-            onRead={() => markAsRead(notification.id)}
-          />
-        ))}
-      </div>
+      <Box position="fixed" top="20" right="4" zIndex={50}>
+        <Stack gap={3}>
+          {toastNotifications.map((notification) => (
+            <ToastNotification
+              key={notification.id}
+              notification={notification}
+              onDismiss={() => dismissNotification(notification.id)}
+              onRead={() => markAsRead(notification.id)}
+            />
+          ))}
+        </Stack>
+      </Box>
 
       {/* Modal notification */}
       {modalNotification && (
         <ModalNotification
           notification={modalNotification}
-          onAction={(notification, actionId) => {
+          onAction={(notification: Notification, actionId?: string) => {
             // For now we just mark as read and optionally navigate via ModalNotification
             markAsRead(notification.id);
             if (actionId === 'dismiss') {
               dismissNotification(notification.id);
             }
           }}
-          onDismiss={(notification) => {
+          onDismiss={(notification: Notification) => {
             markAsRead(notification.id);
             dismissNotification(notification.id);
           }}