Confirm Dialog

pnpm dlx shadcn@latest add @whereui/confirm-dialog

import { ConfirmDialog } from "@/components/ui/confirm-dialog"const [open, setOpen] = React.useState(false)<ConfirmDialog  open={open}  onOpenChange={setOpen}  title="ยืนยันการส่งคำขอ?"  description="หลังส่งแล้วจะแก้ไขไม่ได้"  onConfirm={() => setOpen(false)}/>

"use client"import * as React from "react"import { LoaderIcon } from "lucide-react"import { cn } from "cn"import {  AlertDialog,  AlertDialogAction,  AlertDialogCancel,  AlertDialogContent,  AlertDialogDescription,  AlertDialogFooter,  AlertDialogHeader,  AlertDialogTitle,} from "@/components/ui/alert-dialog"// กล่องยืนยันบน AlertDialog — controlled ผ่าน open/onOpenChange// ขณะ loading ปุ่มทั้งคู่ถูกปิด ฝั่งผู้ใช้ปิดเองหลังงานเสร็จfunction ConfirmDialog({  className,  open,  defaultOpen,  onOpenChange,  title,  description,  confirmLabel = "ยืนยัน",  cancelLabel = "ยกเลิก",  variant = "default",  loading = false,  onConfirm,}: {  className?: string  open?: boolean  defaultOpen?: boolean  onOpenChange?: (open: boolean) => void  title: React.ReactNode  description?: React.ReactNode  confirmLabel?: string  cancelLabel?: string  /** destructive = หัวเรื่องและปุ่มยืนยันเป็นสีแดง สำหรับการลบ */  variant?: "default" | "destructive"  /** สถานะกำลังทำงานของปุ่มยืนยัน */  loading?: boolean  onConfirm?: () => void}) {  return (    <AlertDialog      open={open}      defaultOpen={defaultOpen}      onOpenChange={onOpenChange}    >      <AlertDialogContent data-slot="confirm-dialog" className={cn(className)}>        <AlertDialogHeader>          <AlertDialogTitle            className={variant === "destructive" ? "text-destructive" : undefined}          >            {title}          </AlertDialogTitle>          {description ? (            <AlertDialogDescription>{description}</AlertDialogDescription>          ) : null}        </AlertDialogHeader>        <AlertDialogFooter>          <AlertDialogCancel disabled={loading}>            {cancelLabel}          </AlertDialogCancel>          <AlertDialogAction            variant={variant === "destructive" ? "destructive" : "default"}            disabled={loading}            onClick={() => onConfirm?.()}          >            {loading ? (              <LoaderIcon aria-hidden="true" className="animate-spin" />            ) : null}            {confirmLabel}          </AlertDialogAction>        </AlertDialogFooter>      </AlertDialogContent>    </AlertDialog>  )}export { ConfirmDialog }