website refactor

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

@@ -0,0 +1,70 @@
+'use client';
+
+import React from 'react';
+import { Modal } from '@/ui/Modal';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Heading } from '@/ui/Heading';
+import { Button } from '@/ui/Button';
+import { Stack } from '@/ui/Stack';
+import { AlertCircle } from 'lucide-react';
+
+interface ConfirmDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  title: string;
+  description: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  variant?: 'danger' | 'primary';
+  isLoading?: boolean;
+}
+
+export function ConfirmDialog({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  description,
+  confirmLabel = 'Confirm',
+  cancelLabel = 'Cancel',
+  variant = 'primary',
+  isLoading = false,
+}: ConfirmDialogProps) {
+  return (
+    <Modal isOpen={isOpen} onOpenChange={(open) => !open && onClose()} title={title}>
+      <Box p={6}>
+        <Stack direction="row" gap={4} align="start">
+          {variant === 'danger' && (
+            <Box p={2} rounded="full" bg="bg-racing-red/10">
+              <AlertCircle className="w-6 h-6 text-racing-red" />
+            </Box>
+          )}
+          <Box flexGrow={1}>
+            <Heading level={3} fontSize="lg" weight="semibold" mb={2}>
+              {title}
+            </Heading>
+            <Text color="text-gray-400" size="sm" block mb={6}>
+              {description}
+            </Text>
+          </Box>
+        </Stack>
+
+        <Box display="flex" justifyContent="end" gap={3}>
+          <Button variant="secondary" onClick={onClose} disabled={isLoading}>
+            {cancelLabel}
+          </Button>
+          <Button
+            variant={variant === 'danger' ? 'primary' : 'primary'}
+            onClick={onConfirm}
+            disabled={isLoading}
+            className={variant === 'danger' ? 'bg-racing-red hover:bg-racing-red/90 border-racing-red' : ''}
+          >
+            {isLoading ? 'Processing...' : confirmLabel}
+          </Button>
+        </Box>
+      </Box>
+    </Modal>
+  );
+}