Typing and Density settings

src/pages/settings/components/Theming/TimeOfDay.tsx

@@ -0,0 +1,49 @@
+import { Stack } from '@mantine/core';
+import type { Theme } from 'types';
+import ThemeSelect from './ThemeSelect';
+
+function TimeOfDay({
+	createPlaylist,
+	themeList,
+	allThemes,
+	selectedPlaylist,
+}: { createPlaylist: any; themeList: any; allThemes: Theme[]; selectedPlaylist: any }) {
+	return (
+		<Stack>
+			<ThemeSelect
+				allThemes={allThemes}
+				createPlaylist={createPlaylist}
+				themeList={themeList}
+				selectedPlaylist={selectedPlaylist}
+				index='0'
+				timeIndex='00:00 - 05:59'
+			/>
+			<ThemeSelect
+				allThemes={allThemes}
+				createPlaylist={createPlaylist}
+				themeList={themeList}
+				selectedPlaylist={selectedPlaylist}
+				index='1'
+				timeIndex='06:00 - 11:59'
+			/>
+			<ThemeSelect
+				allThemes={allThemes}
+				createPlaylist={createPlaylist}
+				themeList={themeList}
+				selectedPlaylist={selectedPlaylist}
+				index='2'
+				timeIndex='12:00 - 17:59'
+			/>
+			<ThemeSelect
+				allThemes={allThemes}
+				createPlaylist={createPlaylist}
+				themeList={themeList}
+				selectedPlaylist={selectedPlaylist}
+				index='3'
+				timeIndex='18:00 - 23:59'
+			/>
+		</Stack>
+	);
+}
+
+export default TimeOfDay;