Merged in nested-country-managers (pull request #3)

Nested country managers
This commit is contained in:
João Ramos
2024-02-15 13:50:35 +00:00
committed by Tiago Ribeiro
4 changed files with 376 additions and 158 deletions

View File

@@ -0,0 +1,78 @@
import Footer from "@/components/Footer";
import Navbar from "@/components/Navbar";
import Title from "@/components/Title";
import contacts from "../../../contacts.json";
interface Contact {
key: string;
label: string;
entries: {
name: string;
number: string;
email: string;
}[];
}
type Language = "en" | "ar";
interface PageProps {
params: {
country: string;
};
searchParams: {
page: string;
language: Language;
};
}
export function generateStaticParams() {
// down the line, this is required to be loaded from a CMS
// for now, we'll just use a JSON file
// do not forget the actually render this as multiple languages
return contacts.map(({ key }) => ({
country: key.toLowerCase().replaceAll(" ", ""),
}));
}
export default function Page({
params: { country },
searchParams: { page = "/contacts", language = "en" },
}: PageProps) {
// this approach will not be viable later on when we have multiple languages
// or use the data from the server
// replace this with a fetch to the CMS
const contact = contacts.find(({ key }) => key === country) as Contact;
return (
<main className="text-mti-black flex h-screen w-full flex-col bg-white">
<Navbar currentPage={page} language={language} />
<section className="bg-mti-purple h-full w-full p-8 text-center text-white md:p-16">
<div className="flex h-full w-full flex-col items-center justify-center">
<Title>{`${contact.label} Contacts`}</Title>
</div>
</section>
<section className="bg-white h-full w-full p-8 md:p-16 flex gap-16 justify-center flex-wrap">
{contact.entries.map((entry) => (
<div key={entry.name}>
<h2>
<strong>Name: </strong>
{entry.name}
</h2>
<p>
<strong>Number: </strong>
{entry.number}
</p>
<p>
<strong>Email: </strong>
{entry.email}
</p>
</div>
))}
</section>
<Footer language={language} />
</main>
);
}

View File

@@ -4,169 +4,269 @@
import Link from "next/link"; import Link from "next/link";
import Image from "next/image"; import Image from "next/image";
import clsx from "clsx"; import clsx from "clsx";
import {BsList, BsXLg} from "react-icons/bs"; import { BsList, BsXLg } from "react-icons/bs";
import {Fragment, useEffect, useState} from "react"; import { Fragment, useEffect, useState } from "react";
import {Dialog, Menu, Transition} from "@headlessui/react"; import { Dialog, Menu, Transition } from "@headlessui/react";
import {useRouter} from "next/navigation"; import { useRouter } from "next/navigation";
import translation from "@/translation/navbar.json"; import translation from "@/translation/navbar.json";
import contacts from "@/contacts.json";
const items = [ const items = [
{page: "/", key: "home"}, { page: "/", key: "home" },
{page: "/services", key: "services"}, { page: "/services", key: "services" },
{page: "/price", key: "price"}, { page: "/price", key: "price" },
{page: "/about", key: "about"}, { page: "/about", key: "about" },
{page: "/history", key: "history"}, { page: "/history", key: "history" },
{page: "/contact", key: "contact"}, { page: "/contact", key: "contact" },
{
key: "country_manager",
page: "/contacts",
entries: contacts.map((data) => ({
key: data.key,
label: data.label,
})),
},
]; ];
export default function Navbar({currentPage, language}: {currentPage: string; language: "en" | "ar"}) { export default function Navbar({
const [isOpen, setIsOpen] = useState(false); currentPage,
language,
}: {
currentPage: string;
language: "en" | "ar";
}) {
const [isOpen, setIsOpen] = useState(false);
return (
<>
<header className="-md:hidden w-full items-center justify-between px-11 py-3 shadow-sm md:flex">
<Link href="/">
<Image
src="/logo_title.png"
alt="EnCoach logo"
width={128}
height={128}
/>
</Link>
<div className={clsx("flex w-fit items-center gap-8")}>
{items.map((item) =>
item.entries ? (
<div
key={item.key}
className={clsx(
"group relative hover:border-b-mti-purple-light transition duration-300 ease-in-out hover:border-b-2 z-10 cursor-pointer",
currentPage === item.page &&
"border-b-mti-purple-light border-b-2"
)}
>
<span className="py-2">
{translation[item.key as keyof typeof translation][language]}
</span>
<ul className="absolute hidden group-hover:block bg-gray-700 text-white rounded shadow-md mt-1">
{item.entries?.map((innerEntry) => (
<li
key={innerEntry.key}
className="px-4 py-2 hover:bg-gray-600 whitespace-nowrap h-12 flex items-center"
>
<Link href={`${item.page}/${innerEntry.key}`}>
{innerEntry.label}
</Link>
</li>
))}
</ul>
</div>
) : (
<Link
key={item.key}
href={
language === "ar" ? `/${language}${item.page}` : item.page
}
className={clsx(
"hover:border-b-mti-purple-light transition duration-300 ease-in-out hover:border-b-2",
currentPage === item.page &&
"border-b-mti-purple-light border-b-2"
)}
>
{(translation as any)[item.key][language]}
</Link>
)
)}
</div>
<div className="flex w-fit items-center gap-4">
<Link
href="https://platform.encoach.com"
className="hover:bg-mti-purple-dark border-mti-purple-dark rounded-xl border px-8 py-2 transition duration-300 ease-in-out hover:text-white"
>
{translation.platform[language]}
</Link>
<Link
href="https://platform.encoach.com/register"
className="hover:bg-mti-purple-dark hover:border-mti-purple-dark border-mti-purple-light bg-mti-purple-light rounded-xl border px-8 py-2 text-white transition duration-300 ease-in-out"
>
{translation.join[language]}
</Link>
{language === "ar" ? (
<Link
className="text-mti-purple-light hover:text-mti-purple-dark transition duration-300 ease-in-out"
href={`${currentPage}`}
>
EN
</Link>
) : (
<Link
className="text-mti-purple-light hover:text-mti-purple-dark transition duration-300 ease-in-out"
href={`/ar${currentPage}`}
>
AR
</Link>
)}
</div>
</header>
return ( <Transition appear show={isOpen} as={Fragment}>
<> <Dialog
<header className="-md:hidden w-full items-center justify-between px-11 py-3 shadow-sm md:flex"> as="div"
<Link href="/"> className="relative z-10"
<Image src="/logo_title.png" alt="EnCoach logo" width={128} height={128} /> onClose={() => setIsOpen(false)}
</Link> >
<div className={clsx("flex w-fit items-center gap-8")}> <Transition.Child
{items.map((item) => ( as={Fragment}
<Link enter="ease-out duration-300"
key={item.key} enterFrom="opacity-0"
href={language === "ar" ? `/${language}${item.page}` : item.page} enterTo="opacity-100"
className={clsx( leave="ease-in duration-200"
"hover:border-b-mti-purple-light transition duration-300 ease-in-out hover:border-b-2", leaveFrom="opacity-100"
currentPage === item.page && "border-b-mti-purple-light border-b-2", leaveTo="opacity-0"
)}> >
{(translation as any)[item.key][language]} <div className="fixed inset-0 bg-black bg-opacity-25" />
</Link> </Transition.Child>
))}
</div>
<div className="flex w-fit items-center gap-4">
<Link
href="https://platform.encoach.com"
className="hover:bg-mti-purple-dark border-mti-purple-dark rounded-xl border px-8 py-2 transition duration-300 ease-in-out hover:text-white">
{translation.platform[language]}
</Link>
<Link
href="https://platform.encoach.com/register"
className="hover:bg-mti-purple-dark hover:border-mti-purple-dark border-mti-purple-light bg-mti-purple-light rounded-xl border px-8 py-2 text-white transition duration-300 ease-in-out">
{translation.join[language]}
</Link>
{language === "ar" ? (
<Link
className="text-mti-purple-light hover:text-mti-purple-dark transition duration-300 ease-in-out"
href={`${currentPage}`}>
EN
</Link>
) : (
<Link
className="text-mti-purple-light hover:text-mti-purple-dark transition duration-300 ease-in-out"
href={`/ar${currentPage}`}>
AR
</Link>
)}
</div>
</header>
<Transition appear show={isOpen} as={Fragment}> <div className="fixed inset-0 overflow-y-auto">
<Dialog as="div" className="relative z-10" onClose={() => setIsOpen(false)}> <div className="flex min-h-full items-center justify-center text-center">
<Transition.Child <Transition.Child
as={Fragment} as={Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"
enterFrom="opacity-0" enterFrom="opacity-0 scale-95"
enterTo="opacity-100" enterTo="opacity-100 scale-100"
leave="ease-in duration-200" leave="ease-in duration-200"
leaveFrom="opacity-100" leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0"> leaveTo="opacity-0 scale-95"
<div className="fixed inset-0 bg-black bg-opacity-25" /> >
</Transition.Child> <Dialog.Panel className="flex h-screen w-full transform flex-col gap-8 overflow-hidden bg-white text-left align-middle text-black shadow-xl transition-all">
<Dialog.Title
as="header"
className="-md:flex w-full items-center justify-between px-8 py-2 shadow-sm md:hidden"
>
<Link href="/">
<Image
src="/logo_title.png"
alt="EnCoach logo"
width={128}
height={128}
/>
</Link>
<div className="flex items-center gap-4">
{language === "ar" ? (
<Link
className="text-mti-purple-light hover:text-mti-purple-dark transition duration-300 ease-in-out"
href={`${currentPage}`}
>
EN
</Link>
) : (
<Link
className="text-mti-purple-light hover:text-mti-purple-dark transition duration-300 ease-in-out"
href={`/ar${currentPage}`}
>
AR
</Link>
)}
<div
className="cursor-pointer"
onClick={() => setIsOpen(false)}
tabIndex={0}
>
<BsXLg
className="text-mti-purple-light text-2xl"
onClick={() => setIsOpen(false)}
/>
</div>
</div>
</Dialog.Title>
<div
className={clsx(
"flex flex-col gap-6 px-8 text-lg",
language === "ar" && "items-end"
)}
>
{items.map((item) => (
<Link
key={item.key}
href={
language === "ar"
? `/${language}${item.page}`
: item.page
}
className={clsx(
"w-fit transition duration-300 ease-in-out",
currentPage === item.page &&
"text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold "
)}
>
{(translation as any)[item.key][language]}
</Link>
))}
<Link
href="https://platform.encoach.com/register"
className="w-fit transition duration-300 ease-in-out"
>
{translation.join[language]}
</Link>
<Link
href="https://platform.encoach.com"
className={clsx(
"w-fit transition duration-300 ease-in-out"
)}
>
{translation.platform[language]}
</Link>
</div>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition>
<div className="fixed inset-0 overflow-y-auto"> <header className="-md:flex w-full items-center justify-between px-8 py-2 md:hidden">
<div className="flex min-h-full items-center justify-center text-center"> <Link href="/">
<Transition.Child <Image
as={Fragment} src="/logo_title.png"
enter="ease-out duration-300" alt="EnCoach logo"
enterFrom="opacity-0 scale-95" width={69}
enterTo="opacity-100 scale-100" height={69}
leave="ease-in duration-200" />
leaveFrom="opacity-100 scale-100" </Link>
leaveTo="opacity-0 scale-95"> <div className="flex items-center gap-4">
<Dialog.Panel className="flex h-screen w-full transform flex-col gap-8 overflow-hidden bg-white text-left align-middle text-black shadow-xl transition-all"> {language === "ar" ? (
<Dialog.Title as="header" className="-md:flex w-full items-center justify-between px-8 py-2 shadow-sm md:hidden"> <Link
<Link href="/"> className="text-mti-purple-light hover:text-mti-purple-dark transition duration-300 ease-in-out"
<Image src="/logo_title.png" alt="EnCoach logo" width={128} height={128} /> href={`${currentPage}`}
</Link> >
<div className="flex items-center gap-4"> EN
{language === "ar" ? ( </Link>
<Link ) : (
className="text-mti-purple-light hover:text-mti-purple-dark transition duration-300 ease-in-out" <Link
href={`${currentPage}`}> className="text-mti-purple-light hover:text-mti-purple-dark transition duration-300 ease-in-out"
EN href={`/ar${currentPage}`}
</Link> >
) : ( AR
<Link </Link>
className="text-mti-purple-light hover:text-mti-purple-dark transition duration-300 ease-in-out" )}
href={`/ar${currentPage}`}> <div className="cursor-pointer" onClick={() => setIsOpen(true)}>
AR <BsList className="text-2xl" onClick={() => setIsOpen(true)} />
</Link> </div>
)} </div>
<div className="cursor-pointer" onClick={() => setIsOpen(false)} tabIndex={0}> </header>
<BsXLg className="text-mti-purple-light text-2xl" onClick={() => setIsOpen(false)} /> </>
</div> );
</div>
</Dialog.Title>
<div className={clsx("flex flex-col gap-6 px-8 text-lg", language === "ar" && "items-end")}>
{items.map((item) => (
<Link
key={item.key}
href={language === "ar" ? `/${language}${item.page}` : item.page}
className={clsx(
"w-fit transition duration-300 ease-in-out",
currentPage === item.page &&
"text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
)}>
{(translation as any)[item.key][language]}
</Link>
))}
<Link
href="https://platform.encoach.com/register"
className="w-fit transition duration-300 ease-in-out">
{translation.join[language]}
</Link>
<Link href="https://platform.encoach.com" className={clsx("w-fit transition duration-300 ease-in-out")}>
{translation.platform[language]}
</Link>
</div>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition>
<header className="-md:flex w-full items-center justify-between px-8 py-2 md:hidden">
<Link href="/">
<Image src="/logo_title.png" alt="EnCoach logo" width={69} height={69} />
</Link>
<div className="flex items-center gap-4">
{language === "ar" ? (
<Link
className="text-mti-purple-light hover:text-mti-purple-dark transition duration-300 ease-in-out"
href={`${currentPage}`}>
EN
</Link>
) : (
<Link
className="text-mti-purple-light hover:text-mti-purple-dark transition duration-300 ease-in-out"
href={`/ar${currentPage}`}>
AR
</Link>
)}
<div className="cursor-pointer" onClick={() => setIsOpen(true)}>
<BsList className="text-2xl" onClick={() => setIsOpen(true)} />
</div>
</div>
</header>
</>
);
} }

36
src/contacts.json Normal file
View File

@@ -0,0 +1,36 @@
[
{
"label": "Egypt",
"key": "egypt",
"entries": [
{
"name": "Modern Technology",
"number": "+226578480830",
"email": "egypt@encoach.com"
}
]
},
{
"label": "Oman",
"key": "oman",
"entries": [
{
"name": "Smartway education",
"number": "+9689944094",
"email": "oman@encoach.com"
},
{ "name": "MTI", "number": "+9687445609", "email": "mti@encoach.com" }
]
},
{
"label": "Saudi Arabia",
"key": "saudiarabia",
"entries": [
{
"name": "Edutrach services",
"number": "+96658499347",
"email": "edu@encoach.com"
}
]
}
]

View File

@@ -30,5 +30,9 @@
"join": { "join": {
"en": "Sign up", "en": "Sign up",
"ar": "انضم إلينا" "ar": "انضم إلينا"
},
"country_manager": {
"en": "Country Manager",
"ar": "المدير المحلي"
} }
} }