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

Updated some client pages to externalize the Navbar and Footer

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-03-21 12:47:03 +00:00
parent 78bdb1b275
commit 1c5f16d42b
6 changed files with 95 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/ar/contact/page.tsx
View File

@@ -1,9 +1,17 @@
import {getData} from "@/cms"; import {getData} from "@/cms";
import Footer from "@/components/Footer";
import Navbar from "@/components/Navbar";
import ContactUs from "@/templates/ContactUs"; import ContactUs from "@/templates/ContactUs";
import ContactPage from "@/types/cms/contact"; import ContactPage from "@/types/cms/contact";
export default async function Page() { export default async function Page() {
const {data} = await getData<ContactPage>("contact", "ar"); const {data} = await getData<ContactPage>("contact", "ar");
return <ContactUs data={data.data.attributes} page="/contact" language="ar" />; return (
<main className="text-mti-black flex h-screen w-full flex-col bg-white" dir="rtl">
<Navbar currentPage="/contact" language="ar" />
<ContactUs data={data.data.attributes} />;
<Footer language="ar" />
</main>
);
} }

10
src/app/ar/price/page.tsx
View File

@@ -1,9 +1,17 @@
import {getData} from "@/cms"; import {getData} from "@/cms";
import Footer from "@/components/Footer";
import Navbar from "@/components/Navbar";
import Price from "@/templates/Price"; import Price from "@/templates/Price";
import PricePage from "@/types/cms/price"; import PricePage from "@/types/cms/price";
export default async function Page() { export default async function Page() {
const {data} = await getData<PricePage>("price", "ar"); const {data} = await getData<PricePage>("price", "ar");
return <Price data={data.data.attributes} language="ar" />; return (
<main className="h-screen w-full bg-white text-mti-black flex flex-col" dir="rtl">
<Navbar currentPage="/price" language="ar" />
<Price data={data.data.attributes} language="ar" />
<Footer language="ar" />
</main>
);
} }

10
src/app/contact/page.tsx
View File

@@ -1,9 +1,17 @@
import {getData} from "@/cms"; import {getData} from "@/cms";
import Footer from "@/components/Footer";
import Navbar from "@/components/Navbar";
import ContactUs from "@/templates/ContactUs"; import ContactUs from "@/templates/ContactUs";
import ContactPage from "@/types/cms/contact"; import ContactPage from "@/types/cms/contact";
export default async function Page() { export default async function Page() {
const {data} = await getData<ContactPage>("contact", "en"); const {data} = await getData<ContactPage>("contact", "en");
return <ContactUs data={data.data.attributes} page="/contact" language="en" />; return (
<main className="text-mti-black flex h-screen w-full flex-col bg-white" dir="ltr">
<Navbar currentPage="/contact" language="en" />
<ContactUs data={data.data.attributes} />;
<Footer language="en" />
</main>
);
} }

10
src/app/price/page.tsx
View File

@@ -1,9 +1,17 @@
import {getData} from "@/cms"; import {getData} from "@/cms";
import Footer from "@/components/Footer";
import Navbar from "@/components/Navbar";
import Price from "@/templates/Price"; import Price from "@/templates/Price";
import PricePage from "@/types/cms/price"; import PricePage from "@/types/cms/price";
export default async function Page() { export default async function Page() {
const {data} = await getData<PricePage>("price", "en"); const {data} = await getData<PricePage>("price", "en");
return <Price data={data.data.attributes} language="en" />; return (
<main className="h-screen w-full bg-white text-mti-black flex flex-col" dir="ltr">
<Navbar currentPage="/price" language="en" />
<Price data={data.data.attributes} language="en" />
<Footer language="en" />
</main>
);
} }

120
src/templates/ContactUs.tsx
View File

