From 9717e3e949b938a14f99fbfc3285ee4778afa68b Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Wed, 13 Sep 2023 19:39:43 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=9F=20Added=20HeroRealEstateSearchForm?=
 =?UTF-8?q?=20component=20=F0=9F=9A=80=20Implemented=20tab=20functionality?=
 =?UTF-8?q?=20=F0=9F=96=8C=EF=B8=8F=20Styled=20tab=20navigation=20?=
 =?UTF-8?q?=F0=9F=93=9D=20Updated=20component=20documentation=20?=
 =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F=20Refactored=20code=20for=20better=20read?=
 =?UTF-8?q?ability=20=F0=9F=A9=B9=20Fixed=20minor=20bugs=20in=20HeroRealEs?=
 =?UTF-8?q?tateSearchForm=20=F0=9F=93=A6=20Imported=20RealEstateSearchForm?=
 =?UTF-8?q?=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/app/(client-components)/(HeroSearchForm)/(real-estate-search-form)/HeroRealEstateSearchForm.tsx b/src/app/(client-components)/(HeroSearchForm)/(real-estate-search-form)/HeroRealEstateSearchForm.tsx
new file mode 100644
index 0000000..3d17238
--- /dev/null
+++ b/src/app/(client-components)/(HeroSearchForm)/(real-estate-search-form)/HeroRealEstateSearchForm.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import React, { FC, useState } from "react";
+import RealEstateSearchForm from "./RealEstateSearchForm";
+
+export type SearchRealEstateTab = "Buy" | "Rent" | "Sell";
+
+export interface HeroRealEstateSearchFormProps {
+  className?: string;
+  currentTab?: SearchRealEstateTab;
+}
+
+const HeroRealEstateSearchForm: FC<HeroRealEstateSearchFormProps> = ({
+  className = "",
+  currentTab = "Buy",
+}) => {
+  const tabs: SearchRealEstateTab[] = ["Buy", "Rent", "Sell"];
+  const [tabActive, setTabActive] = useState<SearchRealEstateTab>(currentTab);
+
+  const renderTab = () => {
+    return (
+      <ul className="ml-6 md:ml-16 xl:ml-20 inline-flex space-x-4 sm:space-x-8 lg:space-x-10 bg-white dark:bg-neutral-900 pb-6 md:p-6 !pl-0 xl:p-0 rounded-t-3xl">
+        {tabs.map((tab) => {
+          const active = tab === tabActive;
+          return (
+            <li
+              onClick={() => setTabActive(tab)}
+              className={`flex items-center cursor-pointer text-sm lg:text-base font-medium ${
+                active
+                  ? ""
+                  : "text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-100"
+              } `}
+              key={tab}
+            >
+              {active && (
+                <span className="block w-2.5 h-2.5 rounded-full bg-neutral-800 dark:bg-neutral-100 mr-2" />
+              )}
+              <span>{tab}</span>
+            </li>
+          );
+        })}
+      </ul>
+    );
+  };
+
+  const renderForm = () => {
+    switch (tabActive) {
+      case "Buy":
+        return <RealEstateSearchForm />;
+
+      default:
+        return <RealEstateSearchForm />;
+    }
+  };
+
+  return (
+    <div
+      className={`nc-HeroRealEstateSearchForm w-full max-w-6xl py-5 lg:py-0 ${className}`}
+    >
+      {renderTab()}
+      {renderForm()}
+    </div>
+  );
+};
+
+export default HeroRealEstateSearchForm;