From 52e4695ad513a29b7acc594cc31d702397dbbffe Mon Sep 17 00:00:00 2001
From: Astrian Zheng <happy.wheel6743@astrian.moe>
Date: Wed, 19 Feb 2025 15:05:34 +1100
Subject: [PATCH] refactor: add month navigation functionality to
 SingleDatePicker component

---
 src/components/SingleDatePicker.tsx | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/components/SingleDatePicker.tsx b/src/components/SingleDatePicker.tsx
index 91073e5..df4616e 100644
--- a/src/components/SingleDatePicker.tsx
+++ b/src/components/SingleDatePicker.tsx
@@ -18,13 +18,29 @@ export default () => {
 		setSelectedDate(date)
 	}
 
+	function skipToLastMonth() {
+		if (currentMonth === 0) {
+			setCurrentMonth(11)
+			setCurrentYear(currentYear - 1)
+		}
+		else setCurrentMonth(currentMonth - 1)
+	}
+
+	function skipToNextMonth() {
+		if (currentMonth === 11) {
+			setCurrentMonth(0)
+			setCurrentYear(currentYear + 1)
+		}
+		else setCurrentMonth(currentMonth + 1)
+	}
+
 	return (<div className='datenel-component'>
 		<div className='header'>
-			<button className='month-stepper'><img src={LeftArrowIcon} /></button>
+			<button className='month-stepper' onClick={skipToLastMonth}><img src={LeftArrowIcon} /></button>
 			<button className='month-indicator'>
 				{new Date(currentYear, currentMonth).toLocaleString('default', { month: 'long', year: 'numeric' })}
 			</button>
-			<button className='month-stepper'><img src={RightArrowIcon} /></button>
+			<button className='month-stepper' onClick={skipToNextMonth}><img src={RightArrowIcon} /></button>
 		</div>
 		<div className='body'>