Scrum4Me/components/shared/pbi-status-select.tsx
Janpeter Visser a16988b957
Sprint: debug, zichtbaarheid componenten (#165)
* feat(debug-store): Zustand store met hydration-flag voor debug-modus

* feat(status-bar): dev-only debug-toggle via geïsoleerde sub-component

* feat(globals.css): debug-mode overlay CSS voor data-debug-id elementen

* feat(shared): data-debug-id+label op navigatie-componenten

* feat(shared): data-debug-id+label op form/select-componenten

* feat(shared): data-debug-id+label op display-componenten
2026-05-08 08:55:43 +02:00

45 lines
1.5 KiB
TypeScript

'use client'
import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select'
import { cn } from '@/lib/utils'
import type { PbiStatusApi } from '@/lib/task-status'
export const PBI_STATUS_LABELS: Record<PbiStatusApi, string> = {
ready: 'Klaar voor sprint',
blocked: 'Geblokkeerd',
failed: 'Gefaald',
done: 'Afgerond',
}
export const PBI_STATUS_COLORS: Record<PbiStatusApi, string> = {
ready: 'bg-status-todo/15 text-status-todo border-status-todo/30',
blocked: 'bg-status-blocked/15 text-status-blocked border-status-blocked/30',
failed: 'bg-status-failed/15 text-status-failed border-status-failed/30',
done: 'bg-status-done/15 text-status-done border-status-done/30',
}
interface PbiStatusSelectProps {
value: PbiStatusApi
onChange: (value: PbiStatusApi) => void
className?: string
}
export function PbiStatusSelect({ value, onChange, className }: PbiStatusSelectProps) {
return (
<span data-debug-id="pbi-status-select" data-debug-label="PbiStatusSelect — shared/pbi-status-select.tsx">
<Select
value={value}
onValueChange={(v) => { if (v) onChange(v as PbiStatusApi) }}
>
<SelectTrigger className={cn('w-full', className)}>
{PBI_STATUS_LABELS[value] ?? value}
</SelectTrigger>
<SelectContent>
<SelectItem value="ready">Klaar voor sprint</SelectItem>
<SelectItem value="blocked">Geblokkeerd</SelectItem>
<SelectItem value="done">Afgerond</SelectItem>
</SelectContent>
</Select>
</span>
)
}