From 46c8083dab11a0f4146d823ce1fd1dbe665e39cc Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Wed, 13 Sep 2023 17:45:49 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Refactor=20date=20picker=20compo?=
 =?UTF-8?q?nent=20=F0=9F=93=85=20Update=20date=20handling=20logic=20?=
 =?UTF-8?q?=F0=9F=92=84=20Improve=20UI=20layout=20=F0=9F=90=9B=20Fix=20dat?=
 =?UTF-8?q?e=20selection=20issue=20=F0=9F=9A=80=20Ready=20for=20production?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/app/(client-components)/(HeroSearchForm2Mobile)/DatesRangeInput.tsx b/src/app/(client-components)/(HeroSearchForm2Mobile)/DatesRangeInput.tsx
new file mode 100644
index 0000000..08800ee
--- /dev/null
+++ b/src/app/(client-components)/(HeroSearchForm2Mobile)/DatesRangeInput.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import DatePicker from "react-datepicker";
+import React, { FC, Fragment, useEffect, useState } from "react";
+import DatePickerCustomHeaderTwoMonth from "@/components/DatePickerCustomHeaderTwoMonth";
+import DatePickerCustomDay from "@/components/DatePickerCustomDay";
+
+export interface StayDatesRangeInputProps {
+  className?: string;
+}
+
+const StayDatesRangeInput: FC<StayDatesRangeInputProps> = ({
+  className = "",
+}) => {
+  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);
+  };
+
+  return (
+    <div>
+      <div className="p-5">
+        <span className="block font-semibold text-xl sm:text-2xl">
+          {` When's your trip?`}
+        </span>
+      </div>
+      <div
+        className={`relative flex-shrink-0 flex justify-center z-10 py-5 ${className} `}
+      >
+        <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>
+    </div>
+  );
+};
+
+export default StayDatesRangeInput;