Project Details page

src/app/components/ProjectDetails.tsx

@@ -0,0 +1,17 @@
+"use client";
+import { Project } from "@shared/models";
+
+interface ProjectDetailsProps {
+  project: Project;
+}
+
+export function ProjectDetails({
+  project: { title, description },
+}: ProjectDetailsProps): ReturnType<React.FC> {
+  return (
+    <section className="mt-12 sm:mt-6">
+      <h1 className="text-3xl text-primary">{title}</h1>
+      <div className="mt-4 text-secondary">{description}</div>
+    </section>
+  );
+}

src/app/components/ProjectTile.test.tsx

@@ -3,6 +3,7 @@ import { Project } from "@shared/models";
 import { ProjectTile } from "@components/ProjectTile";
 
 const project: Project = {
+  id: "1",
   title: "Test Project",
   url: "https://testproject.com",
   category: "Chrome Extension",
@@ -11,6 +12,7 @@ const project: Project = {
     light: "/test/light.jpg",
     dark: "/test/dark.jpg",
   },
+  description: <>Test project description</>,
 };
 
 describe("ProjectTile", () => {

src/app/components/ProjectTile.tsx

@@ -4,8 +4,8 @@ import { Project } from "@shared/models";
 import { ThemedImage } from "@components/ThemedImage";
 
 export function ProjectTile({
+  id,
   title,
-  url,
   category,
   repo,
   images: { light, dark },
@@ -20,7 +20,7 @@ export function ProjectTile({
       >
         <FiCode />
       </Link>
-      <Link href={url} target="_blank" aria-label={`View ${title} ${category}`}>
+      <Link href={`/projects/${id}`} aria-label={`View ${title} ${category}`}>
         <div className="flex flex-col relative divide-y border rounded-xl shadow-md hover:shadow-xl">
           <ThemedImage
             lightSrc={light}

src/app/components/Projects.test.tsx

@@ -6,6 +6,7 @@ import { Projects } from "@components/Projects";
 jest.mock("../data/projects", () => ({
   projects: [
     {
+      id: "1",
       title: "First project",
       category: "Chrome Extension",
       url: "https://www.example.com",
@@ -14,8 +15,10 @@ jest.mock("../data/projects", () => ({
         light: "/images/first-project-light.png",
         dark: "/images/first-project-dark.png",
       },
+      description: <>First project description</>,
     },
     {
+      id: "2",
       title: "Second project",
       category: "Chrome Extension",
       url: "https://www.example.com",
@@ -24,8 +27,10 @@ jest.mock("../data/projects", () => ({
         light: "/images/second-project-light.png",
         dark: "/images/second-project-dark.png",
       },
+      description: <>Second project description</>,
     },
     {
+      id: "3",
       title: "Third project",
       category: "Web Development" as Category,
       url: "https://www.example.com",
@@ -34,6 +39,7 @@ jest.mock("../data/projects", () => ({
         light: "/images/third-project-light.png",
         dark: "/images/third-project-dark.png",
       },
+      description: <>Third project description</>,
     },
   ] satisfies Project[],
 }));

src/app/data/projects.tsx

@@ -0,0 +1,55 @@
+import { Project } from "@shared/models";
+import light from "@images/projects/chat-gpt-rtl.svg";
+import dark from "@images/projects/chat-gpt-rtl-dark.svg";
+
+export const projects: Project[] = [
+  {
+    id: "chat-gpt-rtl",
+    title: "ChatGPT RTL",
+    url: "https://chrome.google.com/webstore/detail/chatgpt-rtl/nabcbpmmefiigmjpopfciegmlgihkofd ",
+    category: "Chrome Extension",
+    repo: "https://github.com/gilhanan/chat-gpt-rtl",
+    images: {
+      light,
+      dark,
+    },
+    description: (
+      <div className="flex flex-col gap-4">
+        <p className="text-md">
+          ChatGPT auto right-to-left alignments for Arabic, Persian, Hebrew, and
+          more.
+        </p>
+        <p className="text-md">
+          An open-source plugin that automatically identifies right-to-left
+          paragraphs and adjusts and arranges the text in real-time.
+        </p>
+        <div>
+          <h2 className="text-lg">⭐️ Features ⭐️</h2>
+          <ul>
+            <li>
+              📝 Automatically identifies RTL paragraphs and adjusts the
+              direction in real-time.
+            </li>
+            <li>
+              ⚙️ User-friendly settings popup for configuring the enabling
+              functionality.
+            </li>
+            <li>
+              🌍 Supports the following RTL languages: Arabic, Persian, Hebrew,
+              and more.
+            </li>
+          </ul>
+        </div>
+        <div>
+          <h2 className="text-lg">💡 How to use 💡</h2>
+          <ol className="list-decimal list-inside">
+            <li>Install this extension.</li>
+            <li>Open ChatGPT discussion.</li>
+            <li>Enjoy chatting with RTL support!</li>
+          </ol>
+        </div>
+        <p>Enjoy! 🙏</p>
+      </div>
+    ),
+  },
+];

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

@@ -0,0 +1,26 @@
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { projects } from "@data/projects";
+import { ProjectDetails } from "@components/ProjectDetails";
+
+export const metadata: Metadata = {
+  title: "Project",
+};
+
+export default function ProjectPage({
+  params: { id },
+}: {
+  params: { id: string };
+}) {
+  const project = projects.find((project) => project.id === id);
+
+  if (!project) {
+    return notFound();
+  }
+
+  return <ProjectDetails project={project} />;
+}
+
+export function generateStaticParams() {
+  return projects.map(({ id }) => ({ id }));
+}

src/app/shared/models.ts

@@ -9,7 +9,9 @@ export const categories = ["Chrome Extension"] as const;
 export type Category = (typeof categories)[number];
 
 export interface Project {
+  id: string;
   title: string;
+  description: JSX.Element;
   url: string;
   category: Category;
   repo: string;