refactor(page): standardize formatting and improve error handling in ProjectDetails component

app/Projects/[slug]/page.tsx

@@ -1,167 +0,0 @@
-"use client";
-
-import {
-  useRouter,
-  useSearchParams,
-  useParams,
-  usePathname,
-} from "next/navigation";
-import { useEffect, useState } from "react";
-
-import Link from "next/link";
-
-import Footer_Back from "@/app/components/Footer_Back";
-import Header from "@/app/components/Header";
-import Image from "next/image";
-import "@/app/styles/ghostContent.css"; // Import the global styles
-
-interface Project {
-  slug: string;
-  id: string;
-  title: string;
-  feature_image: string;
-  visibility: string;
-  published_at: string;
-  updated_at: string;
-  html: string;
-  reading_time: number;
-  meta_description: string;
-}
-
-const ProjectDetails = () => {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const params = useParams();
-  const pathname = usePathname();
-  const [project, setProject] = useState<Project | null>(null);
-  const [isVisible, setIsVisible] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    setTimeout(() => {
-      setIsVisible(true);
-    }, 150); // Delay to start the animation
-  }, []);
-
-  useEffect(() => {
-    const projectData = searchParams.get("project");
-    if (projectData) {
-      setProject(JSON.parse(projectData as string));
-      // Remove the project data from the URL without reloading the page
-      if (typeof window !== "undefined") {
-        const url = new URL(window.location.href);
-        url.searchParams.delete("project");
-        window.history.replaceState({}, "", url.toString());
-      }
-    } else {
-      // Fetch project data based on slug from URL
-      const slug = params.slug as string;
-      try {
-        fetchProjectData(slug);
-      } catch (error) {
-        console.log(error);
-        setError("Failed to fetch project data");
-      }
-    }
-  }, [searchParams, router, params, pathname]);
-
-  const fetchProjectData = async (slug: string) => {
-    try {
-      const response = await fetch(`/api/fetchProject?slug=${slug}`);
-      if (!response.ok) {
-        throw new Error("Failed to fetch project data");
-      }
-      const projectData = (await response.json()) as { posts: Project[] };
-      if (projectData.posts.length === 0) {
-        throw new Error("Project not found");
-      }
-      setProject(projectData.posts[0]);
-    } catch (error) {
-      console.error("Failed to fetch project data:", error);
-      setError("Project not found");
-    }
-  };
-
-  if (error) {
-    return (
-      <div className="min-h-screen flex flex-col bg-radiant">
-        <Header />
-        <div className="flex-grow flex items-center justify-center">
-          <div className="text-center p-10 bg-white dark:bg-gray-700 rounded shadow-md">
-            <h1 className="text-6xl font-bold text-gray-800 dark:text-white">
-              404
-            </h1>
-            <p className="mt-4 text-xl text-gray-600 dark:text-gray-300">
-              {error}
-            </p>
-            <Link
-              href="/"
-              className="mt-6 inline-block text-blue-500 hover:underline"
-            >
-              Go Back Home
-            </Link>
-          </div>
-        </div>
-        <Footer_Back />
-      </div>
-    );
-  }
-
-  if (!project) {
-    return (
-      <div className="min-h-screen flex flex-col bg-radiant">
-        <Header />
-        <div className="flex-grow flex items-center justify-center">
-          <div className="loader ease-linear rounded-full border-8 border-t-8 border-gray-200 h-32 w-32"></div>
-        </div>
-        <Footer_Back />
-      </div>
-    );
-  }
-
-  const featureImageUrl = project.feature_image
-    ? `/api/fetchImage?url=${encodeURIComponent(project.feature_image)}`
-    : "";
-
-  return (
-    <div
-      className={`min-h-screen flex flex-col bg-radiant ${isVisible ? "animate-fly-in" : "opacity-0"}`}
-    >
-      <Header />
-      <div className="flex-grow">
-        <div className="flex justify-center mt-14 md:mt-28 px-4 md:px-0">
-          {featureImageUrl && (
-            <div className="relative w-full max-w-4xl h-0 pb-[56.25%] rounded-2xl overflow-hidden">
-              <Image
-                src={featureImageUrl}
-                alt={project.title}
-                fill
-                style={{ objectFit: "cover" }}
-                className="rounded-2xl"
-                priority={true}
-              />
-            </div>
-          )}
-        </div>
-        <div className="flex items-center justify-center mt-4">
-          <h1 className="text-4xl md:text-6xl font-bold text-gray-600">
-            {project.title}
-          </h1>
-        </div>
-
-        {/* Project Content */}
-        <div className="p-10 pt-12">
-          <div className="flex flex-col p-8 bg-gradient-to-br from-white/60 to-white/30 backdrop-blur-lg rounded-2xl shadow-xl">
-            <div
-              className="content mt-4 text-gray-600 text-lg leading-relaxed"
-              dangerouslySetInnerHTML={{ __html: project.html }}
-            ></div>
-          </div>
-        </div>
-      </div>
-      <Footer_Back />
-    </div>
-  );
-};
-
-export default ProjectDetails;

app/projects/[slug]/page.tsx

