website refactor

apps/website/ui/Modal.tsx

@@ -1,17 +1,19 @@
-'use client';
+
 
 import React, {
-  type ReactNode,
-  type KeyboardEvent as ReactKeyboardEvent,
+    type KeyboardEvent as ReactKeyboardEvent,
+    type ReactNode,
 } from 'react';
 import { Box } from './Box';
-import { Text } from './Text';
-import { Heading } from './Heading';
 import { Button } from './Button';
+import { Heading } from './Heading';
+import { Stack } from './Stack';
+import { Text } from './Text';
 
 interface ModalProps {
   title: string;
   description?: string;
+  icon?: ReactNode;
   children?: ReactNode;
   primaryActionLabel?: string;
   secondaryActionLabel?: string;
@@ -19,11 +21,13 @@ interface ModalProps {
   onSecondaryAction?: () => void;
   onOpenChange?: (open: boolean) => void;
   isOpen: boolean;
+  footer?: ReactNode;
 }
 
 export function Modal({
   title,
   description,
+  icon,
   children,
   primaryActionLabel,
   secondaryActionLabel,
@@ -31,6 +35,7 @@ export function Modal({
   onSecondaryAction,
   onOpenChange,
   isOpen,
+  footer,
 }: ModalProps) {
   const handleKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>) => {
     if (event.key === 'Escape') {
@@ -53,7 +58,7 @@ export function Modal({
 
   return (
     <Box
-      style={{ position: 'fixed', inset: 0, zIndex: 60, display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: 'rgba(0, 0, 0, 0.6)', padding: '0 1rem' }}
+      style={{ position: 'fixed', inset: 0, zIndex: 60, display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: 'rgba(0, 0, 0, 0.6)', padding: '0 1rem', backdropFilter: 'blur(4px)' }}
       role="dialog"
       aria-modal="true"
       aria-labelledby="modal-title"
@@ -62,56 +67,72 @@ export function Modal({
       onClick={handleBackdropClick}
     >
       <Box
-        style={{ width: '100%', maxWidth: '28rem', borderRadius: '1rem', backgroundColor: '#0f1115', border: '1px solid #262626', boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.5)', outline: 'none' }}
+        style={{ width: '100%', maxWidth: '28rem', borderRadius: '1rem', backgroundColor: '#0f1115', border: '1px solid #262626', boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.5)', outline: 'none', overflow: 'hidden' }}
         tabIndex={-1}
       >
         <Box p={6} style={{ borderBottom: '1px solid rgba(38, 38, 38, 0.8)' }}>
-          <Heading level={2} id="modal-title">{title}</Heading>
-          {description && (
-            <Text
-              id="modal-description"
-              size="sm"
-              color="text-gray-400"
-              block
-              mt={2}
-            >
-              {description}
-            </Text>
-          )}
+          <Stack direction="row" align="center" gap={3}>
+            {icon && <Box>{icon}</Box>}
+            <Box>
+              <Heading level={2} id="modal-title">{title}</Heading>
+              {description && (
+                <Text
+                  id="modal-description"
+                  size="sm"
+                  color="text-gray-400"
+                  block
+                  mt={1}
+                >
+                  {description}
+                </Text>
+              )}
+            </Box>
+          </Stack>
         </Box>
 
         <Box p={6}>
-          <Text size="sm" color="text-gray-100">{children}</Text>
+          {children}
         </Box>
 
-        {(primaryActionLabel || secondaryActionLabel) && (
-          <Box p={6} style={{ borderTop: '1px solid rgba(38, 38, 38, 0.8)', display: 'flex', justifyContent: 'flex-end', gap: '0.75rem' }}>
-            {secondaryActionLabel && (
-              <Button
-                type="button"
-                onClick={() => {
-                  onSecondaryAction?.();
-                  onOpenChange?.(false);
-                }}
-                variant="secondary"
-                size="sm"
-              >
-                {secondaryActionLabel}
-              </Button>
+        {(primaryActionLabel || secondaryActionLabel || footer) && (
+          <Box p={6} style={{ borderTop: '1px solid rgba(38, 38, 38, 0.8)' }}>
+            {(primaryActionLabel || secondaryActionLabel) && (
+              <Box style={{ display: 'flex', justifyContent: 'flex-end', gap: '0.75rem' }}>
+                {secondaryActionLabel && (
+                  <Button
+                    type="button"
+                    onClick={() => {
+                      onSecondaryAction?.();
+                      onOpenChange?.(false);
+                    }}
+                    variant="secondary"
+                    size="sm"
+                    fullWidth={!primaryActionLabel}
+                  >
+                    {secondaryActionLabel}
+                  </Button>
+                )}
+                {primaryActionLabel && (
+                  <Button
+                    type="button"
+                    onClick={async () => {
+                      if (onPrimaryAction) {
+                        await onPrimaryAction();
+                      }
+                    }}
+                    variant="primary"
+                    size="sm"
+                    fullWidth={!secondaryActionLabel}
+                  >
+                    {primaryActionLabel}
+                  </Button>
+                )}
+              </Box>
             )}
-            {primaryActionLabel && (
-              <Button
-                type="button"
-                onClick={async () => {
-                  if (onPrimaryAction) {
-                    await onPrimaryAction();
-                  }
-                }}
-                variant="primary"
-                size="sm"
-              >
-                {primaryActionLabel}
-              </Button>
+            {footer && (
+              <Box mt={4}>
+                {footer}
+              </Box>
             )}
           </Box>
         )}