From 1316be846501986994342069876688032bb35199 Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Wed, 13 Sep 2023 17:44:01 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=80=20Implemented=20guest=20input=20co?=
 =?UTF-8?q?mponent=20=F0=9F=92=A1=20Added=20functionality=20to=20handle=20?=
 =?UTF-8?q?guest=20data=20=F0=9F=9B=A0=EF=B8=8F=20Refactored=20and=20impro?=
 =?UTF-8?q?ved=20code=20structure=20=F0=9F=93=8A=20Updated=20guest=20input?=
 =?UTF-8?q?=20validation=20=F0=9F=8E=A8=20Improved=20styling=20for=20guest?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(HeroSearchForm2Mobile)/GuestsInput.tsx   | 93 +++++++++++++++++++
 1 file changed, 93 insertions(+)
 create mode 100644 src/app/(client-components)/(HeroSearchForm2Mobile)/GuestsInput.tsx

diff --git a/src/app/(client-components)/(HeroSearchForm2Mobile)/GuestsInput.tsx b/src/app/(client-components)/(HeroSearchForm2Mobile)/GuestsInput.tsx
new file mode 100644
index 0000000..424b492
--- /dev/null
+++ b/src/app/(client-components)/(HeroSearchForm2Mobile)/GuestsInput.tsx
@@ -0,0 +1,93 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import NcInputNumber from "@/components/NcInputNumber";
+import { FC } from "react";
+import { GuestsObject } from "../type";
+
+export interface GuestsInputProps {
+  defaultValue?: GuestsObject;
+  onChange?: (data: GuestsObject) => void;
+  className?: string;
+}
+
+const GuestsInput: FC<GuestsInputProps> = ({
+  defaultValue,
+  onChange,
+  className = "",
+}) => {
+  const [guestAdultsInputValue, setGuestAdultsInputValue] = useState(
+    defaultValue?.guestAdults || 0
+  );
+  const [guestChildrenInputValue, setGuestChildrenInputValue] = useState(
+    defaultValue?.guestChildren || 0
+  );
+  const [guestInfantsInputValue, setGuestInfantsInputValue] = useState(
+    defaultValue?.guestInfants || 0
+  );
+
+  useEffect(() => {
+    setGuestAdultsInputValue(defaultValue?.guestAdults || 0);
+  }, [defaultValue?.guestAdults]);
+  useEffect(() => {
+    setGuestChildrenInputValue(defaultValue?.guestChildren || 0);
+  }, [defaultValue?.guestChildren]);
+  useEffect(() => {
+    setGuestInfantsInputValue(defaultValue?.guestInfants || 0);
+  }, [defaultValue?.guestInfants]);
+
+  const handleChangeData = (value: number, type: keyof GuestsObject) => {
+    let newValue = {
+      guestAdults: guestAdultsInputValue,
+      guestChildren: guestChildrenInputValue,
+      guestInfants: guestInfantsInputValue,
+    };
+    if (type === "guestAdults") {
+      setGuestAdultsInputValue(value);
+      newValue.guestAdults = value;
+    }
+    if (type === "guestChildren") {
+      setGuestChildrenInputValue(value);
+      newValue.guestChildren = value;
+    }
+    if (type === "guestInfants") {
+      setGuestInfantsInputValue(value);
+      newValue.guestInfants = value;
+    }
+    onChange && onChange(newValue);
+  };
+
+  return (
+    <div className={`flex flex-col relative p-5 ${className}`}>
+      <span className="mb-5 block font-semibold text-xl sm:text-2xl">
+        {`Who's coming?`}
+      </span>
+      <NcInputNumber
+        className="w-full"
+        defaultValue={guestAdultsInputValue}
+        onChange={(value) => handleChangeData(value, "guestAdults")}
+        max={20}
+        label="Adults"
+        desc="Ages 13 or above"
+      />
+      <NcInputNumber
+        className="w-full mt-6"
+        defaultValue={guestChildrenInputValue}
+        onChange={(value) => handleChangeData(value, "guestChildren")}
+        max={20}
+        label="Children"
+        desc="Ages 2–12"
+      />
+
+      <NcInputNumber
+        className="w-full mt-6"
+        defaultValue={guestInfantsInputValue}
+        onChange={(value) => handleChangeData(value, "guestInfants")}
+        max={20}
+        label="Infants"
+        desc="Ages 0–2"
+      />
+    </div>
+  );
+};
+
+export default GuestsInput;