69 lines
1.9 KiB
TypeScript
69 lines
1.9 KiB
TypeScript
'use client';
|
|
|
|
import { Button } from '@/ui/Button';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Modal } from '@/ui/Modal';
|
|
import { Stack } from '@/ui/primitives/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { AlertCircle, Box } 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>
|
|
);
|
|
}
|