modal

1"use client"
2 
3import * as React from "react"
4import { Dialog as BaseDialog } from "@base-ui/react/dialog"
5import { cva, type VariantProps } from "class-variance-authority"
6import { X, Check, AlertTriangle, XCircle } from "lucide-react"
7import { cn } from "@/lib/utils"
8 
9const modalVariants = cva("", {
10    variants: {
11        variant: {
12            success: "",
13            warning: "",
14            destructive: "",
15        },
16    },
17    defaultVariants: {
18        variant: "success",
19    },
20})
21 
22const iconContainerVariants = cva(
23    "mx-auto flex h-12 w-12 items-center justify-center rounded-full border-2 border-black",
24    {
25        variants: {
26            variant: {
27                success: "bg-green-100",
28                warning: "bg-yellow-100",
29                destructive: "bg-red-100",
30            },
31        },
32        defaultVariants: {
33            variant: "success",
34        },
35    }
36)
37 
38const confirmButtonVariants = cva(
39    "inline-flex h-9 items-center justify-center rounded-base border-2 border-black px-4 text-sm font-bold transition-colors focus-brutal",
40    {
41        variants: {
42            variant: {
43                success: "bg-green-400 text-black hover:bg-green-500 shadow-brutal",
44                warning: "bg-yellow-400 text-black hover:bg-yellow-500 shadow-brutal",
45                destructive: "bg-red-400 text-white hover:bg-red-500 shadow-brutal",
46            },
47        },
48        defaultVariants: {
49            variant: "success",
50        },
51    }
52)
53 
54function getIcon(variant: "success" | "warning" | "destructive" | null | undefined) {
55    switch (variant) {
56        case "warning":
57            return <AlertTriangle className="h-6 w-6 text-yellow-600" />
58        case "destructive":
59            return <XCircle className="h-6 w-6 text-red-600" />
60        case "success":
61        default:
62            return <Check className="h-6 w-6 text-green-600" />
63    }
64}
65 
66interface ModalProps extends VariantProps<typeof modalVariants> {
67    open?: boolean
68    onOpenChange?: (open: boolean) => void
69    title: string
70    description?: string
71    confirmText?: string
72    cancelText?: string
73    onConfirm?: () => void
74    onCancel?: () => void
75    children?: React.ReactNode
76}
77 
78function Modal({
79    variant = "success",
80    open,
81    onOpenChange,
82    title,
83    description,
84    confirmText = "Confirm",
85    cancelText = "Cancel",
86    onConfirm,
87    onCancel,
88    children,
89}: ModalProps) {
90    function handleCancel() {
91        onCancel?.()
92// … truncated