AramJonghu/aramjonghu-site
1
0
Fork 0
mirror of https://git.aramjonghu.nl/AramJonghu/aramjonghu-site.git synced 2026-06-07 01:28: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
+44 -64
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">
<button {sections.map((section) => (
onClick={() => setActive("projects")} <button
className={`ui-btn ${ key={section.id}
active === "projects" ? "ui-btn-active" : "" onClick={() => setActive(section.id)}
}`} className={`ui-btn ${
> active === section.id ? "ui-btn-active" : ""
Projects }`}
</button> >
{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>
</div> </div>
<div className="mt-6 text-left relative min-h-20"> <div className="mt-6 text-left relative min-h-20">
<div {sections.map((section) => (
className={`transition-all duration-300 ${ <div
active === "projects" key={section.id}
? "opacity-100 translate-y-0" className={`transition-all duration-300 ${
: "opacity-0 -translate-y-2 pointer-events-none absolute inset-0" active === section.id
}`} ? "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"> }`}
Projects >
</h2> <h2 className="text-2xl font-bold text-ctp-mauve">
<p>Project content</p> {section.title}
</div> </h2>
<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>