From 1c5f16d42b9beda218141d4c3fcf8912a2e7733d Mon Sep 17 00:00:00 2001
From: Tiago Ribeiro <tiago.err@outlook.com>
Date: Thu, 21 Mar 2024 12:47:03 +0000
Subject: [PATCH] Updated some client pages to externalize the Navbar and
 Footer

---
 src/app/ar/contact/page.tsx |  10 ++-
 src/app/ar/price/page.tsx   |  10 ++-
 src/app/contact/page.tsx    |  10 ++-
 src/app/price/page.tsx      |  10 ++-
 src/templates/ContactUs.tsx | 120 +++++++++++++++++-------------------
 src/templates/Price.tsx     |   6 +-
 6 files changed, 95 insertions(+), 71 deletions(-)

diff --git a/src/app/ar/contact/page.tsx b/src/app/ar/contact/page.tsx
index 7b90263..f2328a8 100644
--- a/src/app/ar/contact/page.tsx
+++ b/src/app/ar/contact/page.tsx
@@ -1,9 +1,17 @@
 import {getData} from "@/cms";
+import Footer from "@/components/Footer";
+import Navbar from "@/components/Navbar";
 import ContactUs from "@/templates/ContactUs";
 import ContactPage from "@/types/cms/contact";
 
 export default async function Page() {
 	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>
+	);
 }
diff --git a/src/app/ar/price/page.tsx b/src/app/ar/price/page.tsx
index 6daf57d..28fe86c 100644
--- a/src/app/ar/price/page.tsx
+++ b/src/app/ar/price/page.tsx
@@ -1,9 +1,17 @@
 import {getData} from "@/cms";
+import Footer from "@/components/Footer";
+import Navbar from "@/components/Navbar";
 import Price from "@/templates/Price";
 import PricePage from "@/types/cms/price";
 
 export default async function Page() {
 	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>
+	);
 }
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index ec2747b..ba8eb89 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -1,9 +1,17 @@
 import {getData} from "@/cms";
+import Footer from "@/components/Footer";
+import Navbar from "@/components/Navbar";
 import ContactUs from "@/templates/ContactUs";
 import ContactPage from "@/types/cms/contact";
 
 export default async function Page() {
 	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>
+	);
 }
diff --git a/src/app/price/page.tsx b/src/app/price/page.tsx
index 212224a..0fbf764 100644
--- a/src/app/price/page.tsx
+++ b/src/app/price/page.tsx
@@ -1,9 +1,17 @@
 import {getData} from "@/cms";
+import Footer from "@/components/Footer";
+import Navbar from "@/components/Navbar";
 import Price from "@/templates/Price";
 import PricePage from "@/types/cms/price";
 
 export default async function Page() {
 	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>
+	);
 }
