90 lines
2.6 KiB
TypeScript
90 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { ChevronDown, Check } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { getImportanceColors } from "@/lib/tech-colors";
|
|
|
|
interface ImportanceBadgeProps {
|
|
importance: string;
|
|
onImportanceChange: (newImportance: string) => void;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
export function ImportanceBadge({
|
|
importance,
|
|
onImportanceChange,
|
|
disabled = false,
|
|
}: ImportanceBadgeProps) {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const colors = getImportanceColors(importance);
|
|
|
|
const handleImportanceChange = (newImportance: string) => {
|
|
onImportanceChange(newImportance);
|
|
setIsOpen(false);
|
|
};
|
|
|
|
const IMPORTANCE_LABELS = {
|
|
incontournable: "Incontournable",
|
|
majeure: "Majeure",
|
|
standard: "Standard",
|
|
};
|
|
|
|
return (
|
|
<DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className={`h-6 px-2 text-xs font-medium border ${colors.bg} ${
|
|
colors.text
|
|
} ${colors.border} hover:opacity-80 transition-all ${
|
|
disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"
|
|
}`}
|
|
disabled={disabled}
|
|
>
|
|
<span
|
|
className={`w-2 h-2 rounded-full ${colors.text.replace(
|
|
"text-",
|
|
"bg-"
|
|
)}`}
|
|
/>
|
|
{IMPORTANCE_LABELS[importance as keyof typeof IMPORTANCE_LABELS] ||
|
|
importance}
|
|
{!disabled && <ChevronDown className="w-3 h-3 ml-1" />}
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
|
|
{!disabled && (
|
|
<DropdownMenuContent align="end" className="w-40">
|
|
{Object.entries(IMPORTANCE_LABELS).map(([key, label]) => {
|
|
const itemColors = getImportanceColors(key);
|
|
return (
|
|
<DropdownMenuItem
|
|
key={key}
|
|
onClick={() => handleImportanceChange(key)}
|
|
className="flex items-center gap-2"
|
|
>
|
|
<span
|
|
className={`w-2 h-2 rounded-full ${itemColors.text.replace(
|
|
"text-",
|
|
"bg-"
|
|
)}`}
|
|
/>
|
|
{label}
|
|
{importance === key && <Check className="w-3 h-3 ml-auto" />}
|
|
</DropdownMenuItem>
|
|
);
|
|
})}
|
|
</DropdownMenuContent>
|
|
)}
|
|
</DropdownMenu>
|
|
);
|
|
}
|