refactor(email): improve code formatting and error handling in email route

app/components/Projects.tsx

@@ -1,85 +1,84 @@
-import React, { useEffect, useState } from "react";
+import React, {useEffect, useState} from "react";
 import Link from "next/link";
 
 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;
+    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;
 }
 
 interface ProjectsData {
-  posts: Project[];
+    posts: Project[];
 }
 
 export default function Projects() {
-  const [projects, setProjects] = useState<Project[]>([]);
-  const [isVisible, setIsVisible] = useState(false);
+    const [projects, setProjects] = useState<Project[]>([]);
+    const [isVisible, setIsVisible] = useState(false);
 
-  useEffect(() => {
-    const fetchProjects = async () => {
-      try {
-        const response = await fetch("/api/fetchAllProjects");
-        if (!response.ok) {
-          throw new Error("Failed to fetch projects from Ghost");
-        }
-        const projectsData = (await response.json()) as ProjectsData;
-        setProjects(projectsData.posts);
+    useEffect(() => {
+        const fetchProjects = async () => {
+            try {
+                const response = await fetch("/api/fetchAllProjects");
+                if (!response.ok) {
+                    console.error(`Failed to fetch projects: ${response.statusText}`);
+                    return [];
+                }
+                const projectsData = (await response.json()) as ProjectsData;
+                setProjects(projectsData.posts);
 
-        setTimeout(() => {
-          setIsVisible(true);
-        }, 250); // Delay to start the animation after Hero
-      } catch (error) {
-        console.error("Failed to fetch projects:", error);
-      }
-    };
-    fetchProjects();
-  }, []);
+                setTimeout(() => {
+                    setIsVisible(true);
+                }, 250); // Delay to start the animation after Hero
+            } catch (error) {
+                console.error("Failed to fetch projects:", error);
+            }
+        };
+        fetchProjects();
+    }, []);
 
-  console.log(projects.at(0)?.feature_image);
-
-  const numberOfProjects = projects.length;
-  return (
-    <section
-      id="projects"
-      className={`p-10 ${isVisible ? "animate-fly-in" : "opacity-0"}`}
-    >
-      <h2 className="text-3xl font-bold text-center text-gray-800">Projects</h2>
-      <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
-        {projects.map((project, index) => (
-          <Link
-            key={project.id}
-            href={{
-              pathname: `/projects/${project.slug}`,
-              query: { project: JSON.stringify(project) },
-            }}
-            className="cursor-pointer"
-          >
-            <div
-              className={`p-4 border shadow-lg bg-white/45 rounded-2xl animate-fly-in`}
-              style={{ animationDelay: `${index * 0.1}s` }}
-            >
-              <h3 className="text-2xl font-bold text-gray-800">
-                {project.title}
-              </h3>
-              <p className="mt-2 text-gray-500">{project.meta_description}</p>
-            </div>
-          </Link>
-        ))}
-        <div
-          className={`p-4 border shadow-lg bg-white/45 rounded-2xl animate-fly-in`}
-          style={{ animationDelay: `${(numberOfProjects + 1) * 0.1}s` }}
+    const numberOfProjects = projects.length;
+    return (
+        <section
+            id="projects"
+            className={`p-10 ${isVisible ? "animate-fly-in" : "opacity-0"}`}
         >
-          <h3 className="text-2xl font-bold text-gray-800">More to come</h3>
-          <p className="mt-2 text-gray-500">...</p>
-        </div>
-      </div>
-    </section>
-  );
+            <h2 className="text-3xl font-bold text-center text-gray-800">Projects</h2>
+            <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
+                {projects.map((project, index) => (
+                    <Link
+                        key={project.id}
+                        href={{
+                            pathname: `/projects/${project.slug}`,
+                            query: {project: JSON.stringify(project)},
+                        }}
+                        className="cursor-pointer"
+                    >
+                        <div
+                            className={`p-4 border shadow-lg bg-white/45 rounded-2xl animate-fly-in`}
+                            style={{animationDelay: `${index * 0.1}s`}}
+                        >
+                            <h3 className="text-2xl font-bold text-gray-800">
+                                {project.title}
+                            </h3>
+                            <p className="mt-2 text-gray-500">{project.meta_description}</p>
+                        </div>
+                    </Link>
+                ))}
+                <div
+                    className={`p-4 border shadow-lg bg-white/45 rounded-2xl animate-fly-in`}
+                    style={{animationDelay: `${(numberOfProjects + 1) * 0.1}s`}}
+                >
+                    <h3 className="text-2xl font-bold text-gray-800">More to come</h3>
+                    <p className="mt-2 text-gray-500">...</p>
+                </div>
+            </div>
+        </section>
+    );
 }