@@ -18,9 +18,7 @@ type FormValues = {
}; };
interface Props { interface Props {
language: "en" | "ar";
data: ContactPage; data: ContactPage;
page: string;
} }
const ErrorMessage = ({message}: {message: string}) => ( const ErrorMessage = ({message}: {message: string}) => (
@@ -28,7 +26,7 @@ const ErrorMessage = ({message}: {message: string}) => (
<span className="text-mti-red">{message}</span> <span className="text-mti-red">{message}</span>
</div> </div>
); );
export default function App({language, data, page}: Props) { export default function App({data}: Props) {
const selectOptions = [ const selectOptions = [
{ {
label: data.Feedback, label: data.Feedback,
@@ -92,67 +90,63 @@ export default function App({language, data, page}: Props) {
return ( return (
<> <>
<ToastContainer /> <ToastContainer />
<main className="text-mti-black flex h-screen w-full flex-col bg-white" dir={language === "ar" ? "rtl" : "ltr"}> <section className="w-full bg-mti-purple text-white text-center p-8 md:p-16">
<Navbar currentPage={page} language={language} /> <div className="w-full h-full flex flex-col items-center justify-center">
<section className="w-full bg-mti-purple text-white text-center p-8 md:p-16"> <Title>{data.Title}</Title>
<div className="w-full h-full flex flex-col items-center justify-center"> </div>
<Title>{data.Title}</Title> </section>
</div> <section className="w-full bg-white text-center p-8 md:p-16 flex justify-center items-center gap-32">
</section> <form onSubmit={handleSubmit(onSubmit)} className="form-control items-center gap-2 text-mti-black flex flex-col w-96">
<section className="w-full bg-white text-center p-8 md:p-16 flex justify-center items-center gap-32"> <input
<form onSubmit={handleSubmit(onSubmit)} className="form-control items-center gap-2 text-mti-black flex flex-col w-96"> id="name"
<input type="text"
id="name" placeholder={data.Name}
type="text" {...register("name", {required: true})}
placeholder={data.Name} className="input input-bordered md:w-full sm:w-1/2 max-w-md"
{...register("name", {required: true})} />
className="input input-bordered md:w-full sm:w-1/2 max-w-md" {errors.name && errors.name.type === "required" && <ErrorMessage message={data.FieldRequired} />}
/> <input
{errors.name && errors.name.type === "required" && <ErrorMessage message={data.FieldRequired} />} id="email"
<input placeholder={data.Email}
id="email" type="text"
placeholder={data.Email} {...register("email", {required: true, pattern: /^\S+@\S+$/i})}
type="text" className="input input-bordered md:w-full sm:w-1/2 max-w-md"
{...register("email", {required: true, pattern: /^\S+@\S+$/i})} />
className="input input-bordered md:w-full sm:w-1/2 max-w-md" {errors.email && errors.email.type === "required" && <ErrorMessage message={data.FieldRequired} />}
/> {errors.email && errors.email.type === "pattern" && <ErrorMessage message={data.InvalidEmail} />}
{errors.email && errors.email.type === "required" && <ErrorMessage message={data.FieldRequired} />} <input
{errors.email && errors.email.type === "pattern" && <ErrorMessage message={data.InvalidEmail} />} id="subject"
<input placeholder={data.Subject}
id="subject" type="text"
placeholder={data.Subject} {...register("subject", {required: true})}
type="text" className="input input-bordered md:w-full sm:w-1/2 max-w-md"
{...register("subject", {required: true})} />
className="input input-bordered md:w-full sm:w-1/2 max-w-md" {errors.subject && errors.subject.type === "required" && <ErrorMessage message={data.FieldRequired} />}
/> <select id="type" {...register("type", {required: true})} className="select select-bordered md:w-full sm:w-1/2 max-w-md">
{errors.subject && errors.subject.type === "required" && <ErrorMessage message={data.FieldRequired} />} <option value="" disabled>
<select id="type" {...register("type", {required: true})} className="select select-bordered md:w-full sm:w-1/2 max-w-md"> {data.SelectType}
<option value="" disabled> </option>
{data.SelectType} {selectOptions.map((option) => (
<option key={option.value} value={option.value}>
{option.label}
</option> </option>
{selectOptions.map((option) => ( ))}
<option key={option.value} value={option.value}> </select>
{option.label} {errors.type && errors.type.type === "required" && <ErrorMessage message={data.FieldRequired} />}
</option> <textarea
))} id="description"
</select> placeholder={data.Description}
{errors.type && errors.type.type === "required" && <ErrorMessage message={data.FieldRequired} />} {...register("description", {required: true})}
<textarea className="textarea textarea-bordered md:w-full sm:w-1/2 max-w-md"
id="description" rows={5}
placeholder={data.Description} />
{...register("description", {required: true})} {errors.description && errors.description.type === "required" && <ErrorMessage message={data.FieldRequired} />}
className="textarea textarea-bordered md:w-full sm:w-1/2 max-w-md" <input type="submit" className="btn" disabled={!isDirty || !isValid} value={data.Submit} />
rows={5} </form>
/> <div className="flex flex-col">
{errors.description && errors.description.type === "required" && <ErrorMessage message={data.FieldRequired} />} <Image src="/person_laptop_focus.jpg" alt="Contact Us" width={500} height={340} className="rounded-xl" />
<input type="submit" className="btn" disabled={!isDirty || !isValid} value={data.Submit} /> </div>
</form> </section>
<div className="flex flex-col">
<Image src="/person_laptop_focus.jpg" alt="Contact Us" width={500} height={340} className="rounded-xl" />
</div>
</section>
<Footer language={language} />
</main>
</> </>
); );
} }

6
src/templates/Price.tsx
View File

@@ -67,8 +67,7 @@ export default function Page({language, data}: Props) {
getData(); getData();
}, []); }, []);
return ( return (
<main className="h-screen w-full bg-white text-mti-black flex flex-col" dir={language === "ar" ? "rtl" : "ltr"}> <>
<Navbar currentPage="/price" language={language} />
<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">{data.Title}</h2> <h2 className="text-3xl font-bold">{data.Title}</h2>
<div className="grid grid-cols-2 gap-8"> <div className="grid grid-cols-2 gap-8">
@@ -103,7 +102,6 @@ export default function Page({language, data}: Props) {
{data.SignUp} {data.SignUp}
</Link> </Link>
</section> </section>
<Footer language={language} /> </>
</main>
); );
} }