feat(frontend): add UI components

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

@@ -0,0 +1,41 @@
+import Link from "next/link";
+import { Badge } from "@/components/ui/badge";
+import { getDifficultyColor, capitalize } from "@/lib/utils";
+import type { QuestionListItem } from "@/types";
+
+interface QuestionCardProps {
+  question: QuestionListItem;
+}
+
+export function QuestionCard({ question }: QuestionCardProps) {
+  return (
+    <Link
+      href={`/questions/${question.slug}`}
+      className="block p-4 rounded-lg border border-[var(--border)] bg-[var(--card)] hover:border-[var(--primary)] transition-colors"
+    >
+      <div className="flex items-start justify-between gap-4 mb-3">
+        <h3 className="font-semibold">{question.title}</h3>
+        <Badge className={getDifficultyColor(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">
+            {cat.name}
+          </Badge>
+        ))}
+      </div>
+
+      <div className="flex items-center gap-4 text-sm text-[var(--muted-foreground)]">
+        {question.leetcode_id && (
+          <span>LeetCode #{question.leetcode_id}</span>
+        )}
+        {question.patterns.length > 0 && (
+          <span>{question.patterns.map((p) => p.name).join(", ")}</span>
+        )}
+      </div>
+    </Link>
+  );
+}

frontend/src/components/ui/badge.tsx

@@ -0,0 +1,28 @@
+import { cn } from "@/lib/utils";
+
+interface BadgeProps {
+  children: React.ReactNode;
+  className?: string;
+  variant?: "default" | "outline";
+}
+
+export function Badge({
+  children,
+  className,
+  variant = "default",
+}: 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)]",
+        className
+      )}
+    >
+      {children}
+    </span>
+  );
+}

frontend/src/components/ui/card.tsx

@@ -0,0 +1,39 @@
+import { cn } from "@/lib/utils";
+
+interface CardProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function Card({ children, className }: CardProps) {
+  return (
+    <div
+      className={cn(
+        "rounded-lg border border-[var(--border)] bg-[var(--card)] p-6",
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function CardHeader({ children, className }: CardProps) {
+  return <div className={cn("mb-4", className)}>{children}</div>;
+}
+
+export function CardTitle({ children, className }: CardProps) {
+  return <h3 className={cn("text-lg font-semibold", className)}>{children}</h3>;
+}
+
+export function CardDescription({ children, className }: CardProps) {
+  return (
+    <p className={cn("text-sm text-[var(--muted-foreground)]", className)}>
+      {children}
+    </p>
+  );
+}
+
+export function CardContent({ children, className }: CardProps) {
+  return <div className={cn("", className)}>{children}</div>;
+}

frontend/src/components/ui/code-block.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { useState } from "react";
+
+interface CodeBlockProps {
+  code: string;
+  language?: string;
+}
+
+export function CodeBlock({ code, language = "python" }: CodeBlockProps) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div className="relative group">
+      <div className="absolute right-2 top-2 opacity-0 group-hover:opacity-100 transition-opacity">
+        <button
+          onClick={handleCopy}
+          className="px-2 py-1 text-xs bg-[var(--secondary)] rounded hover:bg-[var(--muted)] transition-colors"
+        >
+          {copied ? "Copied!" : "Copy"}
+        </button>
+      </div>
+      <div className="text-xs text-[var(--muted-foreground)] mb-1">
+        {language}
+      </div>
+      <pre className="bg-[var(--secondary)] p-4 rounded-lg overflow-x-auto text-sm">
+        <code>{code}</code>
+      </pre>
+    </div>
+  );
+}