90 lines
3.0 KiB
TypeScript
90 lines
3.0 KiB
TypeScript
/* eslint-disable @next/next/no-img-element */
|
|
import Footer from "@/components/Footer";
|
|
import Navbar from "@/components/Navbar";
|
|
import Title from "@/components/Title";
|
|
import translation from "@/translation/history.json";
|
|
import clsx from "clsx";
|
|
import React from "react";
|
|
import * as BsIcon from "react-icons/bs";
|
|
import {IconType} from "react-icons";
|
|
|
|
interface Props {
|
|
language: "en" | "ar";
|
|
}
|
|
|
|
interface ElementProps {
|
|
date: string;
|
|
Icon: IconType;
|
|
label: string;
|
|
language: "ar" | "en";
|
|
isEven?: boolean;
|
|
}
|
|
|
|
const Element = ({date, label, isEven, language, Icon}: ElementProps) => {
|
|
return (
|
|
<>
|
|
<div className={clsx("flex items-center gap-8 -md:hidden", isEven && "flex-row-reverse")}>
|
|
<div className={clsx("w-64 bg-mti-rose-ultralight p-4 rounded-xl", language === "ar" && "text-right")}>
|
|
<span>{label}</span>
|
|
</div>
|
|
<div className="h-16 w-16 rounded-full bg-mti-purple-dark flex items-center justify-center text-white border-white border-4 drop-shadow">
|
|
<Icon className="h-6 w-6" />
|
|
</div>
|
|
<span className={clsx("w-64 text-mti-purple-light font-semibold text-lg", isEven && "text-right")}>{date}</span>
|
|
</div>
|
|
|
|
<div className={clsx("flex items-center gap-8 md:hidden", language === "ar" && "flex-row-reverse text-right")}>
|
|
<div className="h-16 w-16 rounded-full bg-mti-purple-dark flex items-center justify-center text-white border-white border-4 drop-shadow">
|
|
<Icon className="h-6 w-6" />
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<span className={clsx("w-64 text-mti-purple-light font-semibold text-lg")}>{date}</span>
|
|
<div className="w-64 bg-mti-rose-ultralight p-4 rounded-xl">
|
|
<span>{label}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default function History({language}: Props) {
|
|
return (
|
|
<main className="h-screen w-full bg-white text-mti-black flex flex-col" dir={language === "ar" ? "rtl" : "ltr"}>
|
|
<Navbar currentPage="/history" language={language} />
|
|
|
|
<section className="w-full bg-mti-purple text-white text-center p-8 md:p-16">
|
|
<div className="w-full h-full flex flex-col items-center justify-center">
|
|
<Title>{translation.title[language]}</Title>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="history" className="w-full h-fit bg-white">
|
|
<div className="w-full h-fit flex flex-col items-center gap-8 p-8 md:p-20 container mx-auto relative">
|
|
<div className="flex flex-col gap-8 z-20">
|
|
{translation.events.map((event, index) => (
|
|
<Element
|
|
date={event.date[language]}
|
|
label={event.label[language]}
|
|
Icon={BsIcon[event.icon as keyof typeof BsIcon]}
|
|
key={index}
|
|
isEven={(index + 1) % 2 === 0}
|
|
language={language}
|
|
/>
|
|
))}
|
|
</div>
|
|
<div
|
|
className={clsx(
|
|
"w-2 h-[89%] bg-mti-purple-light absolute md:left-1/2 md:-translate-x-1/2 top-1/2 -translate-y-1/2 rounded-full",
|
|
language === "en" && "left-1/2 -translate-x-[148px]",
|
|
language === "ar" && "right-1/2 translate-x-[148px]",
|
|
)}
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
<Footer language={language} />
|
|
</main>
|
|
);
|
|
}
|