@@ -0,0 +1,169 @@
+"use client";
+
+import {
+    useRouter,
+    useSearchParams,
+    useParams,
+    usePathname,
+} from "next/navigation";
+import {useEffect, useState} from "react";
+
+import Link from "next/link";
+
+import Footer_Back from "@/app/components/Footer_Back";
+import Header from "@/app/components/Header";
+import Image from "next/image";
+import "@/app/styles/ghostContent.css"; // Import the global styles
+
+interface Project {
+    slug: string;
+    id: string;
+    title: string;
+    feature_image: string;
+    visibility: string;
+    published_at: string;
+    updated_at: string;
+    html: string;
+    reading_time: number;
+    meta_description: string;
+}
+
+const ProjectDetails = () => {
+    const router = useRouter();
+    const searchParams = useSearchParams();
+    const params = useParams();
+    const pathname = usePathname();
+    const [project, setProject] = useState<Project | null>(null);
+    const [isVisible, setIsVisible] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        setTimeout(() => {
+            setIsVisible(true);
+        }, 150); // Delay to start the animation
+    }, []);
+
+    useEffect(() => {
+        const projectData = searchParams.get("project");
+        if (projectData) {
+            setProject(JSON.parse(projectData as string));
+            // Remove the project data from the URL without reloading the page
+            if (typeof window !== "undefined") {
+                const url = new URL(window.location.href);
+                url.searchParams.delete("project");
+                window.history.replaceState({}, "", url.toString());
+            }
+        } else {
+            // Fetch project data based on slug from URL
+            const slug = params.slug as string;
+            try {
+                fetchProjectData(slug);
+            } catch (error) {
+                console.log(error);
+                setError("Failed to fetch project data");
+            }
+        }
+    }, [searchParams, router, params, pathname]);
+
+    const fetchProjectData = async (slug: string) => {
+        try {
+            const response = await fetch(`/api/fetchProject?slug=${slug}`);
+            if (!response.ok) {
+                setError("Failed to fetch project Data");
+            }
+            const projectData = (await response.json()) as { posts: Project[] };
+            if (projectData.posts.length === 0) {
+                setError("Project not found");
+            }
+            setProject(projectData.posts[0]);
+        } catch (error) {
+            console.error("Failed to fetch project data:", error);
+            setError("Project not found");
+        }
+    };
+
+    if (error) {
+        return (
+            <div className="min-h-screen flex flex-col bg-radiant">
+                <Header/>
+                <div className="flex-grow flex items-center justify-center">
+                    <div className="text-center p-10 bg-white dark:bg-gray-700 rounded shadow-md">
+                        <h1 className="text-6xl font-bold text-gray-800 dark:text-white">
+                            404
+                        </h1>
+                        <p className="mt-4 text-xl text-gray-600 dark:text-gray-300">
+                            {error}
+                        </p>
+                        <Link
+                            href="/"
+                            className="mt-6 inline-block text-blue-500 hover:underline"
+                        >
+                            Go Back Home
+                        </Link>
+                    </div>
+                </div>
+                <Footer_Back/>
+            </div>
+        );
+    }
+
+    if (!project) {
+        return (
+            <div className="min-h-screen flex flex-col bg-radiant">
+                <Header/>
+                <div className="flex-grow flex items-center justify-center">
+                    <div
+                        className="loader ease-linear rounded-full border-8 border-t-8 border-gray-200 h-32 w-32"></div>
+                </div>
+                <Footer_Back/>
+            </div>
+        );
+    }
+
+    const featureImageUrl = project.feature_image
+        ? `/api/fetchImage?url=${encodeURIComponent(project.feature_image)}`
+        : "";
+
+    return (
+        <div
+            className={`min-h-screen flex flex-col bg-radiant ${isVisible ? "animate-fly-in" : "opacity-0"}`}
+        >
+            <Header/>
+            <div className="flex-grow">
+                <div className="flex justify-center mt-14 md:mt-28 px-4 md:px-0">
+                    {featureImageUrl && (
+                        <div className="relative w-full max-w-4xl h-0 pb-[56.25%] rounded-2xl overflow-hidden">
+                            <Image
+                                src={featureImageUrl}
+                                alt={project.title}
+                                fill
+                                style={{objectFit: "cover"}}
+                                className="rounded-2xl"
+                                priority={true}
+                            />
+                        </div>
+                    )}
+                </div>
+                <div className="flex items-center justify-center mt-4">
+                    <h1 className="text-4xl md:text-6xl font-bold text-gray-600">
+                        {project.title}
+                    </h1>
+                </div>
+
+                {/* Project Content */}
+                <div className="p-10 pt-12">
+                    <div
+                        className="flex flex-col p-8 bg-gradient-to-br from-white/60 to-white/30 backdrop-blur-lg rounded-2xl shadow-xl">
+                        <div
+                            className="content mt-4 text-gray-600 text-lg leading-relaxed"
+                            dangerouslySetInnerHTML={{__html: project.html}}
+                        ></div>
+                    </div>
+                </div>
+            </div>
+            <Footer_Back/>
+        </div>
+    );
+};
+
+export default ProjectDetails;