diff --git a/src/templates/ContactUs.tsx b/src/templates/ContactUs.tsx
index 6efd6c3..cdbce49 100644
--- a/src/templates/ContactUs.tsx
+++ b/src/templates/ContactUs.tsx
@@ -18,9 +18,7 @@ type FormValues = {
 };
 
 interface Props {
-	language: "en" | "ar";
 	data: ContactPage;
-	page: string;
 }
 
 const ErrorMessage = ({message}: {message: string}) => (
@@ -28,7 +26,7 @@ const ErrorMessage = ({message}: {message: string}) => (
 		<span className="text-mti-red">{message}</span>
 	</div>
 );
-export default function App({language, data, page}: Props) {
+export default function App({data}: Props) {
 	const selectOptions = [
 		{
 			label: data.Feedback,
@@ -92,67 +90,63 @@ export default function App({language, data, page}: Props) {
 	return (
 		<>
 			<ToastContainer />
-			<main className="text-mti-black flex h-screen w-full flex-col bg-white" dir={language === "ar" ? "rtl" : "ltr"}>
-				<Navbar currentPage={page} language={language} />
-				<section className="w-full bg-mti-purple text-white text-center p-8 md:p-16">
-					<div className="w-full h-full flex flex-col items-center justify-center">
-						<Title>{data.Title}</Title>
-					</div>
-				</section>
-				<section className="w-full bg-white text-center p-8 md:p-16 flex justify-center items-center gap-32">
-					<form onSubmit={handleSubmit(onSubmit)} className="form-control items-center gap-2 text-mti-black flex flex-col w-96">
-						<input
-							id="name"
-							type="text"
-							placeholder={data.Name}
-							{...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
-							id="email"
-							placeholder={data.Email}
-							type="text"
-							{...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} />}
-						<input
-							id="subject"
-							placeholder={data.Subject}
-							type="text"
-							{...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">
-							<option value="" disabled>
-								{data.SelectType}
+			<section className="w-full bg-mti-purple text-white text-center p-8 md:p-16">
+				<div className="w-full h-full flex flex-col items-center justify-center">
+					<Title>{data.Title}</Title>
+				</div>
+			</section>
+			<section className="w-full bg-white text-center p-8 md:p-16 flex justify-center items-center gap-32">
+				<form onSubmit={handleSubmit(onSubmit)} className="form-control items-center gap-2 text-mti-black flex flex-col w-96">
+					<input
+						id="name"
+						type="text"
+						placeholder={data.Name}
+						{...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
+						id="email"
+						placeholder={data.Email}
+						type="text"
+						{...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} />}
+					<input
+						id="subject"
+						placeholder={data.Subject}
+						type="text"
+						{...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">
+						<option value="" disabled>
+							{data.SelectType}
+						</option>
+						{selectOptions.map((option) => (
+							<option key={option.value} value={option.value}>
+								{option.label}
 							</option>
-							{selectOptions.map((option) => (
-								<option key={option.value} value={option.value}>
-									{option.label}
-								</option>
-							))}
-						</select>
-						{errors.type && errors.type.type === "required" && <ErrorMessage message={data.FieldRequired} />}
-						<textarea
-							id="description"
-							placeholder={data.Description}
-							{...register("description", {required: true})}
-							className="textarea textarea-bordered md:w-full sm:w-1/2 max-w-md"
-							rows={5}
-						/>
-						{errors.description && errors.description.type === "required" && <ErrorMessage message={data.FieldRequired} />}
-						<input type="submit" className="btn" disabled={!isDirty || !isValid} value={data.Submit} />
-					</form>
-					<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>
+						))}
+					</select>
+					{errors.type && errors.type.type === "required" && <ErrorMessage message={data.FieldRequired} />}
+					<textarea
+						id="description"
+						placeholder={data.Description}
+						{...register("description", {required: true})}
+						className="textarea textarea-bordered md:w-full sm:w-1/2 max-w-md"
+						rows={5}
+					/>
+					{errors.description && errors.description.type === "required" && <ErrorMessage message={data.FieldRequired} />}
+					<input type="submit" className="btn" disabled={!isDirty || !isValid} value={data.Submit} />
+				</form>
+				<div className="flex flex-col">
+					<Image src="/person_laptop_focus.jpg" alt="Contact Us" width={500} height={340} className="rounded-xl" />
+				</div>
+			</section>
 		</>
 	);
 }
diff --git a/src/templates/Price.tsx b/src/templates/Price.tsx
index 115f98b..8f50fef 100644
--- a/src/templates/Price.tsx
+++ b/src/templates/Price.tsx
@@ -67,8 +67,7 @@ export default function Page({language, data}: Props) {
 		getData();
 	}, []);
 	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">
 				<h2 className="text-3xl font-bold">{data.Title}</h2>
 				<div className="grid grid-cols-2 gap-8">
@@ -103,7 +102,6 @@ export default function Page({language, data}: Props) {
 					{data.SignUp}
 				</Link>
 			</section>
-			<Footer language={language} />
-		</main>
+		</>
 	);
 }