Chore(refactor): refactor project info into separate component

2026-09-06 23:33:30 +02:00 · 2026-07-20 16:54:45 +02:00
parent e16833ecc3
commit d489adee3c
4 changed files with 62 additions and 64 deletions
@@ -0,0 +1,37 @@
+import { useState, type ReactElement } from "react";
+import MdProcessor from "./MdProcessor";
+import projects from "../content/projects.json";
+
+export default function ProjectInfo(): ReactElement {
+    const [projIdx, setProjIdx] = useState<number>(0);
+    const prevProject = () =>
+        setProjIdx((i) => (i - 1 + projects.length) % projects.length);
+    const nextProject = () => setProjIdx((i) => (i + 1) % projects.length);
+
+    return (
+        <>
+            <h1 className="text-center m-6 text-3xl font-bold text-ctp-mauve">
+                Projects
+            </h1>
+            <div className="flex justify-center mb-6">
+                <button
+                    onClick={prevProject}
+                    className="px-3 py-1 rounded ui-btn text-ctp-text"
+                >
+                    ◀︎ Prev
+                </button>
+                <span className="self-center mx-6 font-medium">
+                    {projects[projIdx].name} ({projIdx + 1}/
+                    {projects.length})
+                </span>
+                <button
+                    onClick={nextProject}
+                    className="px-3 py-1 rounded ui-btn text-ctp-text"
+                >
+                    Next ▶︎
+                </button>
+            </div>
+            <MdProcessor repoUrl={projects[projIdx].url} />
+        </>
+    );
+}