303a558432
3,200+ hardcoded color values replaced with CSS variable-backed Tailwind classes (bg-card, text-foreground, border-border, etc.). Enables light mode via CSS variable swap. Only syntax highlighting colors and intentional one-offs remain hardcoded (~15 values). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
66 lines
1.7 KiB
TypeScript
66 lines
1.7 KiB
TypeScript
import { Modal } from './Modal'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
interface ConfirmDialogProps {
|
|
isOpen: boolean
|
|
onClose: () => void
|
|
onConfirm: () => void
|
|
title: string
|
|
message: string
|
|
confirmLabel?: string
|
|
confirmVariant?: 'destructive' | 'default'
|
|
isLoading?: boolean
|
|
}
|
|
|
|
export function ConfirmDialog({
|
|
isOpen,
|
|
onClose,
|
|
onConfirm,
|
|
title,
|
|
message,
|
|
confirmLabel = 'Delete',
|
|
confirmVariant = 'destructive',
|
|
isLoading = false,
|
|
}: ConfirmDialogProps) {
|
|
return (
|
|
<Modal
|
|
isOpen={isOpen}
|
|
onClose={onClose}
|
|
title={title}
|
|
size="sm"
|
|
footer={
|
|
<div className="flex justify-end gap-3">
|
|
<button
|
|
onClick={onClose}
|
|
disabled={isLoading}
|
|
className={cn(
|
|
'rounded-xl border border-border px-4 py-2 text-sm font-medium',
|
|
'text-muted-foreground hover:bg-accent hover:text-foreground',
|
|
'disabled:opacity-50 disabled:cursor-not-allowed'
|
|
)}
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
onClick={onConfirm}
|
|
disabled={isLoading}
|
|
className={cn(
|
|
'rounded-xl px-4 py-2 text-sm font-medium',
|
|
'disabled:opacity-50 disabled:cursor-not-allowed',
|
|
confirmVariant === 'destructive'
|
|
? 'bg-red-400/10 text-red-400 hover:bg-red-400/20 border border-red-400/20'
|
|
: 'bg-primary text-white hover:brightness-110'
|
|
)}
|
|
>
|
|
{isLoading ? 'Processing...' : confirmLabel}
|
|
</button>
|
|
</div>
|
|
}
|
|
>
|
|
<p className="text-sm text-muted-foreground">{message}</p>
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
export default ConfirmDialog
|