Files
encoach_landingpage/src/templates/AgentContacts.tsx
2024-03-19 01:02:07 +00:00

67 lines
2.0 KiB
TypeScript

import Footer from "@/components/Footer";
import Navbar from "@/components/Navbar";
import Title from "@/components/Title";
import {Contact} from "@/types/contact";
import translation from "@/translation/agentcontacts.json";
import CountryManagerContactsPage from "@/types/cms/countryManagerContacts";
type Language = "en" | "ar";
interface Props {
country: string;
page: string;
language: Language;
data: CountryManagerContactsPage;
}
async function getCountryManagers(country: string, language: Language = "en") {
const res = await fetch(`https://platform.encoach.com/api/users/agents/${country}?language=${language}`);
if (!res.ok) {
throw new Error("Failed to fetch contacts");
}
return res.json();
}
export async function generateStaticParamsHelper(language: Language = "en") {
const contacts = (await fetch(`https://platform.encoach.com/api/users/agents?language=${language}`).then((res) => res.json())) as Contact[];
return contacts.map(({key}) => ({
country: key.toLowerCase().replaceAll(" ", ""),
}));
}
export async function AgentContacts({language, page, country, data}: Props) {
const contact = (await getCountryManagers(country, language)) 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>{data.Name}: </strong>
{entry.name}
</h2>
<p>
<strong>{data.Number}: </strong>
{entry.number}
</p>
<p>
<strong>{data.Email}: </strong>
{entry.email}
</p>
</div>
))}
</section>
<Footer language={language} />
</main>
);
}