54 lines
1.1 KiB
TypeScript
54 lines
1.1 KiB
TypeScript
'use client';
|
|
|
|
import { Button } from '@/ui/Button';
|
|
import { BulkActions } from '@/ui/BulkActions';
|
|
import React from 'react';
|
|
|
|
interface BulkActionBarProps {
|
|
selectedCount: number;
|
|
actions: {
|
|
label: string;
|
|
onClick: () => void;
|
|
variant?: 'primary' | 'secondary' | 'danger';
|
|
icon?: React.ReactNode;
|
|
}[];
|
|
onClearSelection: () => void;
|
|
}
|
|
|
|
/**
|
|
* BulkActionBar
|
|
*
|
|
* Floating action bar that appears when items are selected in a table.
|
|
*/
|
|
export function BulkActionBar({
|
|
selectedCount,
|
|
actions,
|
|
onClearSelection
|
|
}: BulkActionBarProps) {
|
|
return (
|
|
<BulkActions
|
|
selectedCount={selectedCount}
|
|
isOpen={selectedCount > 0}
|
|
>
|
|
{actions.map((action) => (
|
|
<Button
|
|
key={action.label}
|
|
size="sm"
|
|
variant={action.variant === 'danger' ? 'danger' : (action.variant || 'primary')}
|
|
onClick={action.onClick}
|
|
icon={action.icon}
|
|
>
|
|
{action.label}
|
|
</Button>
|
|
))}
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
onClick={onClearSelection}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
</BulkActions>
|
|
);
|
|
}
|