create project list screen

frontend/app/layout.tsx

@@ -4,7 +4,6 @@ import { siteConfig } from "@/config/site";
 import { fontSans } from "@/config/fonts";
 import { Providers } from "./providers";
 import { Navbar } from "@/components/navbar";
-import { Link } from "@nextui-org/link";
 import clsx from "clsx";
 
 export const metadata: Metadata = {
@@ -18,9 +17,9 @@ export const metadata: Metadata = {
     { media: "(prefers-color-scheme: dark)", color: "black" },
   ],
   icons: {
-    icon: "/favicon.ico",
-    shortcut: "/favicon-16x16.png",
-    apple: "/apple-touch-icon.png",
+    icon: "/favicon/favicon.ico",
+    shortcut: "/favicon/favicon-16x16.png",
+    apple: "/favicon/apple-touch-icon.png",
   },
 };
 

frontend/app/page.tsx

@@ -1,5 +1,4 @@
-import { Link } from "@nextui-org/link";
-import { button as buttonStyles } from "@nextui-org/theme";
+import { Link, button as buttonStyles } from "@nextui-org/react";
 import { siteConfig } from "@/config/site";
 import { title, subtitle } from "@/components/primitives";
 import { GithubIcon } from "@/components/icons";

frontend/app/projects/layout.tsx

@@ -1,13 +1,11 @@
-export default function BlogLayout({
+export default function ProjectsLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
   return (
-    <section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
-      <div className="inline-block max-w-lg text-center justify-center">
-        {children}
-      </div>
+    <section className="flex flex-col items-center justify-center gap-4 py-4 md:py-5">
+      {children}
     </section>
   );
 }

frontend/app/projects/page.tsx

@@ -1,9 +1,41 @@
 import { title } from "@/components/primitives";
+import { ProjectCard } from "./project-card";
 
-export default function BlogPage() {
+const projects = [
+  {
+    name: "Robot1",
+    detail: "Embeded system test",
+  },
+  {
+    name: "Battle-tested in Production",
+    detail: "All the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more.",
+  },
+  {
+    name: "bank front",
+    detail: "web frontend application for abc bank",
+  },
+  {
+    name: "bank API",
+    detail: "api server code for abc bank",
+  },
+  {
+    name: "Battle-tested in Production",
+    detail: "All the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more.",
+  },
+];
+
+export default function ProjectsPage() {
   return (
     <div>
       <h1 className={title()}>Projects</h1>
+      <div className="flex flex-wrap gap-4 mt-5">
+        {projects.map((project) => (
+          <ProjectCard
+            projectName={project.name}
+            projectDetail={project.detail}
+          />
+        ))}
+      </div>
     </div>
   );
 }

frontend/app/projects/project-card.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import {
+  Card,
+  CardHeader,
+  CardBody,
+  Divider,
+  Image,
+} from "@nextui-org/react";
+
+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>
+  );
+}

frontend/app/providers.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as React from "react";
-import { NextUIProvider } from "@nextui-org/system";
+import { NextUIProvider } from "@nextui-org/react";
 import { useRouter } from "next/navigation";
 import { ThemeProvider as NextThemesProvider } from "next-themes";
 import { ThemeProviderProps } from "next-themes/dist/types";