64 lines
1.5 KiB
TypeScript
64 lines
1.5 KiB
TypeScript
"use client";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from "@/components/ui/dialog";
|
|
import { cn } from "@/lib/utils";
|
|
import React, { useState } from "react";
|
|
import { Loading } from "./loading";
|
|
|
|
export type ConfirmProps = {
|
|
title: string;
|
|
description?: string;
|
|
trigger: React.ReactNode;
|
|
onConfirm: () => void | Promise<void>;
|
|
variant?: "alert";
|
|
disabled?: boolean;
|
|
};
|
|
|
|
export const Confirm: React.FC<ConfirmProps> = (props): JSX.Element => {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const onConfirm = async () => {
|
|
setLoading(true);
|
|
await props.onConfirm();
|
|
setLoading(false);
|
|
setIsOpen(false);
|
|
};
|
|
|
|
return (
|
|
<Dialog open={isOpen} onOpenChange={setIsOpen}>
|
|
<DialogTrigger asChild disabled={props.disabled}>
|
|
{props.trigger}
|
|
</DialogTrigger>
|
|
<DialogContent
|
|
className={cn("sm:max-w-[425px]", { "border-alert": props.variant === "alert" })}
|
|
>
|
|
<DialogHeader>
|
|
<DialogTitle>{props.title}</DialogTitle>
|
|
<DialogDescription>{props.description}</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<DialogFooter>
|
|
<Button
|
|
type="submit"
|
|
// variant={props.variant}
|
|
onClick={onConfirm}>
|
|
{loading ? <Loading /> : "Confirm"}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
};
|
|
|
|
export default Confirm;
|