* 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
45 lines
1.5 KiB
TypeScript
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>
|
|
)
|
|
}
|