create folders table

frontend/app/projects/[id]/page.tsx

@@ -0,0 +1,64 @@
+"use client";
+import { useEffect, useState } from "react";
+import Config from "@/config/config";
+const apiServer = Config.apiServer;
+
+/**
+ * fetch folder records
+ *
+ * @param {string} url - API endpoint url
+ * @returns {Promise<Array>} - project record array
+ * @throws {Error}
+ */
+async function fetchFolders(url) {
+  try {
+    const response = await fetch(url, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`);
+    }
+
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error("Error fetching data:", error.message);
+  }
+}
+
+export default function Page({ params }: { params: { id: string } }) {
+  const [folders, setFolders] = useState([]);
+  const url = `${apiServer}/folders?projectId=${params.id}`;
+
+  useEffect(() => {
+    async function fetchDataEffect() {
+      try {
+        const data = await fetchFolders(url);
+        setFolders(data);
+      } catch (error) {
+        console.error("Error in effect:", error.message);
+      }
+    }
+
+    fetchDataEffect();
+  }, []);
+
+  return (
+    <div>
+      <div>Project: {params.id}</div>
+      <div className="flex flex-wrap gap-4 mt-5">
+        {folders.map((folder, index) => (
+          <div key={index}>
+            <div>{folder.name}</div>
+            <div>{folder.detail}</div>
+            <div>{folder.projectId}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

frontend/app/projects/layout.tsx

@@ -8,4 +8,4 @@ export default function ProjectsLayout({
       {children}
       </>
   );
-}
+}

frontend/app/projects/page.tsx

@@ -149,7 +149,7 @@ export default function ProjectsPage() {
         projectName.text,
         projectDetail.text
       );
-      setProjects([...projects, newProject])
+      setProjects([...projects, newProject]);
       closeModal();
     }
   };

frontend/app/projects/project-card.tsx

@@ -6,26 +6,29 @@ import {
   Divider,
   Image,
 } from "@nextui-org/react";
+import NextLink from "next/link";
 
 export function ProjectCard({ projectName, projectDetail }) {
   return (
-    <Card className="w-[250px]">
-      <CardHeader className="flex gap-3">
-        <Image
-          alt="nextui logo"
-          height={40}
-          radius="sm"
-          src="https://avatars.githubusercontent.com/u/86160567?s=200&v=4"
-          width={40}
-        />
-        <div className="flex flex-col">
-          <p className="text-md">{ projectName }</p>
-        </div>
-      </CardHeader>
-      <Divider />
-      <CardBody>
-        <p>{projectDetail}</p>
-      </CardBody>
-    </Card>
+    <NextLink href={`/projects/${1}`}>
+      <Card className="w-[250px] hover:bg-slate-200">
+        <CardHeader className="flex gap-3">
+          <Image
+            alt="nextui logo"
+            height={40}
+            radius="sm"
+            src="https://avatars.githubusercontent.com/u/86160567?s=200&v=4"
+            width={40}
+          />
+          <div className="flex flex-col">
+            <p className="text-md">{projectName}</p>
+          </div>
+        </CardHeader>
+        <Divider />
+        <CardBody>
+          <p>{projectDetail}</p>
+        </CardBody>
+      </Card>
+    </NextLink>
   );
 }