the data is entring

Author: ft4bhi

src/app/api/events/[id]/route.ts

@@ -3,6 +3,16 @@ import { db } from "@/lib/db";
 import { events } from "@/lib/db/schema";
 import { eq } from "drizzle-orm";
 
+
+// GET one event
+export async function GET(_: Request, { params }: { params: { id: string } }) {
+  const result = await db.select().from(events).where(eq(events.id, params.id));
+  if (!result[0]) {
+    return NextResponse.json({ error: "Not found" }, { status: 404 });
+  }
+  return NextResponse.json(result[0]);
+}
+
 // Update event
 export async function PUT(req: Request, { params }: { params: { id: string } }) {
   const data = await req.json();

src/app/events/[id]/edit/page.tsx

@@ -1,3 +1,4 @@
+// New Event Page - src/app/events/[id]/edit/page.tsx
 "use client";
 
 import { useState } from "react";

src/app/events/[id]/page.tsx

@@ -0,0 +1,39 @@
+import { notFound } from "next/navigation";
+
+export default async function EventDetailPage({
+  params,
+}: {
+  params: { id: string };
+}) {
+  const { id } = params;
+
+  const baseUrl =
+    process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3000";
+
+  const res = await fetch(`${baseUrl}/api/events/${id}`, {
+    cache: "no-store",
+  });
+
+  if (!res.ok) return notFound();
+
+  const event = await res.json();
+
+  return (
+    <div className="max-w-2xl mx-auto p-6 space-y-4">
+      <h1 className="text-3xl font-bold">{event.title}</h1>
+      <p className="text-gray-600">{event.venue}</p>
+      <p className="text-gray-500">
+        {new Date(event.date).toLocaleDateString()} at {event.time}
+      </p>
+      {event.image && (
+        <img
+          src={event.image}
+          alt={event.title}
+          className="w-full rounded-lg shadow"
+        />
+      )}
+      <p className="mt-4 whitespace-pre-line">{event.description}</p>
+    </div>
+  );
+}
+

src/app/events/page.tsx

@@ -1,3 +1,4 @@
+// Admin Events Page - src/app/events/page.tsx
 "use client";
 
 import { useState, useEffect } from "react";
@@ -46,28 +47,33 @@ export default function AdminEventsPage() {
           </tr>
         </thead>
         <tbody>
-          {events.map((e: Event) => (
-            <tr key={e.id} className="border-t">
-              <td className="p-2">{e.title}</td>
-              <td className="p-2">{e.venue}</td>
-              <td className="p-2">{new Date(e.date).toLocaleDateString()}</td>
-              <td className="p-2 flex gap-2">
-                <button
-                  onClick={() => router.push(`/events/${e.id}/edit`)}
-                  className="p-1 bg-yellow-300 rounded"
-                >
-                  <Pencil className="w-4 h-4" />
-                </button>
-                <button
-                  onClick={() => deleteEvent(e.id)}
-                  className="p-1 bg-red-500 text-white rounded"
-                >
-                  <Trash className="w-4 h-4" />
-                </button>
-              </td>
-            </tr>
-          ))}
-        </tbody>
+  {events.map((e: Event) => (
+    <tr
+      key={e.id}
+      className="border-t cursor-pointer hover:bg-gray-50"
+      onClick={() => router.push(`/events/${e.id}`)}
+    >
+      <td className="p-2">{e.title}</td>
+      <td className="p-2">{e.venue}</td>
+      <td className="p-2">{new Date(e.date).toLocaleDateString()}</td>
+      <td className="p-2 flex gap-2" onClick={(ev) => ev.stopPropagation()}>
+        <button
+          onClick={() => router.push(`/events/${e.id}/edit`)}
+          className="p-1 bg-yellow-300 rounded"
+        >
+          <Pencil className="w-4 h-4" />
+        </button>
+        <button
+          onClick={() => deleteEvent(e.id)}
+          className="p-1 bg-red-500 text-white rounded"
+        >
+          <Trash className="w-4 h-4" />
+        </button>
+      </td>
+    </tr>
+  ))}
+</tbody>
+
       </table>
     </div>
   );