badge colour variants

frontend/src/components/questions/question-card.tsx

@@ -1,6 +1,6 @@
 import Link from "next/link";
 import { Badge } from "@/components/ui/badge";
-import { getDifficultyColor, capitalize } from "@/lib/utils";
+import { getDifficultyVariant, getDifficultyLabel, capitalize } from "@/lib/utils";
 import type { QuestionListItem } from "@/types";
 
 interface QuestionCardProps {
@@ -15,25 +15,32 @@ export function QuestionCard({ question }: QuestionCardProps) {
     >
       <div className="flex items-start justify-between gap-4 mb-3">
         <h3 className="font-semibold">{question.title}</h3>
-        <Badge className={getDifficultyColor(question.difficulty)}>
+        <Badge
+          variant={getDifficultyVariant(question.difficulty)}
+          aria-label={getDifficultyLabel(question.difficulty)}
+        >
           {capitalize(question.difficulty)}
         </Badge>
       </div>
 
       <div className="flex flex-wrap gap-2 mb-3">
         {question.categories.map((cat) => (
-          <Badge key={cat.id} variant="outline">
+          <Badge key={cat.id} variant="category">
             {cat.name}
           </Badge>
         ))}
       </div>
 
-      <div className="flex items-center gap-4 text-sm text-[var(--muted-foreground)]">
+      <div className="flex flex-wrap items-center gap-2 text-sm">
+        {question.patterns.map((p) => (
+          <Badge key={p.id} variant="pattern">
+            {p.name}
+          </Badge>
+        ))}
         {question.leetcode_id && (
-          <span>LeetCode #{question.leetcode_id}</span>
-        )}
-        {question.patterns.length > 0 && (
-          <span>{question.patterns.map((p) => p.name).join(", ")}</span>
+          <span className="text-[var(--muted-foreground)]">
+            LeetCode #{question.leetcode_id}
+          </span>
         )}
       </div>
     </Link>

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>