Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 | 1x 1x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 13x 13x 13x 13x 13x 13x 13x 17x 17x 17x 17x 17x 17x 17x 17x 1x | import { Archive, ArchiveX, Trash } from 'lucide-react';
import { FC } from 'react';
type BulkSelectionActionsProps = {
selectedCount: number;
totalCount: number;
showArchived: boolean;
isBulkActionLoading: boolean;
onSelectAll: () => void;
onSelectRead: () => void;
onSelectUnread: () => void;
onMarkAsRead: () => void;
onMarkAsUnread: () => void;
onArchive: () => void;
onUnarchive: () => void;
onDelete: () => void;
onCancel: () => void;
};
const BulkSelectionActions: FC<BulkSelectionActionsProps> = ({
selectedCount,
totalCount,
showArchived,
isBulkActionLoading,
onSelectAll,
onSelectRead,
onSelectUnread,
onMarkAsRead,
onMarkAsUnread,
onArchive,
onUnarchive,
onDelete,
onCancel,
}) => (
<div className="w-full bg-blue-50 dark:bg-gray-800 px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-600 shadow-sm">
<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between w-full">
<div className="flex flex-wrap items-center gap-3 justify-center w-full sm:w-auto">
<span className="text-sm text-gray-600 dark:text-slate-400">{selectedCount} selected</span>
<div className="flex flex-wrap items-center gap-2 justify-center">
<button
onClick={onSelectAll}
className="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 px-2 py-1 hover:bg-blue-100 dark:hover:bg-blue-900 rounded"
>
{selectedCount === totalCount ? 'Deselect All' : 'Select All'}
</button>
<span className="text-gray-300 dark:text-gray-500">|</span>
<button
onClick={onSelectRead}
className="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 px-2 py-1 hover:bg-blue-100 dark:hover:bg-blue-900 rounded"
>
Select Read
</button>
<button
onClick={onSelectUnread}
className="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 px-2 py-1 hover:bg-blue-100 dark:hover:bg-blue-900 rounded"
>
Select Unread
</button>
</div>
</div>
<div className="flex flex-wrap items-center gap-2 justify-center w-full sm:w-auto mt-2 sm:mt-0">
<button
onClick={onMarkAsRead}
disabled={selectedCount === 0}
className="px-3 py-1 bg-green-100 dark:bg-green-900 text-gray-800 dark:text-green-200 rounded text-sm hover:bg-green-200 dark:hover:bg-green-800 disabled:opacity-50"
>
Mark as Read
</button>
<button
onClick={onMarkAsUnread}
disabled={selectedCount === 0}
className="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-gray-800 dark:text-blue-200 rounded text-sm hover:bg-blue-200 dark:hover:bg-blue-800 disabled:opacity-50"
>
Mark as Unread
</button>
{showArchived ? (
<>
<button
onClick={onUnarchive}
disabled={selectedCount === 0 || isBulkActionLoading}
className="px-3 py-1 bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 rounded text-sm hover:bg-green-200 dark:hover:bg-green-800 disabled:opacity-50 flex items-center gap-1"
>
<ArchiveX className="h-4 w-4" />
<span>Unarchive</span>
</button>
<button
onClick={onDelete}
disabled={selectedCount === 0 || isBulkActionLoading}
className="px-3 py-1 bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200 rounded text-sm hover:bg-red-200 dark:hover:bg-red-800 disabled:opacity-50 flex items-center gap-1"
title="Delete selected permanently"
>
<Trash className="h-4 w-4" />
<span>Trash</span>
</button>
</>
) : (
<button
onClick={onArchive}
disabled={selectedCount === 0 || isBulkActionLoading}
className="px-3 py-1 bg-amber-100 dark:bg-amber-900 text-amber-800 dark:text-amber-200 rounded text-sm hover:bg-amber-200 dark:hover:bg-amber-800 disabled:opacity-50 flex items-center gap-1"
>
<Archive className="h-4 w-4" />
<span>Archive</span>
</button>
)}
<button
onClick={onCancel}
className="px-3 py-1 text-gray-600 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded text-sm ml-2"
>
Cancel
</button>
</div>
</div>
</div>
);
export default BulkSelectionActions;
|