AramJonghu/aramjonghu-site
1
0
Fork 0
mirror of https://git.aramjonghu.nl/AramJonghu/aramjonghu-site.git synced 2026-06-06 17:18:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

minor adjustment, removed repetetive code

Browse Source
This commit is contained in:
AramJonghu
2026-04-23 00:26:48 +02:00
parent 9b3c7e9a4d
commit c9410191a9
1 changed files with 44 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/Home.jsx
+30 -50
View File
@@ -3,6 +3,24 @@ import { useState } from "react";
export default function Home() { export default function Home() {
const [active, setActive] = useState("projects"); const [active, setActive] = useState("projects");
const sections = [
{
id: "projects",
title: "Projects",
content: "Project content",
},
{
id: "systems",
title: "Systems",
content: "Systems content",
},
{
id: "about",
title: "About",
content: "About content",
},
];
return ( return (
<div className="text-ctp-text flex flex-col items-center justify-center px-6 py-6"> <div className="text-ctp-text flex flex-col items-center justify-center px-6 py-6">
<div className="w-full max-w-6xl text-center"> <div className="w-full max-w-6xl text-center">
@@ -22,73 +40,35 @@ export default function Home() {
<div className="mt-10 border rounded p-4"> <div className="mt-10 border rounded p-4">
<div className="flex flex-wrap justify-center gap-12"> <div className="flex flex-wrap justify-center gap-12">
{sections.map((section) => (
<button <button
onClick={() => setActive("projects")} key={section.id}
onClick={() => setActive(section.id)}
className={`ui-btn ${ className={`ui-btn ${
active === "projects" ? "ui-btn-active" : "" active === section.id ? "ui-btn-active" : ""
}`} }`}
> >
Projects {section.title}
</button>
<button
onClick={() => setActive("systems")}
className={`ui-btn ${
active === "systems" ? "ui-btn-active" : ""
}`}
>
Systems
</button>
<button
onClick={() => setActive("about")}
className={`ui-btn ${
active === "about" ? "ui-btn-active" : ""
}`}
>
About
</button> </button>
))}
</div> </div>
<div className="mt-6 text-left relative min-h-20"> <div className="mt-6 text-left relative min-h-20">
{sections.map((section) => (
<div <div
key={section.id}
className={`transition-all duration-300 ${ className={`transition-all duration-300 ${
active === "projects" active === section.id
? "opacity-100 translate-y-0" ? "opacity-100 translate-y-0"
: "opacity-0 -translate-y-2 pointer-events-none absolute inset-0" : "opacity-0 -translate-y-2 pointer-events-none absolute inset-0"
}`} }`}
> >
<h2 className="text-2xl font-bold text-ctp-mauve"> <h2 className="text-2xl font-bold text-ctp-mauve">
Projects {section.title}
</h2> </h2>
<p>Project content</p> <p>{section.content}</p>
</div>
<div
className={`transition-all duration-300 ${
active === "systems"
? "opacity-100 translate-y-0"
: "opacity-0 -translate-y-2 pointer-events-none absolute inset-0"
}`}
>
<h2 className="text-2xl font-bold text-ctp-mauve">
Systems
</h2>
<p>Systems content</p>
</div>
<div
className={`transition-all duration-300 ${
active === "about"
? "opacity-100 translate-y-0"
: "opacity-0 -translate-y-2 pointer-events-none absolute inset-0"
}`}
>
<h2 className="text-2xl font-bold text-ctp-mauve">
About
</h2>
<p>About content</p>
</div> </div>
))}
</div> </div>
</div> </div>
</div> </div>