103 lines
3.4 KiB
TypeScript
103 lines
3.4 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import Image from "next/image";
|
|
import { capitalize } from "lodash";
|
|
import getSymbolFromCurrency from "currency-symbol-map";
|
|
import clsx from "clsx";
|
|
import Navbar from "@/components/Navbar";
|
|
import Link from "next/link";
|
|
import Footer from "@/components/Footer";
|
|
import translation from "@/translation/price.json";
|
|
|
|
type DurationUnit = "weeks" | "days" | "months" | "years";
|
|
|
|
interface Package {
|
|
id: string;
|
|
currency: string;
|
|
duration: number;
|
|
duration_unit: DurationUnit;
|
|
price: number;
|
|
}
|
|
|
|
export default function Page({ language }: { language: "en" | "ar" }) {
|
|
const [payments, setPayments] = React.useState<Package[]>([]);
|
|
const getData = async () => {
|
|
// Fetch data from external API
|
|
const response = await fetch(
|
|
`${process.env.NEXT_PUBLIC_APP_URL}/api/packages`,
|
|
{
|
|
method: "GET",
|
|
}
|
|
);
|
|
|
|
if (response.status === 200) {
|
|
const payments = await response.json();
|
|
// Pass data to the page via props
|
|
setPayments(payments);
|
|
return;
|
|
}
|
|
};
|
|
|
|
React.useEffect(() => {
|
|
getData();
|
|
}, []);
|
|
return (
|
|
<main className="h-screen w-full bg-white text-mti-black flex flex-col">
|
|
<Navbar currentPage="/join" language="en" />
|
|
|
|
<section className="w-full relative bg-white px-8 flex flex-col items-center text-center gap-4">
|
|
<h2 className="text-3xl font-bold">{translation.title[language]}</h2>
|
|
<div className="grid grid-cols-2 gap-8">
|
|
{payments.map((p) => (
|
|
<div
|
|
key={p.id}
|
|
className={clsx(
|
|
"p-4 bg-white rounded-xl flex flex-col gap-6 items-start"
|
|
)}
|
|
>
|
|
<div className="flex flex-col items-start mb-2">
|
|
<Image
|
|
src="/logo_title.png"
|
|
alt="EnCoach's Logo"
|
|
width={32}
|
|
height={32}
|
|
/>
|
|
<span className="font-semibold text-xl">
|
|
EnCoach - {p.duration}{" "}
|
|
{capitalize(
|
|
p.duration === 1
|
|
? p.duration_unit.slice(0, p.duration_unit.length - 1)
|
|
: p.duration_unit
|
|
)}
|
|
</span>
|
|
</div>
|
|
<div className="flex flex-col gap-2 items-start w-full">
|
|
<span className="text-2xl">
|
|
{p.price}
|
|
{getSymbolFromCurrency(p.currency)}
|
|
</span>
|
|
</div>
|
|
<div className="flex flex-col gap-1 items-start">
|
|
<span>{translation.packageIncludes[language]}</span>
|
|
<ul className="flex flex-col items-start text-sm">
|
|
<li>- {translation.packageIncludesA[language]}</li>
|
|
<li>- {translation.packageIncludesB[language]}</li>
|
|
<li>- {translation.packageIncludesC[language]}</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<Link
|
|
className="transition ease-in-out duration-300 text-white hover:bg-mti-purple-dark hover:border-mti-purple-dark border border-mti-purple-light bg-mti-purple-light px-8 py-2 rounded-xl mb-8"
|
|
href={`${process.env.NEXT_PUBLIC_APP_URL}/register`}
|
|
>
|
|
{translation.joinus[language]}
|
|
</Link>
|
|
</section>
|
|
<Footer language={language} />
|
|
</main>
|
|
);
|
|
}
|