feat: sort timezones by city

Author: coderbyheart

src/App.tsx

@@ -7,10 +7,15 @@ import { GlobalStyle } from './style/Global'
 import { Schedule } from './Schedule'
 import { format } from 'date-fns'
 import { ThemeProvider } from 'styled-components'
-import { Button, Input, DateEditor, StyledDaySelector } from './style/Form'
+import {
+	Button,
+	Input,
+	DateEditor,
+	StyledDaySelector,
+	StyledTimeZoneSelector,
+} from './style/Form'
 import { Editor } from './Editor'
 import { ThemeSwitcher } from './ThemeSwitcher'
-import { TimeZoneSelector } from './timezones'
 
 import LockIcon from 'feather-icons/dist/icons/lock.svg'
 import UnLockIcon from 'feather-icons/dist/icons/unlock.svg'
@@ -99,7 +104,7 @@ export const App = () => {
 									onChange={({ target: { value } }) => updateName(value)}
 								/>
 								<StyledDaySelector day={updatedDay} onUpdate={updateDay} />
-								<TimeZoneSelector
+								<StyledTimeZoneSelector
 									value={updatedTimeZone}
 									onChange={({ target: { value } }) => updateTimeZone(value)}
 								/>

src/style/Form.tsx

@@ -1,5 +1,6 @@
 import styled from 'styled-components'
 import { DaySelector } from '../DaySelector'
+import { TimeZoneSelector } from '../timezones'
 import { wideBreakpoint, mobileBreakpoint } from './settings'
 
 export const Button = styled.button`
@@ -46,6 +47,18 @@ export const StyledDaySelector = styled(DaySelector)`
 	}
 `
 
+export const StyledTimeZoneSelector = styled(TimeZoneSelector)`
+	background-color: transparent;
+	border: 1px solid ${(props) => props.theme.colors.text};
+	padding: 0.25rem 0.5rem;
+	height: 40px;
+	color: ${(props) => props.theme.colors.text};
+	option {
+		color: black;
+	}
+	margin: 0;
+`
+
 export const NumberInput = styled(Input)`
 	width: 30px;
 	@media (min-width: ${mobileBreakpoint}) {
@@ -57,17 +70,7 @@ export const DateEditor = styled.div`
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	select {
-		height: 30px;
-	}
-	${Input} + ${Input}, ${Input} + select {
-		margin-top: 0.5rem;
-	}
 	@media (min-width: ${wideBreakpoint}) {
 		flex-direction: row;
-		${Input} + ${Input}, ${Input} + select {
-			margin-left: 0.5rem;
-			margin-top: 0;
-		}
 	}
 `

src/timezones.tsx

@@ -349,7 +349,7 @@ export const timezones = [
 	'Pacific/Tongatapu',
 	'Pacific/Wake',
 	'Pacific/Wallis',
-] as const
+]
 
 export const TimeZoneSelector = (
 	props: React.DetailedHTMLProps<
@@ -358,8 +358,19 @@ export const TimeZoneSelector = (
 	>,
 ) => (
 	<select {...props}>
-		{timezones.map((tz) => (
-			<option key={tz}>{tz}</option>
-		))}
+		{timezones
+			.sort((a, b) => {
+				const [, a2, a3] = a.split('/')
+				const [, b2, b3] = b.split('/')
+				return (a3 ?? a2).localeCompare(b3 ?? b2)
+			})
+			.map((tz) => {
+				const [t1, t2, t3] = tz.split('/')
+				return (
+					<option key={tz} value={tz}>
+						{t3 ?? t2} ({t3 === undefined ? t1 : `${t1}/${t2}`})
+					</option>
+				)
+			})}
 	</select>
 )