From 25a79df55fbb3fcc5fb598706cca8a5f80392b76 Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Mon, 11 Sep 2023 17:11:04 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F=20Refactor=20code=20for?=
 =?UTF-8?q?=20better=20readability=20=F0=9F=9A=A7=20Work=20in=20progress:?=
 =?UTF-8?q?=20Implementing=20date=20picker=20header=20=F0=9F=8C=9F=20Added?=
 =?UTF-8?q?=20custom=20header=20component=20=F0=9F=94=A7=20Adjusted=20butt?=
 =?UTF-8?q?on=20styles=20for=20date=20picker=20=F0=9F=93=85=20Improved=20d?=
 =?UTF-8?q?ate=20formatting=20in=20the=20header=20=F0=9F=8E=A8=20Updated?=
 =?UTF-8?q?=20component=20styles=20=F0=9F=90=9B=20Fixed=20a=20bug=20in=20t?=
 =?UTF-8?q?he=20custom=20header?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DatePickerCustomHeaderTwoMonth.tsx        | 47 +++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 src/components/DatePickerCustomHeaderTwoMonth.tsx

diff --git a/src/components/DatePickerCustomHeaderTwoMonth.tsx b/src/components/DatePickerCustomHeaderTwoMonth.tsx
new file mode 100644
index 0000000..ad2fafc
--- /dev/null
+++ b/src/components/DatePickerCustomHeaderTwoMonth.tsx
@@ -0,0 +1,47 @@
+import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/24/outline";
+import React from "react";
+import { ReactDatePickerCustomHeaderProps } from "react-datepicker";
+
+const DatePickerCustomHeaderTwoMonth = ({
+  monthDate,
+  customHeaderCount,
+  decreaseMonth,
+  increaseMonth,
+}: ReactDatePickerCustomHeaderProps) => {
+  return (
+    <div>
+      <button
+        aria-label="Previous Month"
+        className={
+          "react-datepicker__navigation react-datepicker__navigation--previous absolute -top-1 left-0 flex items-center justify-center p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700"
+        }
+        style={customHeaderCount === 1 ? { visibility: "hidden" } : {}}
+        onClick={decreaseMonth}
+        type="button"
+      >
+        <span className="react-datepicker__navigation-icon react-datepicker__navigation-icon--previous">
+          <ChevronLeftIcon className="w-5 h-5" />
+        </span>
+      </button>
+      <span className="react-datepicker__current-month">
+        {monthDate.toLocaleString("en-US", {
+          month: "long",
+          year: "numeric",
+        })}
+      </span>
+      <button
+        aria-label="Next Month"
+        className="react-datepicker__navigation react-datepicker__navigation--next absolute -top-1 -right-0 flex items-center justify-center p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full"
+        style={customHeaderCount === 0 ? { visibility: "hidden" } : {}}
+        type="button"
+        onClick={increaseMonth}
+      >
+        <span className="react-datepicker__navigation-icon react-datepicker__navigation-icon--next">
+          <ChevronRightIcon className="w-5 h-5" />
+        </span>
+      </button>
+    </div>
+  );
+};
+
+export default DatePickerCustomHeaderTwoMonth;