48 lines
1.7 KiB
TypeScript
48 lines
1.7 KiB
TypeScript
import { useBoardStore } from "@/stores/board-store";
|
|
import type { Priority } from "@/types/board";
|
|
|
|
const PRIORITIES: { value: Priority; label: string; color: string }[] = [
|
|
{ value: "none", label: "None", color: "oklch(50% 0 0 / 30%)" },
|
|
{ value: "low", label: "Low", color: "oklch(60% 0.15 240)" },
|
|
{ value: "medium", label: "Medium", color: "oklch(70% 0.15 85)" },
|
|
{ value: "high", label: "High", color: "oklch(60% 0.15 55)" },
|
|
{ value: "urgent", label: "Urgent", color: "oklch(55% 0.15 25)" },
|
|
];
|
|
|
|
interface PriorityPickerProps {
|
|
cardId: string;
|
|
priority: Priority;
|
|
}
|
|
|
|
export function PriorityPicker({ cardId, priority }: PriorityPickerProps) {
|
|
const updateCard = useBoardStore((s) => s.updateCard);
|
|
|
|
return (
|
|
<div className="flex flex-col gap-2">
|
|
<h4 className="font-mono text-xs uppercase tracking-widest text-pylon-text-secondary">
|
|
Priority
|
|
</h4>
|
|
<div className="flex flex-wrap gap-1.5">
|
|
{PRIORITIES.map(({ value, label, color }) => (
|
|
<button
|
|
key={value}
|
|
onClick={() => updateCard(cardId, { priority: value })}
|
|
aria-pressed={priority === value}
|
|
className={`rounded-full px-3 py-1 text-xs font-medium transition-all ${
|
|
priority === value
|
|
? "text-white shadow-sm"
|
|
: "text-pylon-text-secondary hover:text-pylon-text"
|
|
}`}
|
|
style={{
|
|
backgroundColor: priority === value ? color : undefined,
|
|
border: priority !== value ? `1px solid ${color}` : `1px solid transparent`,
|
|
}}
|
|
>
|
|
{label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|