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 | 1x 68x 68x 68x 68x 68x 68x 68x 2x 2x 2x 2x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 2x 2x 1x 1x 1x 1x 1x 1x 1x 68x 68x 1x | import React from 'react';
export interface SelectedFiltersDisplayProps {
selectedGroups: string[];
groups: { id: string; name: string }[];
onClearGroup: (groupId: string) => void;
onClearAll: () => void;
className?: string;
}
export const SelectedFiltersDisplay: React.FC<SelectedFiltersDisplayProps> = ({
selectedGroups,
groups,
onClearGroup,
onClearAll,
className = '',
}) => {
if (!selectedGroups || selectedGroups.length === 0) return null;
return (
<div className={`flex flex-wrap items-center gap-2 mb-2 ${className}`}>
<span className="text-sm text-gray-600">Groups:</span>
{selectedGroups.map((groupId) => {
const group = groups.find((g) => g.id === groupId);
if (!group) return null;
return (
<span
key={groupId}
className="inline-flex items-center gap-1 px-2 py-1 bg-neutral-100 text-neutral-800 border border-neutral-200 text-sm rounded-full"
data-testid={`selected-group-chip-${groupId}`}
>
{group.name}
<button
type="button"
onClick={() => onClearGroup(groupId)}
className="ml-1 text-neutral-600 hover:text-neutral-800"
aria-label={`Remove ${group.name} filter`}
>
×
</button>
</span>
);
})}
{selectedGroups.length > 1 && (
<button
type="button"
onClick={onClearAll}
className="text-sm text-gray-500 hover:text-gray-700 underline"
data-testid="clear-all-groups"
>
Clear all
</button>
)}
</div>
);
};
export default SelectedFiltersDisplay;
|