From 0f258991205dd07cb09763f8930542d5e06d5187 Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Wed, 13 Sep 2023 17:50:58 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F=20Refactor=20component=20?=
 =?UTF-8?q?code=20Added=20TypeScript=20annotations=20for=20better=20type?=
 =?UTF-8?q?=20checking.=20Improved=20code=20readability=20and=20structure.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/app/(client-components)/(HeroSearchForm2Mobile)/(real-estate-search-form)/PropertyTypeSelect.tsx b/src/app/(client-components)/(HeroSearchForm2Mobile)/(real-estate-search-form)/PropertyTypeSelect.tsx
new file mode 100644
index 0000000..4cfea33
--- /dev/null
+++ b/src/app/(client-components)/(HeroSearchForm2Mobile)/(real-estate-search-form)/PropertyTypeSelect.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+import React, { useEffect } from "react";
+import { FC } from "react";
+import Checkbox from "@/shared/Checkbox";
+import { ClassOfProperties } from "../../type";
+
+// DEMO DATA
+
+export interface PropertyTypeSelectProps {
+  onChange?: (data: ClassOfProperties[]) => void;
+  defaultValue?: ClassOfProperties[];
+}
+
+const PropertyTypeSelect: FC<PropertyTypeSelectProps> = ({
+  onChange,
+  defaultValue,
+}) => {
+  const [typeOfProperty, setTypeOfProperty] = React.useState<
+    ClassOfProperties[]
+  >(defaultValue || []);
+
+  useEffect(() => {
+    if (!defaultValue) return;
+    setTypeOfProperty(defaultValue);
+  }, [defaultValue]);
+
+  return (
+    <div className="p-5">
+      <span className="block font-semibold text-xl sm:text-2xl">
+        Property types
+      </span>
+      <div className="relative flex flex-col space-y-5 mt-7">
+        {typeOfProperty.map((item, index) => (
+          <div key={item.name} className="">
+            <Checkbox
+              name={item.name}
+              label={item.name}
+              subLabel={item.description}
+              defaultChecked={typeOfProperty[index].checked}
+              onChange={(e) => {
+                const newState = typeOfProperty.map((item, i) => {
+                  if (i === index) {
+                    return { ...item, checked: e };
+                  }
+                  return item;
+                });
+                setTypeOfProperty(() => {
+                  return newState;
+                });
+                onChange && onChange(newState);
+              }}
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default PropertyTypeSelect;