66 lines
2.0 KiB
TypeScript
66 lines
2.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/privacy.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";
|
|
}
|
|
|
|
type ContentKey = keyof typeof translation.content;
|
|
type Translation = {ar: string; en: string};
|
|
interface Content {
|
|
title?: Translation;
|
|
text?: Translation;
|
|
list?: Translation[];
|
|
}
|
|
|
|
export default function Privacy({language}: Props) {
|
|
return (
|
|
<main className="h-screen w-full bg-white text-mti-black flex flex-col" dir={language === "ar" ? "rtl" : "ltr"}>
|
|
<Navbar currentPage="/terms" 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="terms" className="w-full h-fit bg-white">
|
|
<div
|
|
className={clsx(
|
|
"w-full h-fit flex flex-col gap-8 p-8 md:p-20 container mx-auto",
|
|
language === "ar" ? "text-right" : "text-left",
|
|
)}>
|
|
{Object.keys(translation.content).map((key) => {
|
|
const content = translation.content[key as ContentKey] as Content;
|
|
|
|
return (
|
|
<span className="flex flex-col gap-1" key={key} id={key}>
|
|
{content.title && <h2 className="font-semibold text-lg text-mti-purple-light">{content.title[language]}</h2>}
|
|
{content.text && <p className="whitespace-pre-wrap">{content.text[language]}</p>}
|
|
{content.list && (
|
|
<ul className="list-disc pl-8">
|
|
{content.list.map((text, index) => (
|
|
<li className="whitespace-pre-wrap" key={index}>
|
|
{text[language]}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</span>
|
|
);
|
|
})}
|
|
</div>
|
|
</section>
|
|
|
|
<Footer language={language} />
|
|
</main>
|
|
);
|
|
}
|