feat(patterns): tutorial system

frontend/src/components/patterns/pattern-variations.tsx

@@ -0,0 +1,38 @@
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import { Markdown } from "@/components/ui/markdown";
+import type { PatternVariation } from "@/types";
+
+interface PatternVariationsProps {
+  variations: PatternVariation[];
+}
+
+export function PatternVariations({ variations }: PatternVariationsProps) {
+  if (!variations.length) return null;
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Pattern Variations</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-4">
+          {variations.map((variation) => (
+            <div
+              key={variation.name}
+              className="border-l-2 border-[var(--primary)] pl-4"
+            >
+              <h4 className="font-semibold mb-1">{variation.name}</h4>
+              <Markdown>{variation.description}</Markdown>
+              {variation.example && (
+                <p className="text-sm text-[var(--muted-foreground)] mt-2">
+                  <span className="font-medium">Examples:</span>{" "}
+                  {variation.example}
+                </p>
+              )}
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}