wire up pages

frontend/src/app/patterns/[slug]/page.tsx

@@ -0,0 +1,63 @@
+import { getPattern, getQuestions } from "@/lib/api";
+import { QuestionCard } from "@/components/questions/question-card";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import { notFound } from "next/navigation";
+
+export default async function PatternDetailPage({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const { slug } = await params;
+
+  let pattern;
+  let questions;
+  try {
+    [pattern, questions] = await Promise.all([
+      getPattern(slug),
+      getQuestions({ pattern: slug, limit: 50 }),
+    ]);
+  } catch {
+    notFound();
+  }
+
+  return (
+    <div className="max-w-4xl mx-auto space-y-8">
+      <div>
+        <h1 className="text-3xl font-bold mb-2">{pattern.name}</h1>
+        <p className="text-[var(--muted-foreground)]">
+          {pattern.question_count} questions using this pattern
+        </p>
+      </div>
+
+      {pattern.description && (
+        <Card>
+          <CardHeader>
+            <CardTitle>Description</CardTitle>
+          </CardHeader>
+          <CardContent>{pattern.description}</CardContent>
+        </Card>
+      )}
+
+      {pattern.when_to_use && (
+        <Card>
+          <CardHeader>
+            <CardTitle>When to Use</CardTitle>
+          </CardHeader>
+          <CardContent className="whitespace-pre-wrap">
+            {pattern.when_to_use}
+          </CardContent>
+        </Card>
+      )}
+
+      <div className="space-y-4">
+        <h2 className="text-xl font-semibold">Questions</h2>
+        <div className="grid gap-4">
+          {questions.items.map((question) => (
+            <QuestionCard key={question.id} question={question} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}