devops/encoach_landingpage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Removed the ENV variable use

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-02-01 16:59:38 +00:00
parent 434ad8efce
commit d572291758
1 changed files with 64 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
src/templates/Price.tsx
View File

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