Working preview on time of day playlist

src/pages/settings/components/Theming/ThemePlaylists/components/ThemePlaylistStack.tsx

@@ -194,8 +194,29 @@ export function ThemePlaylistStack({
 								{cardPlaylist?.name === 'Time of Day' ? (
 									<>
 										<Parallax
-											{...presentationProps}
+											{...(!(
-											style={{ position: 'absolute', top: 16 * 1, zIndex: 3 }}
+												hover &&
+												Number(themeList[0]) ===
+													Number(themeList[Math.floor(new Date().getHours() / 6)])
+											) && presentationProps)}
+											// style={{ position: 'absolute', top: 16 * 1, zIndex: 3 }}
+											style={{
+												position: 'absolute',
+												top: !(
+													hover &&
+													Number(themeList[0]) ===
+														Number(themeList[Math.floor(new Date().getHours() / 6)])
+												)
+													? 16 * 1
+													: 16,
+												zIndex: !(
+													hover &&
+													Number(themeList[0]) ===
+														Number(themeList[Math.floor(new Date().getHours() / 6)])
+												)
+													? 3
+													: 4,
+											}}
 										>
 											<ThemeCardPreview
 												cardTheme={
@@ -206,8 +227,28 @@ export function ThemePlaylistStack({
 											/>
 										</Parallax>
 										<Parallax
-											{...presentationProps}
+											{...(!(
-											style={{ position: 'absolute', top: 16 * 2, zIndex: 2 }}
+												hover &&
+												Number(themeList[1]) ===
+													Number(themeList[Math.floor(new Date().getHours() / 6)])
+											) && presentationProps)}
+											style={{
+												position: 'absolute',
+												top: !(
+													hover &&
+													Number(themeList[1]) ===
+														Number(themeList[Math.floor(new Date().getHours() / 6)])
+												)
+													? 16 * 2
+													: 16,
+												zIndex: !(
+													hover &&
+													Number(themeList[1]) ===
+														Number(themeList[Math.floor(new Date().getHours() / 6)])
+												)
+													? 2
+													: 4,
+											}}
 										>
 											<ThemeCardPreview
 												cardTheme={
@@ -218,8 +259,28 @@ export function ThemePlaylistStack({
 											/>
 										</Parallax>
 										<Parallax
-											{...presentationProps}
+											{...(!(
-											style={{ position: 'absolute', top: 16 * 3, zIndex: 1 }}
+												hover &&
+												Number(themeList[2]) ===
+													Number(themeList[Math.floor(new Date().getHours() / 6)])
+											) && presentationProps)}
+											style={{
+												position: 'absolute',
+												top: !(
+													hover &&
+													Number(themeList[2]) ===
+														Number(themeList[Math.floor(new Date().getHours() / 6)])
+												)
+													? 16 * 3
+													: 16,
+												zIndex: !(
+													hover &&
+													Number(themeList[2]) ===
+														Number(themeList[Math.floor(new Date().getHours() / 6)])
+												)
+													? 1
+													: 4,
+											}}
 										>
 											<ThemeCardPreview
 												cardTheme={
@@ -230,8 +291,28 @@ export function ThemePlaylistStack({
 											/>
 										</Parallax>
 										<Parallax
-											{...presentationProps}
+											{...(!(
-											style={{ position: 'absolute', top: 16 * 4, zIndex: 0 }}
+												hover &&
+												Number(themeList[3]) ===
+													Number(themeList[Math.floor(new Date().getHours() / 6)])
+											) && presentationProps)}
+											style={{
+												position: 'absolute',
+												top: !(
+													hover &&
+													Number(themeList[3]) ===
+														Number(themeList[Math.floor(new Date().getHours() / 6)])
+												)
+													? 16 * 4
+													: 0,
+												zIndex: !(
+													hover &&
+													Number(themeList[3]) ===
+														Number(themeList[Math.floor(new Date().getHours() / 6)])
+												)
+													? 0
+													: 4,
+											}}
 										>
 											<ThemeCardPreview
 												cardTheme={