Madhura68
59e214fc12
Builds the full TaskDialog on top of the existing @base-ui/react Dialog primitive. Covers create mode, edit mode (status field + created_at metadata + delete), dirty-check AlertDialog, delete confirm AlertDialog, Cmd+Enter submit, and per-field char counters. Uses react-hook-form + zodResolver against the shared taskSchema. Priority and status are extracted to PrioritySegmented and StatusSelect sub-components using MD3 tokens throughout. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
56 lines
1.4 KiB
TypeScript
56 lines
1.4 KiB
TypeScript
'use client'
|
|
|
|
import { cn } from '@/lib/utils'
|
|
|
|
const PRIORITIES = [
|
|
{
|
|
value: 1,
|
|
label: 'P1 Critical',
|
|
selected: 'bg-error-container text-on-error-container border-transparent',
|
|
},
|
|
{
|
|
value: 2,
|
|
label: 'P2 High',
|
|
selected: 'bg-priority-high/15 text-priority-high border-priority-high/30',
|
|
},
|
|
{
|
|
value: 3,
|
|
label: 'P3 Medium',
|
|
selected: 'bg-primary text-primary-foreground border-transparent',
|
|
},
|
|
{
|
|
value: 4,
|
|
label: 'P4 Low',
|
|
selected: 'bg-muted text-foreground border-border',
|
|
},
|
|
]
|
|
|
|
interface PrioritySegmentedProps {
|
|
value: number
|
|
onChange: (value: number) => void
|
|
disabled?: boolean
|
|
}
|
|
|
|
export function PrioritySegmented({ value, onChange, disabled }: PrioritySegmentedProps) {
|
|
return (
|
|
<div className="flex gap-1 flex-wrap" role="group" aria-label="Prioriteit">
|
|
{PRIORITIES.map(p => (
|
|
<button
|
|
key={p.value}
|
|
type="button"
|
|
onClick={() => !disabled && onChange(p.value)}
|
|
aria-pressed={value === p.value}
|
|
disabled={disabled}
|
|
className={cn(
|
|
'rounded-lg border px-3 py-1.5 text-sm transition-colors disabled:opacity-50 disabled:cursor-not-allowed',
|
|
value === p.value
|
|
? cn('font-medium', p.selected)
|
|
: 'border-border text-muted-foreground hover:bg-muted hover:text-foreground',
|
|
)}
|
|
>
|
|
{p.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|