From 201bbb93da401aec05dde52d4aca95a773ebbd14 Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Tue, 12 Sep 2023 21:03:01 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Updated=20MobileFooterSticky=20c?=
 =?UTF-8?q?omponent=20=F0=9F=93=85=20Improved=20date=20handling=20?=
 =?UTF-8?q?=F0=9F=8F=A0=20Enhanced=20UI=20for=20mobile=20=F0=9F=AA=99=20Ad?=
 =?UTF-8?q?ded=20price=20display=20=F0=9F=9B=8B=EF=B8=8F=20Improved=20rese?=
 =?UTF-8?q?rvation=20button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/app/(listing-detail)/(components)/MobileFooterSticky.tsx b/src/app/(listing-detail)/(components)/MobileFooterSticky.tsx
new file mode 100644
index 0000000..7f48336
--- /dev/null
+++ b/src/app/(listing-detail)/(components)/MobileFooterSticky.tsx
@@ -0,0 +1,49 @@
+import React, { useState } from "react";
+import ModalSelectDate from "@/components/ModalSelectDate";
+import ButtonPrimary from "@/shared/ButtonPrimary";
+import converSelectedDateToString from "@/utils/converSelectedDateToString";
+import ModalReserveMobile from "./ModalReserveMobile";
+
+const MobileFooterSticky = () => {
+  const [startDate, setStartDate] = useState<Date | null>(
+    new Date("2023/02/06")
+  );
+  const [endDate, setEndDate] = useState<Date | null>(new Date("2023/02/23"));
+
+  return (
+    <div className="block lg:hidden fixed bottom-0 inset-x-0 py-2 sm:py-3 bg-white dark:bg-neutral-800 border-t border-neutral-200 dark:border-neutral-6000 z-40">
+      <div className="container flex items-center justify-between">
+        <div className="">
+          <span className="block text-xl font-semibold">
+            $311
+            <span className="ml-1 text-sm font-normal text-neutral-500 dark:text-neutral-400">
+              /night
+            </span>
+          </span>
+          <ModalSelectDate
+            renderChildren={({ openModal }) => (
+              <span
+                onClick={openModal}
+                className="block text-sm underline font-medium"
+              >
+                {converSelectedDateToString([startDate, endDate])}
+              </span>
+            )}
+          />
+        </div>
+        <ModalReserveMobile
+          renderChildren={({ openModal }) => (
+            <ButtonPrimary
+              sizeClass="px-5 sm:px-7 py-3 !rounded-2xl"
+              onClick={openModal}
+            >
+              Reserve
+            </ButtonPrimary>
+          )}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default MobileFooterSticky;