39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
TypeScript
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>
|
|
);
|
|
}
|