From 18942abaa12b25e582f63f1da00ded955c96a8e5 Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Tue, 12 Sep 2023 20:58:35 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F=20Refactored=20the=20Stay?=
 =?UTF-8?q?DatesRangeInput=20component=20=F0=9F=93=85=20Updated=20date=20h?=
 =?UTF-8?q?andling=20for=20better=20user=20experience=20=F0=9F=94=A7=20Fix?=
 =?UTF-8?q?ed=20minor=20issues=20with=20date=20selection=20=F0=9F=92=A1=20?=
 =?UTF-8?q?Added=20comments=20for=20clarity=20=F0=9F=9A=80=20Ready=20to=20?=
 =?UTF-8?q?test=20and=20deploy!?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../StayDatesRangeInput.tsx                   | 109 ++++++++++++++++++
 1 file changed, 109 insertions(+)
 create mode 100644 src/app/(listing-detail)/listing-experiences-detail/StayDatesRangeInput.tsx

diff --git a/src/app/(listing-detail)/listing-experiences-detail/StayDatesRangeInput.tsx b/src/app/(listing-detail)/listing-experiences-detail/StayDatesRangeInput.tsx
new file mode 100644
index 0000000..7b00e12
--- /dev/null
+++ b/src/app/(listing-detail)/listing-experiences-detail/StayDatesRangeInput.tsx
@@ -0,0 +1,109 @@
+"use client";
+
+import React, { Fragment, useState, FC } from "react";
+import { Popover, Transition } from "@headlessui/react";
+import { CalendarIcon } from "@heroicons/react/24/outline";
+import DatePickerCustomHeaderTwoMonth from "@/components/DatePickerCustomHeaderTwoMonth";
+import DatePickerCustomDay from "@/components/DatePickerCustomDay";
+import DatePicker from "react-datepicker";
+import ClearDataButton from "@/app/(client-components)/(HeroSearchForm)/ClearDataButton";
+
+export interface StayDatesRangeInputProps {
+  className?: string;
+}
+
+const StayDatesRangeInput: FC<StayDatesRangeInputProps> = ({
+  className = "flex-1",
+}) => {
+  const [startDate, setStartDate] = useState<Date | null>(
+    new Date("2023/02/06")
+  );
+  const [endDate, setEndDate] = useState<Date | null>(new Date("2023/02/23"));
+  //
+
+  const onChangeDate = (dates: [Date | null, Date | null]) => {
+    const [start, end] = dates;
+    setStartDate(start);
+    setEndDate(end);
+  };
+
+  const renderInput = () => {
+    return (
+      <>
+        <div className="text-neutral-300 dark:text-neutral-400">
+          <CalendarIcon className="w-5 h-5 lg:w-7 lg:h-7" />
+        </div>
+        <div className="flex-grow text-left">
+          <span className="block xl:text-lg font-semibold">
+            {startDate?.toLocaleDateString("en-US", {
+              month: "short",
+              day: "2-digit",
+            }) || "Add dates"}
+            {endDate
+              ? " - " +
+                endDate?.toLocaleDateString("en-US", {
+                  month: "short",
+                  day: "2-digit",
+                })
+              : ""}
+          </span>
+          <span className="block mt-1 text-sm text-neutral-400 leading-none font-light">
+            {"Check in - Check out"}
+          </span>
+        </div>
+      </>
+    );
+  };
+
+  return (
+    <Popover className={`StayDatesRangeInput z-10 relative flex ${className}`}>
+      {({ open }) => (
+        <>
+          <Popover.Button
+            className={`flex-1 flex relative p-3 items-center space-x-3 focus:outline-none ${
+              open ? "shadow-lg" : ""
+            }`}
+          >
+            {renderInput()}
+            {startDate && open && (
+              <ClearDataButton onClick={() => onChangeDate([null, null])} />
+            )}
+          </Popover.Button>
+
+          <Transition
+            as={Fragment}
+            enter="transition ease-out duration-200"
+            enterFrom="opacity-0 translate-y-1"
+            enterTo="opacity-100 translate-y-0"
+            leave="transition ease-in duration-150"
+            leaveFrom="opacity-100 translate-y-0"
+            leaveTo="opacity-0 translate-y-1"
+          >
+            <Popover.Panel className="absolute left-auto xl:-right-10 right-0 z-10 mt-3 top-full w-screen max-w-sm px-4 sm:px-0 lg:max-w-3xl">
+              <div className="overflow-hidden rounded-3xl shadow-lg ring-1 ring-black ring-opacity-5 bg-white dark:bg-neutral-800 p-8">
+                <DatePicker
+                  selected={startDate}
+                  onChange={onChangeDate}
+                  startDate={startDate}
+                  endDate={endDate}
+                  selectsRange
+                  monthsShown={2}
+                  showPopperArrow={false}
+                  inline
+                  renderCustomHeader={(p) => (
+                    <DatePickerCustomHeaderTwoMonth {...p} />
+                  )}
+                  renderDayContents={(day, date) => (
+                    <DatePickerCustomDay dayOfMonth={day} date={date} />
+                  )}
+                />
+              </div>
+            </Popover.Panel>
+          </Transition>
+        </>
+      )}
+    </Popover>
+  );
+};
+
+export default StayDatesRangeInput;