website refactor

apps/website/ui/Modal.tsx

@@ -1,138 +1,144 @@
-
-
-import React, {
-    type KeyboardEvent as ReactKeyboardEvent,
-    type ReactNode,
-} from 'react';
+import React, { ReactNode } from 'react';
 import { Box } from './primitives/Box';
-import { Button } from './Button';
-import { Heading } from './Heading';
 import { Stack } from './primitives/Stack';
+import { Button } from './Button';
 import { Text } from './Text';
+import { X } from 'lucide-react';
+import { IconButton } from './IconButton';
 
 interface ModalProps {
-  title: string;
-  description?: string;
-  icon?: ReactNode;
-  children?: ReactNode;
-  primaryActionLabel?: string;
-  secondaryActionLabel?: string;
-  onPrimaryAction?: () => void | Promise<void>;
-  onSecondaryAction?: () => void;
-  onOpenChange?: (open: boolean) => void;
   isOpen: boolean;
+  onClose?: () => void;
+  onOpenChange?: (open: boolean) => void;
+  title?: string;
+  description?: string;
+  icon?: React.ReactNode;
+  children: ReactNode;
   footer?: ReactNode;
+  primaryActionLabel?: string;
+  onPrimaryAction?: () => void;
+  secondaryActionLabel?: string;
+  onSecondaryAction?: () => void;
+  isLoading?: boolean;
+  size?: 'sm' | 'md' | 'lg' | 'xl';
 }
 
 export function Modal({
+  isOpen,
+  onClose,
+  onOpenChange,
   title,
   description,
   icon,
   children,
-  primaryActionLabel,
-  secondaryActionLabel,
-  onPrimaryAction,
-  onSecondaryAction,
-  onOpenChange,
-  isOpen,
   footer,
+  primaryActionLabel,
+  onPrimaryAction,
+  secondaryActionLabel,
+  onSecondaryAction,
+  isLoading = false,
+  size = 'md',
 }: ModalProps) {
-  const handleKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>) => {
-    if (event.key === 'Escape') {
-      if (onOpenChange) {
-        onOpenChange(false);
-      }
-      return;
-    }
+  if (!isOpen) return null;
+
+  const sizeMap = {
+    sm: 'max-w-md',
+    md: 'max-w-lg',
+    lg: 'max-w-2xl',
+    xl: 'max-w-4xl',
   };
 
-  const handleBackdropClick = (event: React.MouseEvent<HTMLDivElement>) => {
-    if (event.target === event.currentTarget && onOpenChange) {
-      onOpenChange(false);
-    }
+  const handleClose = () => {
+    if (onClose) onClose();
+    if (onOpenChange) onOpenChange(false);
   };
 
-  if (!isOpen) {
-    return null;
-  }
-
   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', backdropFilter: 'blur(4px)' }}
+      position="fixed"
+      inset={0}
+      zIndex={60}
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+      bg="bg-black/60"
+      px={4}
+      className="backdrop-blur-sm"
       role="dialog"
       aria-modal="true"
-      aria-labelledby="modal-title"
-      aria-describedby={description ? 'modal-description' : undefined}
-      onKeyDown={handleKeyDown}
-      onClick={handleBackdropClick}
     >
+      {/* Backdrop click to close */}
+      <Box position="absolute" inset={0} onClick={handleClose} />
+
       <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', overflow: 'hidden' }}
+        position="relative"
+        w="full"
+        maxWidth={sizeMap[size]}
+        rounded="2xl"
+        bg="bg-[#0f1115]"
+        border
+        borderColor="border-[#262626]"
+        shadow="2xl"
+        overflow="hidden"
         tabIndex={-1}
       >
-        <Box p={6} style={{ borderBottom: '1px solid rgba(38, 38, 38, 0.8)' }}>
-          <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>
+        {/* Header */}
+        <Box p={6} borderBottom borderColor="border-white/5">
+          <Stack direction="row" align="center" justify="between">
+            <Stack direction="row" align="center" gap={3}>
+              {icon && <Box>{icon}</Box>}
+              <Box>
+                {title && (
+                  <Text size="xl" weight="bold" color="text-white" block>
+                    {title}
+                  </Text>
+                )}
+                {description && (
+                  <Text size="sm" color="text-gray-400" block mt={1}>
+                    {description}
+                  </Text>
+                )}
+              </Box>
+            </Stack>
+            <IconButton
+              icon={X}
+              onClick={handleClose}
+              variant="ghost"
+              size="sm"
+              title="Close modal"
+            />
           </Stack>
         </Box>
 
-        <Box p={6}>
+        {/* Content */}
+        <Box p={6} overflowY="auto" maxHeight="calc(100vh - 200px)">
           {children}
         </Box>
 
+        {/* Footer */}
         {(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' }}>
+          <Box p={6} borderTop borderColor="border-white/5">
+            {footer || (
+              <Stack direction="row" justify="end" gap={3}>
                 {secondaryActionLabel && (
                   <Button
-                    type="button"
-                    onClick={() => {
-                      onSecondaryAction?.();
-                      onOpenChange?.(false);
-                    }}
-                    variant="secondary"
-                    size="sm"
-                    fullWidth={!primaryActionLabel}
+                    variant="ghost"
+                    onClick={onSecondaryAction || onClose}
+                    disabled={isLoading}
                   >
                     {secondaryActionLabel}
                   </Button>
                 )}
                 {primaryActionLabel && (
                   <Button
-                    type="button"
-                    onClick={async () => {
-                      if (onPrimaryAction) {
-                        await onPrimaryAction();
-                      }
-                    }}
                     variant="primary"
-                    size="sm"
-                    fullWidth={!secondaryActionLabel}
+                    onClick={onPrimaryAction}
+                    isLoading={isLoading}
                   >
                     {primaryActionLabel}
                   </Button>
                 )}
-              </Box>
-            )}
-            {footer && (
-              <Box mt={4}>
-                {footer}
-              </Box>
+              </Stack>
             )}
           </Box>
         )}