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

Nested country managers

src/app/contacts/[country]/page.tsx

@@ -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>
+  );
+}

src/components/Navbar.tsx

@@ -4,64 +4,118 @@
 import Link from "next/link";
 import Image from "next/image";
 import clsx from "clsx";
-import {BsList, BsXLg} from "react-icons/bs";
-import {Fragment, useEffect, useState} from "react";
-import {Dialog, Menu, Transition} from "@headlessui/react";
-import {useRouter} from "next/navigation";
+import { BsList, BsXLg } from "react-icons/bs";
+import { Fragment, useEffect, useState } from "react";
+import { Dialog, Menu, Transition } from "@headlessui/react";
+import { useRouter } from "next/navigation";
 import translation from "@/translation/navbar.json";
+import contacts from "@/contacts.json";
 
 const items = [
-	{page: "/", key: "home"},
-	{page: "/services", key: "services"},
-	{page: "/price", key: "price"},
-	{page: "/about", key: "about"},
-	{page: "/history", key: "history"},
-	{page: "/contact", key: "contact"},
+  { page: "/", key: "home" },
+  { page: "/services", key: "services" },
+  { page: "/price", key: "price" },
+  { page: "/about", key: "about" },
+  { page: "/history", key: "history" },
+  { 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({
+  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} />
+          <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) => (
+          {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}
+                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",
-							)}>
+                  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">
+            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">
+            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}`}>
+              href={`${currentPage}`}
+            >
               EN
             </Link>
           ) : (
             <Link
               className="text-mti-purple-light hover:text-mti-purple-dark transition duration-300 ease-in-out"
-							href={`/ar${currentPage}`}>
+              href={`/ar${currentPage}`}
+            >
               AR
             </Link>
           )}
@@ -69,7 +123,11 @@ export default function Navbar({currentPage, language}: {currentPage: string; la
       </header>
 
       <Transition appear show={isOpen} as={Fragment}>
-				<Dialog as="div" className="relative z-10" onClose={() => setIsOpen(false)}>
+        <Dialog
+          as="div"
+          className="relative z-10"
+          onClose={() => setIsOpen(false)}
+        >
           <Transition.Child
             as={Fragment}
             enter="ease-out duration-300"
@@ -77,7 +135,8 @@ export default function Navbar({currentPage, language}: {currentPage: string; la
             enterTo="opacity-100"
             leave="ease-in duration-200"
             leaveFrom="opacity-100"
-						leaveTo="opacity-0">
+            leaveTo="opacity-0"
+          >
             <div className="fixed inset-0 bg-black bg-opacity-25" />
           </Transition.Child>
 
@@ -90,50 +149,84 @@ export default function Navbar({currentPage, language}: {currentPage: string; la
                 enterTo="opacity-100 scale-100"
                 leave="ease-in duration-200"
                 leaveFrom="opacity-100 scale-100"
-								leaveTo="opacity-0 scale-95">
+                leaveTo="opacity-0 scale-95"
+              >
                 <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">
+                  <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} />
+                      <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}`}>
+                          href={`${currentPage}`}
+                        >
                           EN
                         </Link>
                       ) : (
                         <Link
                           className="text-mti-purple-light hover:text-mti-purple-dark transition duration-300 ease-in-out"
-													href={`/ar${currentPage}`}>
+                          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
+                        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")}>
+                  <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}
+                        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 ",
-												)}>
+                            "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">
+                      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")}>
+                    <Link
+                      href="https://platform.encoach.com"
+                      className={clsx(
+                        "w-fit transition duration-300 ease-in-out"
+                      )}
+                    >
                       {translation.platform[language]}
                     </Link>
                   </div>
@@ -146,19 +239,26 @@ export default function Navbar({currentPage, language}: {currentPage: string; la
 
       <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} />
+          <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}`}>
+              href={`${currentPage}`}
+            >
               EN
             </Link>
           ) : (
             <Link
               className="text-mti-purple-light hover:text-mti-purple-dark transition duration-300 ease-in-out"
-							href={`/ar${currentPage}`}>
+              href={`/ar${currentPage}`}
+            >
               AR
             </Link>
           )}

src/contacts.json

@@ -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"
+      }
+    ]
+  }
+]

src/translation/navbar.json

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