Browse Source
🚀 Implemented mobile search form
🚀 Implemented mobile search form
✨ Added dialog functionality 📱 Improved mobile UI 🐛 Fixed bug in search form 📦 Refactored code structure 🌟 Enhanced user experience 🛠️ Optimized performance 🔄 Updated dependencies 🧹 Removed redundant codemain
John Doe
1 year ago
1 changed files with 167 additions and 0 deletions
@ -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; |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue