From f63cb519f22faa43d5561773fb420019934bcfda Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Tue, 12 Sep 2023 19:41:21 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F=20Refactor=20date=20handl?=
 =?UTF-8?q?ing=20logic=20=F0=9F=93=85=20Update=20date=20picker=20component?=
 =?UTF-8?q?=20=E2=9C=A8=20Add=20custom=20header=20for=20two-month=20view?=
 =?UTF-8?q?=20=F0=9F=8E=A8=20Improve=20date=20rendering=20=F0=9F=9A=80=20I?=
 =?UTF-8?q?nitial=20implementation=20of=20SectionDateRange=20component=20?=
 =?UTF-8?q?=F0=9F=A9=B9=20Fix=20date=20range=20selection=20issue=20?=
 =?UTF-8?q?=F0=9F=93=9D=20Update=20documentation=20for=20SectionDateRange?=
 =?UTF-8?q?=20component=20=F0=9F=90=9B=20Fix=20bugs=20related=20to=20date?=
 =?UTF-8?q?=20handling=20=F0=9F=8C=9F=20Implement=20advanced=20date=20sele?=
 =?UTF-8?q?ction=20feature?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/app/(listing-detail)/SectionDateRange.tsx b/src/app/(listing-detail)/SectionDateRange.tsx
new file mode 100644
index 0000000..5195168
--- /dev/null
+++ b/src/app/(listing-detail)/SectionDateRange.tsx
@@ -0,0 +1,55 @@
+import React, { FC, Fragment, useState } from "react";
+import DatePicker from "react-datepicker";
+import DatePickerCustomHeaderTwoMonth from "@/components/DatePickerCustomHeaderTwoMonth";
+import DatePickerCustomDay from "@/components/DatePickerCustomDay";
+
+const SectionDateRange = () => {
+  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 renderSectionCheckIndate = () => {
+    return (
+      <div className="listingSection__wrap overflow-hidden">
+        {/* HEADING */}
+        <div>
+          <h2 className="text-2xl font-semibold">Availability</h2>
+          <span className="block mt-2 text-neutral-500 dark:text-neutral-400">
+            Prices may increase on weekends or holidays
+          </span>
+        </div>
+        <div className="w-14 border-b border-neutral-200 dark:border-neutral-700"></div>
+        {/* CONTENT */}
+
+        <div 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>
+    );
+  };
+
+  return renderSectionCheckIndate();
+};
+
+export default SectionDateRange;