aramjonghu-site/frontend/src/components/ProjectInfo.tsx

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 (
        <>
            <div className="flex justify-between items-center gap-2 mx-4 md:mx-30 mb-6">
                <button
                    onClick={prevProject}
                    className="shrink-0 px-3 py-1 rounded ui-btn text-ctp-text"
                >
                    ◀︎ Prev
                </button>
                <span className="self-center min-w-0 truncate mx-2 md:mx-6 text-ctp-mauve lg:text-xl text-l font-bold">
                    {projects[projIdx].name} ({projIdx + 1}/{projects.length})
                </span>
                <button
                    onClick={nextProject}
                    className="shrink-0 px-3 py-1 rounded ui-btn text-ctp-text"
                >
                    Next ▶︎
                </button>
            </div>
            <MdProcessor repoUrl={projects[projIdx].url} />
        </>
    );
}