feat: importance in db and mentorcard home colors

2025-08-27 11:51:43 +02:00
parent df1fd24e84
commit aee5d74445
13 changed files with 388 additions and 94 deletions
--- a/components/admin/skills/importance-badge.tsx
+++ b/components/admin/skills/importance-badge.tsx
@@ -0,0 +1,89 @@
+"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>
+  );
+}