91 lines
3.9 KiB
TypeScript
91 lines
3.9 KiB
TypeScript
'use client';
|
|
|
|
import { motion } from 'framer-motion';
|
|
|
|
import type { KanbanFilterOptions, KanbanStats } from '../../lib/kanban';
|
|
|
|
import { StatPill } from '../shared/stat-pill';
|
|
|
|
interface KanbanControlsProps {
|
|
filters: KanbanFilterOptions;
|
|
stats: KanbanStats;
|
|
onFiltersChange: (filters: KanbanFilterOptions) => void;
|
|
onNextActionable: () => void;
|
|
nextActionableFeedback?: string | null;
|
|
}
|
|
|
|
export function KanbanControls({
|
|
filters,
|
|
stats,
|
|
onFiltersChange,
|
|
onNextActionable,
|
|
nextActionableFeedback = null,
|
|
}: KanbanControlsProps) {
|
|
const inputClass =
|
|
'ui-field rounded-xl px-3 py-2.5 text-sm outline-none transition';
|
|
|
|
return (
|
|
<section className="grid gap-3">
|
|
<motion.div layout className="grid grid-cols-1 gap-2.5 sm:flex sm:flex-wrap sm:items-center">
|
|
<input
|
|
type="search"
|
|
value={filters.query ?? ''}
|
|
onChange={(event) => onFiltersChange({ ...filters, query: event.target.value })}
|
|
placeholder="Search by id/title/labels"
|
|
className={`${inputClass} w-full sm:min-w-[18rem] sm:flex-1`}
|
|
/>
|
|
<select
|
|
value={filters.type ?? ''}
|
|
onChange={(event) => onFiltersChange({ ...filters, type: event.target.value })}
|
|
className={`${inputClass} ui-select w-full sm:w-44`}
|
|
aria-label="Type filter"
|
|
>
|
|
<option className="ui-option" value="">All types</option>
|
|
<option className="ui-option" value="task">Task</option>
|
|
<option className="ui-option" value="bug">Bug</option>
|
|
<option className="ui-option" value="feature">Feature</option>
|
|
<option className="ui-option" value="epic">Epic</option>
|
|
<option className="ui-option" value="chore">Chore</option>
|
|
</select>
|
|
<select
|
|
value={filters.priority ?? ''}
|
|
onChange={(event) => onFiltersChange({ ...filters, priority: event.target.value })}
|
|
className={`${inputClass} ui-select w-full sm:w-36`}
|
|
aria-label="Priority filter"
|
|
>
|
|
<option className="ui-option" value="">All priorities</option>
|
|
<option className="ui-option" value="0">P0</option>
|
|
<option className="ui-option" value="1">P1</option>
|
|
<option className="ui-option" value="2">P2</option>
|
|
<option className="ui-option" value="3">P3</option>
|
|
<option className="ui-option" value="4">P4</option>
|
|
</select>
|
|
<label className="ui-text inline-flex w-full items-center justify-center gap-2 rounded-xl border border-border-soft bg-gradient-to-b from-surface-muted/50 to-surface-muted/70 px-3 py-2 text-sm text-text-body sm:w-auto sm:justify-start shadow-[0_1px_3px_rgba(0,0,0,0.1)]">
|
|
<input
|
|
type="checkbox"
|
|
checked={filters.showClosed ?? false}
|
|
onChange={(event) => onFiltersChange({ ...filters, showClosed: event.target.checked })}
|
|
className="h-4 w-4 accent-amber-400"
|
|
/>
|
|
Show closed
|
|
</label>
|
|
<button
|
|
type="button"
|
|
onClick={onNextActionable}
|
|
className="ui-text w-full rounded-xl border border-border-soft bg-gradient-to-b from-surface-muted/60 to-surface-muted/80 px-3 py-2 text-sm font-semibold text-text-body transition hover:from-surface-muted/75 hover:to-surface-muted/90 shadow-[0_1px_3px_rgba(0,0,0,0.1)] sm:w-auto"
|
|
>
|
|
Next Actionable
|
|
</button>
|
|
</motion.div>
|
|
<motion.div layout className="flex flex-wrap gap-2">
|
|
<StatPill label="Total" value={stats.total} />
|
|
<StatPill label="Ready" value={stats.ready} />
|
|
<StatPill label="Active" value={stats.active} />
|
|
<StatPill label="Blocked" value={stats.blocked} />
|
|
<StatPill label="Done" value={stats.done} />
|
|
<StatPill label="P0" value={stats.p0} tone={stats.p0 > 0 ? 'critical' : 'default'} />
|
|
</motion.div>
|
|
{nextActionableFeedback ? <p className="ui-text text-xs text-text-muted">{nextActionableFeedback}</p> : null}
|
|
</section>
|
|
);
|
|
}
|