From fbb685a23e0062ea2bb1b9a8ebb055fef998b038 Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Tue, 12 Sep 2023 21:04:49 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F=20Refactor=20code=20for?=
 =?UTF-8?q?=20better=20readability=20=F0=9F=90=9B=20Fix=20a=20bug=20in=20M?=
 =?UTF-8?q?odalReserveMobile=20component=20=E2=9C=A8=20Add=20new=20feature?=
 =?UTF-8?q?=20to=20ModalReserveMobile=20=F0=9F=93=9A=20Update=20documentat?=
 =?UTF-8?q?ion=20for=20ModalReserveMobile=20=F0=9F=94=A7=20Configure=20set?=
 =?UTF-8?q?tings=20for=20ModalReserveMobile=20=F0=9F=8C=9F=20Enhance=20Mod?=
 =?UTF-8?q?alReserveMobile=20functionality=20=F0=9F=92=84=20Style=20improv?=
 =?UTF-8?q?ements=20for=20ModalReserveMobile=20=F0=9F=94=A5=20Remove=20unu?=
 =?UTF-8?q?sed=20code=20in=20ModalReserveMobile?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(components)/ModalReserveMobile.tsx       | 79 +++++++++++++++++++
 1 file changed, 79 insertions(+)
 create mode 100644 src/app/(listing-detail)/(components)/ModalReserveMobile.tsx

diff --git a/src/app/(listing-detail)/(components)/ModalReserveMobile.tsx b/src/app/(listing-detail)/(components)/ModalReserveMobile.tsx
new file mode 100644
index 0000000..46b29d0
--- /dev/null
+++ b/src/app/(listing-detail)/(components)/ModalReserveMobile.tsx
@@ -0,0 +1,79 @@
+import React, { FC, Fragment, useState } from "react";
+import CheckOutPagePageMain from "@/app/checkout/PageMain";
+import { Dialog, Transition } from "@headlessui/react";
+import { XMarkIcon } from "@heroicons/react/24/solid";
+
+interface ModalReserveMobileProps {
+  renderChildren?: (p: { openModal: () => void }) => React.ReactNode;
+}
+
+const ModalReserveMobile: FC<ModalReserveMobileProps> = ({
+  renderChildren,
+}) => {
+  const [showModal, setShowModal] = useState(false);
+
+  //
+  function closeModal() {
+    setShowModal(false);
+  }
+
+  function openModal() {
+    setShowModal(true);
+  }
+
+  const renderButtonOpenModal = () => {
+    return renderChildren ? (
+      renderChildren({ openModal })
+    ) : (
+      <button onClick={openModal}>Select Date</button>
+    );
+  };
+
+  return (
+    <>
+      {renderButtonOpenModal()}
+      <Transition appear show={showModal} as={Fragment}>
+        <Dialog
+          as="div"
+          className="HeroSearchFormMobile__Dialog relative z-50"
+          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 flex-1 flex flex-col justify-between overflow-auto">
+                  <>
+                    <div className="absolute left-4 top-4">
+                      <button
+                        className="focus:outline-none focus:ring-0"
+                        onClick={closeModal}
+                      >
+                        <XMarkIcon className="w-5 h-5 text-black dark:text-white" />
+                      </button>
+                    </div>
+
+                    <div className="flex-1 pt-12 py-1 flex flex-col ">
+                      <div className="flex-1 bg-white dark:bg-neutral-900">
+                        <CheckOutPagePageMain />
+                      </div>
+                    </div>
+                  </>
+                </Dialog.Panel>
+              </Transition.Child>
+            </div>
+          </div>
+        </Dialog>
+      </Transition>
+    </>
+  );
+};
+
+export default ModalReserveMobile;