|
1 | 1 | import { LuPlus, LuSend, LuTrash2 } from "react-icons/lu"; |
| 2 | +import { useState } from "react"; |
2 | 3 |
|
3 | 4 | import { m } from "@localizations/messages.js"; |
4 | 5 | import { Button } from "@components/Button"; |
@@ -27,6 +28,23 @@ export default function DeviceList({ |
27 | 28 | onCancelWakeOnLanModal, |
28 | 29 | setShowAddForm, |
29 | 30 | }: DeviceListProps) { |
| 31 | + const [deleteIndex, setDeleteIndex] = useState<number | null>(null); |
| 32 | + |
| 33 | + const handleDelete = (index: number) => { |
| 34 | + setDeleteIndex(index); |
| 35 | + }; |
| 36 | + |
| 37 | + const confirmDelete = () => { |
| 38 | + if (deleteIndex !== null) { |
| 39 | + onDeleteDevice(deleteIndex); |
| 40 | + setDeleteIndex(null); |
| 41 | + } |
| 42 | + }; |
| 43 | + |
| 44 | + const cancelDelete = () => { |
| 45 | + setDeleteIndex(null); |
| 46 | + }; |
| 47 | + |
30 | 48 | return ( |
31 | 49 | <div className="space-y-4"> |
32 | 50 | <Card className="animate-fadeIn opacity-0"> |
@@ -55,14 +73,30 @@ export default function DeviceList({ |
55 | 73 | size="XS" |
56 | 74 | theme="danger" |
57 | 75 | LeadingIcon={LuTrash2} |
58 | | - onClick={() => onDeleteDevice(index)} |
| 76 | + onClick={() => handleDelete(index)} |
59 | 77 | aria-label={m.wake_on_lan_device_list_delete_device()} |
60 | 78 | /> |
61 | 79 | </div> |
62 | 80 | </div> |
63 | 81 | ))} |
64 | 82 | </div> |
65 | 83 | </Card> |
| 84 | + {deleteIndex !== null && ( |
| 85 | + <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40"> |
| 86 | + <Card className="p-6 w-full max-w-xs animate-fadeIn"> |
| 87 | + <h3 className="text-lg font-semibold mb-2 text-slate-900 dark:text-slate-100"> |
| 88 | + {m.wake_on_lan_device_list_delete_device()} |
| 89 | + </h3> |
| 90 | + <p className="text-sm mb-4 text-slate-700 dark:text-slate-300"> |
| 91 | + {m.wake_on_lan_device_list_confirm_delete_message({ name: storedDevices[deleteIndex]?.name || "" })} |
| 92 | + </p> |
| 93 | + <div className="flex justify-end space-x-2"> |
| 94 | + <Button size="SM" theme="blank" text={m.cancel()} onClick={cancelDelete} /> |
| 95 | + <Button size="SM" theme="danger" text={m.delete()} onClick={confirmDelete} /> |
| 96 | + </div> |
| 97 | + </Card> |
| 98 | + </div> |
| 99 | + )} |
66 | 100 | <div |
67 | 101 | className="flex animate-fadeIn opacity-0 items-center justify-end space-x-2" |
68 | 102 | style={{ |
|
0 commit comments