From 4009f2eba6e141af160879112bd601ad755905cf Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Wed, 13 Sep 2023 17:42:46 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=80=20Implemented=20mobile=20search=20?=
 =?UTF-8?q?form=20=E2=9C=A8=20Added=20dialog=20functionality=20?=
 =?UTF-8?q?=F0=9F=93=B1=20Improved=20mobile=20UI=20=F0=9F=90=9B=20Fixed=20?=
 =?UTF-8?q?bug=20in=20search=20form=20=F0=9F=93=A6=20Refactored=20code=20s?=
 =?UTF-8?q?tructure=20=F0=9F=8C=9F=20Enhanced=20user=20experience=20?=
 =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F=20Optimized=20performance=20=F0=9F=94=84?=
 =?UTF-8?q?=20Updated=20dependencies=20=F0=9F=A7=B9=20Removed=20redundant?=
 =?UTF-8?q?=20code?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/app/(client-components)/(HeroSearchForm2Mobile)/HeroSearchForm2Mobile.tsx b/src/app/(client-components)/(HeroSearchForm2Mobile)/HeroSearchForm2Mobile.tsx
new file mode 100644
index 0000000..828e8fc
--- /dev/null
+++ b/src/app/(client-components)/(HeroSearchForm2Mobile)/HeroSearchForm2Mobile.tsx
@@ -0,0 +1,167 @@
+"use client";
+
+import React, { Fragment, useState } from "react";
+import { Dialog, Tab, Transition } from "@headlessui/react";
+import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
+import { XMarkIcon } from "@heroicons/react/24/solid";
+import ButtonSubmit from "./ButtonSubmit";
+import { useTimeoutFn } from "react-use";
+import StaySearchForm from "./(stay-search-form)/StaySearchForm";
+import CarsSearchForm from "./(car-search-form)/CarsSearchForm";
+import FlightSearchForm from "./(flight-search-form)/FlightSearchForm";
+
+const HeroSearchForm2Mobile = () => {
+  const [showModal, setShowModal] = useState(false);
+
+  // FOR RESET ALL DATA WHEN CLICK CLEAR BUTTON
+  const [showDialog, setShowDialog] = useState(false);
+  let [, , resetIsShowingDialog] = useTimeoutFn(() => setShowDialog(true), 1);
+  //
+  function closeModal() {
+    setShowModal(false);
+  }
+
+  function openModal() {
+    setShowModal(true);
+  }
+
+  const renderButtonOpenModal = () => {
+    return (
+      <button
+        onClick={openModal}
+        className="relative flex items-center w-full border border-neutral-200 dark:border-neutral-6000 px-4 py-2 pr-11 rounded-full shadow-lg"
+      >
+        <MagnifyingGlassIcon className="flex-shrink-0 w-5 h-5" />
+
+        <div className="ml-3 flex-1 text-left overflow-hidden">
+          <span className="block font-medium text-sm">Where to?</span>
+          <span className="block mt-0.5 text-xs font-light text-neutral-500 dark:text-neutral-400 ">
+            <span className="line-clamp-1">
+              Anywhere • Any week • Add guests
+            </span>
+          </span>
+        </div>
+
+        <span className="absolute right-2 top-1/2 transform -translate-y-1/2 w-9 h-9 flex items-center justify-center rounded-full border border-neutral-200 dark:border-neutral-6000 dark:text-neutral-300">
+          <svg
+            viewBox="0 0 16 16"
+            aria-hidden="true"
+            role="presentation"
+            focusable="false"
+            className="block w-4 h-4"
+            fill="currentColor"
+          >
+            <path d="M5 8c1.306 0 2.418.835 2.83 2H14v2H7.829A3.001 3.001 0 1 1 5 8zm0 2a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm6-8a3 3 0 1 1-2.829 4H2V4h6.17A3.001 3.001 0 0 1 11 2zm0 2a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"></path>
+          </svg>
+        </span>
+      </button>
+    );
+  };
+
+  return (
+    <div className="HeroSearchForm2Mobile">
+      {renderButtonOpenModal()}
+      <Transition appear show={showModal} as={Fragment}>
+        <Dialog
+          as="div"
+          className="HeroSearchFormMobile__Dialog relative z-max"
+          onClose={closeModal}
+        >
+          <div className="fixed inset-0 bg-neutral-100 dark:bg-neutral-900">
+            <div className="flex h-full">
+              <Transition.Child
+                as={Fragment}
+                enter="ease-out transition-transform"
+                enterFrom="opacity-0 translate-y-52"
+                enterTo="opacity-100 translate-y-0"
+                leave="ease-in transition-transform"
+                leaveFrom="opacity-100 translate-y-0"
+                leaveTo="opacity-0 translate-y-52"
+              >
+                <Dialog.Panel className="relative h-full overflow-hidden flex-1 flex flex-col justify-between ">
+                  {showDialog && (
+                    <Tab.Group manual>
+                      <div className="absolute left-4 top-4">
+                        <button className="" onClick={closeModal}>
+                          <XMarkIcon className="w-5 h-5 text-black dark:text-white" />
+                        </button>
+                      </div>
+
+                      <Tab.List className="pt-12 flex w-full justify-center font-semibold text-sm sm:text-base text-neutral-500 dark:text-neutral-400 space-x-6 sm:space-x-8">
+                        {["Stay", "Experiences", "Cars", "Flights"].map(
+                          (item, index) => (
+                            <Tab key={index} as={Fragment}>
+                              {({ selected }) => (
+                                <div className="relative focus:outline-none focus-visible:ring-0 outline-none select-none">
+                                  <div
+                                    className={`${
+                                      selected
+                                        ? "text-black dark:text-white"
+                                        : ""
+                                    }  `}
+                                  >
+                                    {item}
+                                  </div>
+                                  {selected && (
+                                    <span className="absolute inset-x-0 top-full border-b-2 border-black dark:border-white"></span>
+                                  )}
+                                </div>
+                              )}
+                            </Tab>
+                          )
+                        )}
+                      </Tab.List>
+                      <div className="flex-1 pt-3 px-1.5 sm:px-4 flex overflow-hidden">
+                        <Tab.Panels className="flex-1 overflow-y-auto hiddenScrollbar py-4">
+                          <Tab.Panel>
+                            <div className="transition-opacity animate-[myblur_0.4s_ease-in-out]">
+                              <StaySearchForm />
+                            </div>
+                          </Tab.Panel>
+                          <Tab.Panel>
+                            <div className="transition-opacity animate-[myblur_0.4s_ease-in-out]">
+                              <StaySearchForm />
+                            </div>
+                          </Tab.Panel>
+                          <Tab.Panel>
+                            <div className="transition-opacity animate-[myblur_0.4s_ease-in-out]">
+                              <CarsSearchForm />
+                            </div>
+                          </Tab.Panel>
+                          <Tab.Panel>
+                            <div className="transition-opacity animate-[myblur_0.4s_ease-in-out]">
+                              <FlightSearchForm />
+                            </div>
+                          </Tab.Panel>
+                        </Tab.Panels>
+                      </div>
+                      <div className="px-4 py-3 bg-white dark:bg-neutral-900 border-t border-neutral-200 dark:border-neutral-700 flex justify-between">
+                        <button
+                          type="button"
+                          className="underline font-semibold flex-shrink-0"
+                          onClick={() => {
+                            setShowDialog(false);
+                            resetIsShowingDialog();
+                          }}
+                        >
+                          Clear all
+                        </button>
+                        <ButtonSubmit
+                          onClick={() => {
+                            closeModal();
+                          }}
+                        />
+                      </div>
+                    </Tab.Group>
+                  )}
+                </Dialog.Panel>
+              </Transition.Child>
+            </div>
+          </div>
+        </Dialog>
+      </Transition>
+    </div>
+  );
+};
+
+export default HeroSearchForm2Mobile;