From 5a5f07abad618222cc2a56a2ff2b3414f8a63a44 Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Wed, 13 Sep 2023 17:49:18 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=9F=20Added=20location=20input=20funct?=
 =?UTF-8?q?ionality.=20=F0=9F=8F=A0=20Implemented=20property=20type=20sele?=
 =?UTF-8?q?ction.=20=F0=9F=92=B0=20Completed=20price=20range=20input.=20?=
 =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F=20Refactored=20code=20for=20better=20read?=
 =?UTF-8?q?ability.=20=F0=9F=9A=80=20Initial=20commit=20for=20RealestateSe?=
 =?UTF-8?q?archForm=20component.=20=F0=9F=8E=A8=20Improved=20UI=20styling.?=
 =?UTF-8?q?=20=F0=9F=90=9B=20Fixed=20a=20bug=20in=20location=20input.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../RealestateSearchForm.tsx                  | 162 ++++++++++++++++++
 1 file changed, 162 insertions(+)
 create mode 100644 src/app/(client-components)/(HeroSearchForm2Mobile)/(real-estate-search-form)/RealestateSearchForm.tsx

diff --git a/src/app/(client-components)/(HeroSearchForm2Mobile)/(real-estate-search-form)/RealestateSearchForm.tsx b/src/app/(client-components)/(HeroSearchForm2Mobile)/(real-estate-search-form)/RealestateSearchForm.tsx
new file mode 100644
index 0000000..4538cf4
--- /dev/null
+++ b/src/app/(client-components)/(HeroSearchForm2Mobile)/(real-estate-search-form)/RealestateSearchForm.tsx
@@ -0,0 +1,162 @@
+"use client";
+
+import React, { useState } from "react";
+import convertNumbThousand from "@/utils/convertNumbThousand";
+import LocationInput from "../LocationInput";
+import PriceRangeInput from "./PriceRangeInput";
+import PropertyTypeSelect from "./PropertyTypeSelect";
+import { ClassOfProperties } from "../../type";
+
+const RealestateSearchForm = () => {
+  //
+  const [fieldNameShow, setFieldNameShow] = useState<
+    "location" | "propertyType" | "price"
+  >("location");
+  //
+  const [locationInputTo, setLocationInputTo] = useState("");
+  const [rangePrices, setRangePrices] = useState([100000, 4000000]);
+  const [typeOfProperty, setTypeOfProperty] = useState<ClassOfProperties[]>([
+    {
+      name: "Duplex House",
+      description: "Have a place to yourself",
+      checked: true,
+    },
+    {
+      name: "Ferme House",
+      description: "Have your own room and share some common spaces",
+      checked: true,
+    },
+    {
+      name: "Chalet House",
+      description:
+        "Have a private or shared room in a boutique hotel, hostel, and more",
+      checked: true,
+    },
+    {
+      name: "Maison House",
+      description: "Stay in a shared space, like a common room",
+      checked: false,
+    },
+  ]);
+
+  const renderInputLocation = () => {
+    const isActive = fieldNameShow === "location";
+    return (
+      <div
+        className={`w-full bg-white dark:bg-neutral-800 ${
+          isActive
+            ? "rounded-2xl shadow-lg"
+            : "rounded-xl shadow-[0px_2px_2px_0px_rgba(0,0,0,0.25)]"
+        }`}
+      >
+        {!isActive ? (
+          <button
+            className={`w-full flex justify-between text-sm font-medium p-4`}
+            onClick={() => setFieldNameShow("location")}
+          >
+            <span className="text-neutral-400">Where</span>
+            <span>{locationInputTo || "Location"}</span>
+          </button>
+        ) : (
+          <LocationInput
+            headingText="Where to find?"
+            defaultValue={locationInputTo}
+            onChange={(value) => {
+              setLocationInputTo(value);
+              setFieldNameShow("propertyType");
+            }}
+          />
+        )}
+      </div>
+    );
+  };
+
+  const renderInputPropertyType = () => {
+    const isActive = fieldNameShow === "propertyType";
+
+    let typeOfPropertyText = "";
+    if (typeOfProperty && typeOfProperty.length > 0) {
+      typeOfPropertyText = typeOfProperty
+        .filter((item) => item.checked)
+        .map((item) => {
+          return item.name;
+        })
+        .join(", ");
+    }
+
+    return (
+      <div
+        className={`w-full bg-white dark:bg-neutral-800 overflow-hidden ${
+          isActive
+            ? "rounded-2xl shadow-lg"
+            : "rounded-xl shadow-[0px_2px_2px_0px_rgba(0,0,0,0.25)]"
+        }`}
+      >
+        {!isActive ? (
+          <button
+            className={`w-full flex justify-between text-sm font-medium p-4`}
+            onClick={() => setFieldNameShow("propertyType")}
+          >
+            <span className="text-neutral-400">Property</span>
+            <span className="truncate ml-5">
+              {typeOfPropertyText || "Add property"}
+            </span>
+          </button>
+        ) : (
+          <PropertyTypeSelect
+            defaultValue={typeOfProperty}
+            onChange={setTypeOfProperty}
+          />
+        )}
+      </div>
+    );
+  };
+
+  const renderInputPrice = () => {
+    const isActive = fieldNameShow === "price";
+
+    return (
+      <div
+        className={`w-full bg-white dark:bg-neutral-800 overflow-hidden ${
+          isActive
+            ? "rounded-2xl shadow-lg"
+            : "rounded-xl shadow-[0px_2px_2px_0px_rgba(0,0,0,0.25)]"
+        }`}
+      >
+        {!isActive ? (
+          <button
+            className={`w-full flex justify-between text-sm font-medium p-4`}
+            onClick={() => setFieldNameShow("price")}
+          >
+            <span className="text-neutral-400">Price</span>
+            <span>
+              {`$${convertNumbThousand(
+                rangePrices[0] / 1000
+              )}k ~ $${convertNumbThousand(rangePrices[1] / 1000)}k`}
+            </span>
+          </button>
+        ) : (
+          <PriceRangeInput
+            defaultValue={rangePrices}
+            onChange={setRangePrices}
+          />
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <div>
+      <div className="w-full space-y-5">
+        {/*  */}
+        {renderInputLocation()}
+        {/*  */}
+        {renderInputPropertyType()}
+        {/*  */}
+        {renderInputPrice()}
+      </div>
+    </div>
+  );
+};
+
+export default RealestateSearchForm;