fix: refactor layout and styling for SingleWeekPicker component

playground/app.tsx

@@ -10,8 +10,9 @@ export default () => {
 
 	return (<div className='app'>
 		<div className="border">
+			<div>
 				<SingleWeekPicker />
-			<SingleDatePicker />
+			</div>
 		</div>
 	</div>)
 }

src/components/SingleDatePicker.tsx

@@ -121,7 +121,7 @@ const SingleDatePicker: React.FC<SingleDatePickerProps> = ({ value, onSelect, lo
 			hoverColor: hoverColor,
 			borderColor: borderColor
 		})
-	} , [mainColor, accentColor, reversedColor, hoverColor, borderColor])
+	}, [mainColor, accentColor, reversedColor, hoverColor, borderColor])
 
 	function selectDate(date: Date) {
 		setSelectedDate(date)
@@ -175,6 +175,7 @@ const SingleDatePicker: React.FC<SingleDatePickerProps> = ({ value, onSelect, lo
 					setCurrentYear(currentYear + 1)
 				}} aria-label={`Go to next year, ${currentYear + 1}, you are now at year ${currentYear}`}> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg></button>
 			</div>
+			<div className='body'>
 				<div className='month-selector-body'>
 					{Array.from({ length: 12 }).map((_, index) => <button className={`item`} key={index} onClick={() => {
 						setCurrentMonth(index)
@@ -183,7 +184,8 @@ const SingleDatePicker: React.FC<SingleDatePickerProps> = ({ value, onSelect, lo
 						{new Date(currentYear, index).toLocaleString(localization || navigator.language, { month: 'long' })}
 					</button>)}
 				</div>
-			{ !!onClose && <button className='sr-only' onClick={onClose}>Close the panel</button> }
+			</div>
+			{!!onClose && <button className='sr-only' onClick={onClose}>Close the panel</button>}
 		</div>
 	)
 	else return (
@@ -195,6 +197,7 @@ const SingleDatePicker: React.FC<SingleDatePickerProps> = ({ value, onSelect, lo
 				</button>
 				<button className='stepper' onClick={skipToNextMonth} aria-label={`Go to next month, ${new Date(currentYear, currentMonth + 1).toLocaleString(localization || navigator.language, { month: 'long' })}`}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg></button>
 			</div>
+			<div className='body'>
 				<div className='calendar-view-body grid' aria-live="polite">
 					{l10nDays.map((day, index) => <div className='item day-indicator' key={index}>{day}</div>)}
 
@@ -211,7 +214,8 @@ const SingleDatePicker: React.FC<SingleDatePickerProps> = ({ value, onSelect, lo
 						{date.toDateString() === new Date().toDateString() && <svg xmlns="http://www.w3.org/2000/svg" className='today-indicator' viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"></path></svg>}
 					</button>)}
 				</div>
-			{ !!onClose && <button className='sr-only' onClick={onClose}>Close the panel</button> }
+			</div>
+			{!!onClose && <button className='sr-only' onClick={onClose}>Close the panel</button>}
 		</div>
 	)
 }

src/components/SingleWeekPicker.tsx

@@ -133,6 +133,16 @@ export default ({ localization, mainColor = '#000000', accentColor = '#000000',
 				<button className='stepper' onClick={skipToNextMonth} aria-label={`Go to next month, ${new Date(currentYear, currentMonth + 1).toLocaleString(localization || navigator.language, { month: 'long' })}`}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg></button>
 			</div>
 
+			<div className="body">
+				<div className="week-indicator">
+					<div className="item title">Wk</div>
+
+					{calendarWeeks.map(week => <div className={`item ${selectedWeek.weekNum === calculateWeekNum(week[0]).weekNum && selectedWeek.weekYear === calculateWeekNum(week[0]).weekYear ? 'active' : ''}`} key={calculateWeekNum(week[0]).weekNum} onClick={() => selectWeek(week[0])}>
+						{calculateWeekNum(week[0]).weekNum}
+					</div>)}
+
+				</div>
+
 				<div className='calendar-view-body flex' aria-live="polite">
 					<div className="listitem">
 						{Array.from({ length: 7 }).map((_, index) => <div className='item day-indicator' key={index}>{l10nDays[index]}</div>)}
@@ -152,5 +162,6 @@ export default ({ localization, mainColor = '#000000', accentColor = '#000000',
 					})}
 				</div>
 			</div>
+		</div>
 	}
 }

src/style.scss

@@ -7,6 +7,7 @@
 		background: none;
 		cursor: pointer;
 		color: var(--datenel-main-color);
+
 		&:hover {
 			background: var(--datenel-hover-color);
 		}
@@ -36,7 +37,7 @@
 				height: 1rem;
 			}
 
-			&.stepper{
+			&.stepper {
 				width: 1.75rem;
 				height: 1.75rem;
 				display: flex;
@@ -52,27 +53,33 @@
 		}
 
 		input.indicator {
-			border:none;
+			border: none;
 			background: none;
 			text-align: center;
 			outline: none;
 			border-radius: 0.25rem;
 			padding: 0.25rem 0;
 			color: var(--datenel-main-color);
+
 			&:hover {
 				background: var(--datenel-hover-color);
 			}
 		}
 	}
 
+	.body {
+		display: flex;
 		.calendar-view-body {
 			padding: 0.75rem;
 			gap: 0.125rem;
-		&.grid{
+
+			&.grid {
 				display: grid;
 				grid-template-columns: repeat(7, 1fr);
+
 				.item.date {
 					border-radius: 50%;
+
 					&.extra-month {
 						cursor: default;
 					}
@@ -83,20 +90,25 @@
 					}
 				}
 			}
+
 			&.flex {
 				display: flex;
 				flex-direction: column;
+
 				.listitem {
 					padding: 0;
 					display: grid;
 					grid-template-columns: repeat(7, 1fr);
 					border-radius: 1rem;
+
 					.item.date {
 						background: none;
 					}
+
 					&.active {
 						background: var(--datenel-accent-color);
 						color: var(--datenel-reversed-color);
+
 						.extra-month {
 							opacity: 0.5;
 						}
@@ -104,6 +116,7 @@
 				}
 
 			}
+
 			.item {
 				width: 2rem;
 				height: 2rem;
@@ -112,12 +125,15 @@
 				align-items: center;
 				font-size: 0.75rem;
 				position: relative;
+
 				&.extra-month {
 					opacity: 0.3;
 				}
+
 				&.day-indicator {
 					opacity: 0.5;
 				}
+
 				.today-indicator {
 					position: absolute;
 					bottom: 0.25rem;
@@ -132,9 +148,37 @@
 			grid-template-columns: repeat(3, 1fr);
 			padding: 0.75rem;
 			gap: 0.125rem;
+
 			.item {
 				border-radius: 0.25rem;
 				height: 2rem;
 			}
 		}
+
+		.week-indicator {
+			display: flex;
+			flex-direction: column;
+			border-right: 1px solid var(--datenel-border-color);
+			gap: 0.125rem;
+			padding: 0.75rem;
+
+			.item {
+				font-size: 0.75rem;
+				width: 2rem;
+				height: 2rem;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				border-radius: 50%;
+			}
+
+			.item.title {
+				opacity: 0.5;
+			}
+			.item.active {
+				background: var(--datenel-accent-color);
+				color: var(--datenel-reversed-color);
+			}
+		}
+	}
 }