badge colour variants

frontend/src/components/ui/badge.tsx

@@ -1,26 +1,50 @@
 import { cn } from "@/lib/utils";
 
+type BadgeVariant =
+  | "default"
+  | "outline"
+  | "difficulty-easy"
+  | "difficulty-medium"
+  | "difficulty-hard"
+  | "category"
+  | "pattern"
+  | "optimal";
+
 interface BadgeProps {
   children: React.ReactNode;
   className?: string;
-  variant?: "default" | "outline";
+  variant?: BadgeVariant;
+  "aria-label"?: string;
 }
 
+const variantClasses: Record<BadgeVariant, string> = {
+  default: "bg-[var(--secondary)] text-[var(--secondary-foreground)]",
+  outline: "border border-[var(--border)] text-[var(--muted-foreground)]",
+  "difficulty-easy":
+    "text-[var(--difficulty-easy)] bg-[var(--difficulty-easy-bg)]",
+  "difficulty-medium":
+    "text-[var(--difficulty-medium)] bg-[var(--difficulty-medium-bg)]",
+  "difficulty-hard":
+    "text-[var(--difficulty-hard)] bg-[var(--difficulty-hard-bg)]",
+  category: "text-[var(--badge-category)] bg-[var(--badge-category-bg)]",
+  pattern: "text-[var(--badge-pattern)] bg-[var(--badge-pattern-bg)]",
+  optimal: "text-[var(--badge-optimal)] bg-[var(--badge-optimal-bg)]",
+};
+
 export function Badge({
   children,
   className,
   variant = "default",
+  "aria-label": ariaLabel,
 }: BadgeProps) {
   return (
     <span
       className={cn(
         "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium",
-        variant === "default" &&
-          "bg-[var(--secondary)] text-[var(--secondary-foreground)]",
-        variant === "outline" &&
-          "border border-[var(--border)] text-[var(--muted-foreground)]",
+        variantClasses[variant],
         className
       )}
+      aria-label={ariaLabel}
     >
       {children}
     </span>