Spaces:
Paused
Paused
File size: 3,503 Bytes
7516302 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 | import { useState, useCallback } from "preact/hooks";
import { useT } from "../../../shared/i18n/context";
interface AccountBulkActionsProps {
selectedCount: number;
loading: boolean;
onBatchDelete: () => void;
onSetActive: () => void;
onSetDisabled: () => void;
}
export function AccountBulkActions({
selectedCount,
loading,
onBatchDelete,
onSetActive,
onSetDisabled,
}: AccountBulkActionsProps) {
const t = useT();
const [confirming, setConfirming] = useState(false);
const handleDelete = useCallback(() => {
if (!confirming) {
setConfirming(true);
return;
}
setConfirming(false);
onBatchDelete();
}, [confirming, onBatchDelete]);
const cancelConfirm = useCallback(() => setConfirming(false), []);
if (selectedCount === 0) return null;
return (
<div class="sticky bottom-0 z-40 bg-white dark:bg-card-dark border-t border-gray-200 dark:border-border-dark shadow-lg px-4 py-3">
<div class="flex items-center gap-3 flex-wrap">
<span class="text-sm font-medium text-slate-700 dark:text-text-main shrink-0">
{selectedCount} {t("accountsCount")} {t("selected")}
</span>
<div class="h-4 w-px bg-gray-200 dark:bg-border-dark hidden sm:block" />
<button
onClick={onSetActive}
disabled={loading}
class="px-3 py-1.5 text-xs font-medium rounded-lg border border-green-200 dark:border-green-800/40 bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-400 hover:bg-green-100 dark:hover:bg-green-900/30 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
>
{t("setActive")}
</button>
<button
onClick={onSetDisabled}
disabled={loading}
class="px-3 py-1.5 text-xs font-medium rounded-lg border border-slate-200 dark:border-slate-700/40 bg-slate-50 dark:bg-slate-800/20 text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800/30 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
>
{t("setDisabled")}
</button>
<div class="h-4 w-px bg-gray-200 dark:bg-border-dark hidden sm:block" />
{confirming ? (
<div class="flex items-center gap-2">
<button
onClick={handleDelete}
disabled={loading}
class="px-3 py-1.5 text-xs font-medium rounded-lg bg-red-600 text-white hover:bg-red-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
>
{t("batchDeleteConfirm")}
</button>
<button
onClick={cancelConfirm}
disabled={loading}
class="px-3 py-1.5 text-xs font-medium rounded-lg border border-gray-200 dark:border-border-dark text-slate-600 dark:text-text-dim hover:bg-slate-50 dark:hover:bg-border-dark/30 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
>
{t("cancel")}
</button>
</div>
) : (
<button
onClick={handleDelete}
disabled={loading}
class="px-3 py-1.5 text-xs font-medium rounded-lg border border-red-200 dark:border-red-800/40 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-900/30 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
>
{t("batchDelete")}
</button>
)}
</div>
</div>
);
}
|