update

app/Projects/[slug]/page.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { useParams, useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import Link from "next/link";
+
+interface Project {
+  id: string;
+  title: string;
+  slug: string;
+  description: string;
+  link: string;
+  image: string;
+}
+
+export default function ProjectDetail() {
+  const params = useParams();
+  const router = useRouter();
+  const { slug } = params as { slug: string };
+  const [project, setProject] = useState<Project | null>(null);
+
+  useEffect(() => {
+    if (slug) {
+      fetch("/data/projects.json")
+        .then((res) => res.json())
+        .then((data: Project[]) => {
+          const found = data.find((proj) => proj.slug === slug);
+          if (found) {
+            setProject(found);
+
+            // Log the project view
+            fetch("/api/stats", {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json",
+              },
+              body: JSON.stringify({
+                type: "project_view",
+                projectId: found.id,
+              }),
+            }).catch((err) => console.error("Failed to log project view", err));
+          } else {
+            // Redirect to 404 if project not found
+            router.replace("/not-found");
+          }
+        });
+    }
+  }, [slug, router]);
+
+  if (!project) {
+    return <div className="p-10 text-center">Loading...</div>;
+  }
+
+  return (
+    <div className="p-10 bg-gray-100 dark:bg-gray-800 min-h-screen">
+      <h1 className="text-4xl font-bold text-gray-800 dark:text-white">
+        {project.title}
+      </h1>
+      <img
+        src={project.image}
+        alt={project.title}
+        className="mt-4 w-full max-w-md rounded shadow"
+      />
+      <p className="mt-4 text-gray-600 dark:text-gray-300">
+        {project.description}
+      </p>
+      <Link
+        href={project.link}
+        className="mt-4 inline-block text-blue-500 hover:underline"
+      >
+        Visit Project
+      </Link>
+    </div>
+  );
+}