60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
import { PopoverClose } from "@radix-ui/react-popover";
|
|
import { CircleAlert, Trash } from "lucide-react";
|
|
import { Button } from "../ui/button";
|
|
import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
|
|
|
|
// XButtonDelete 删除按钮，提供二次确认功能
|
|
export function XButtonDelete({
|
|
onConfirm,
|
|
isLoading,
|
|
}: {
|
|
onConfirm: () => void;
|
|
isLoading?: boolean;
|
|
}) {
|
|
return (
|
|
<Popover>
|
|
<PopoverTrigger asChild>
|
|
<Button
|
|
isLoading={isLoading ?? false}
|
|
variant="ghost"
|
|
size="sm"
|
|
className="text-destructive hover:text-destructive"
|
|
>
|
|
<Trash className="h-4 w-4" />
|
|
删除
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-36">
|
|
<div className="grid gap-4">
|
|
<div className="space-y-2">
|
|
<p className="text-sm text-muted-foreground flex items-center">
|
|
<CircleAlert
|
|
className="inline-block pr-2"
|
|
fill="orange"
|
|
color="white"
|
|
size={28}
|
|
/>
|
|
确认删除吗?
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid gap-2">
|
|
<div className="grid grid-cols-2 items-center gap-4">
|
|
<PopoverClose>
|
|
<Button size={"sm"} className="w-full" variant="outline">
|
|
取消
|
|
</Button>
|
|
</PopoverClose>
|
|
<PopoverClose>
|
|
<Button onClick={onConfirm} size={"sm"}>
|
|
确认
|
|
</Button>
|
|
</PopoverClose>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</PopoverContent>
|
|
</Popover>
|
|
);
|
|
}
|