feat: add RelatedPrompts component for internal linking (SEO + engagement)

src/components/prompts/related-prompts.tsx

@@ -0,0 +1,92 @@
+import Link from "next/link"
+import { Play, Star } from "lucide-react"
+import { Card, CardContent } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import prisma from "@/lib/prisma"
+
+interface RelatedPromptsProps {
+    currentSlug: string
+    category?: string | null
+    tags?: string[]
+    limit?: number
+}
+
+/**
+ * Displays related prompts based on same category/tags.
+ * Improves internal linking for SEO and user engagement.
+ */
+export async function RelatedPrompts({
+    currentSlug,
+    category,
+    tags = [],
+    limit = 4,
+}: RelatedPromptsProps) {
+    try {
+        // Find prompts in the same category or with overlapping tags
+        const relatedPrompts = await prisma.prompt.findMany({
+            where: {
+                visibility: 'public',
+                slug: { not: currentSlug },
+                OR: [
+                    ...(category ? [{ category }] : []),
+                    ...(tags.length > 0 ? [{ tags: { hasSome: tags } }] : []),
+                ],
+            },
+            select: {
+                slug: true,
+                title: true,
+                description: true,
+                category: true,
+                totalRuns: true,
+                starsCount: true,
+                creator: {
+                    select: { name: true, username: true },
+                },
+            },
+            orderBy: { totalRuns: 'desc' },
+            take: limit,
+        })
+
+        if (relatedPrompts.length === 0) return null
+
+        return (
+            <section className="mt-12 pt-8 border-t border-border">
+                <h2 className="text-xl font-semibold mb-4">Related Prompts</h2>
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+                    {relatedPrompts.map((prompt) => (
+                        <Link key={prompt.slug} href={`/p/${prompt.slug}`}>
+                            <Card className="h-full group hover:border-primary/50 hover:shadow-md transition-all">
+                                <CardContent className="p-4 flex flex-col h-full">
+                                    {prompt.category && (
+                                        <Badge variant="secondary" className="w-fit mb-2 text-xs">
+                                            {prompt.category}
+                                        </Badge>
+                                    )}
+                                    <h3 className="font-medium text-sm mb-1 group-hover:text-primary transition-colors line-clamp-2">
+                                        {prompt.title}
+                                    </h3>
+                                    <p className="text-xs text-muted-foreground mb-3 flex-1 line-clamp-2">
+                                        {prompt.description}
+                                    </p>
+                                    <div className="flex items-center gap-3 text-xs text-muted-foreground">
+                                        <span className="flex items-center gap-1">
+                                            <Play className="h-3 w-3" />
+                                            {prompt.totalRuns}
+                                        </span>
+                                        <span className="flex items-center gap-1">
+                                            <Star className="h-3 w-3" />
+                                            {prompt.starsCount}
+                                        </span>
+                                    </div>
+                                </CardContent>
+                            </Card>
+                        </Link>
+                    ))}
+                </div>
+            </section>
+        )
+    } catch (error) {
+        console.error('RelatedPrompts error:', error)
+        return null
+    }
+}