vendor slugs routes instead of ids

app/(auth)/vendors/[slug]/page.tsx

@@ -0,0 +1,37 @@
+// app/(auth)/vendors/[id]/page.tsx
+import { notFound } from 'next/navigation'
+import { prisma } from '@/lib/prisma'
+import { VendorDetailPage } from '@/components/vendor/VendorDetailPage'
+
+interface PageProps {
+    params: {
+        slug: string
+    }
+}
+
+export default async function Page({ params }: PageProps) {
+    const { slug } = params
+
+    const vendor = await prisma.vendor.findUnique({
+        where: { slug },
+        include: {
+            address: true,
+            events: {
+                select: {
+                id: true,
+                name: true,
+                date: true,
+                },
+                orderBy: {
+                date: 'asc',
+                },
+            },
+        },
+    })
+
+    if (!vendor) {
+        notFound()
+    }
+
+    return <VendorDetailPage vendor={vendor} />
+}