feat(ideas): voeg IdeasFilterPopover component toe
Nieuwe client-component met multi-select statusfilter popover voor het Ideeënscherm; hergebruikt MultiFilterPills uit backlog-filter-popover. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
33d6d629c4
commit
b8eb724d17
1 changed files with 69 additions and 0 deletions
69
components/ideas/ideas-filter-popover.tsx
Normal file
69
components/ideas/ideas-filter-popover.tsx
Normal file
|
|
@ -0,0 +1,69 @@
|
||||||
|
'use client'
|
||||||
|
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
|
||||||
|
import { MultiFilterPills } from '@/components/shared/backlog-filter-popover'
|
||||||
|
import { debugProps } from '@/lib/debug'
|
||||||
|
import type { IdeaStatusApi } from '@/lib/idea-status'
|
||||||
|
|
||||||
|
interface IdeasFilterPopoverProps {
|
||||||
|
open: boolean
|
||||||
|
onOpenChange: (o: boolean) => void
|
||||||
|
statusOptions: Array<{ value: IdeaStatusApi; label: string }>
|
||||||
|
selected: Set<IdeaStatusApi>
|
||||||
|
onToggle: (v: IdeaStatusApi) => void
|
||||||
|
onClear: () => void
|
||||||
|
activeFilterCount: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export function IdeasFilterPopover({
|
||||||
|
open,
|
||||||
|
onOpenChange,
|
||||||
|
statusOptions,
|
||||||
|
selected,
|
||||||
|
onToggle,
|
||||||
|
onClear,
|
||||||
|
activeFilterCount,
|
||||||
|
}: IdeasFilterPopoverProps) {
|
||||||
|
return (
|
||||||
|
<Popover open={open} onOpenChange={onOpenChange}>
|
||||||
|
<PopoverTrigger
|
||||||
|
render={
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
className="h-7 text-xs"
|
||||||
|
{...debugProps('ideas-filter-popover__trigger')}
|
||||||
|
>
|
||||||
|
{`Filters${activeFilterCount > 0 ? ` (${activeFilterCount})` : ''}`}
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<PopoverContent
|
||||||
|
align="end"
|
||||||
|
className="w-72 space-y-4"
|
||||||
|
{...debugProps('ideas-filter-popover', 'IdeasFilterPopover', 'components/ideas/ideas-filter-popover.tsx')}
|
||||||
|
>
|
||||||
|
<MultiFilterPills
|
||||||
|
label="Status"
|
||||||
|
options={statusOptions}
|
||||||
|
selected={selected}
|
||||||
|
onToggle={onToggle}
|
||||||
|
onClear={onClear}
|
||||||
|
/>
|
||||||
|
<div className="flex justify-end pt-1 border-t border-border">
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="h-7 text-xs"
|
||||||
|
disabled={activeFilterCount === 0}
|
||||||
|
onClick={onClear}
|
||||||
|
>
|
||||||
|
Wis filters
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
)
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue