New less heavy component for previews

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

@@ -8,7 +8,7 @@ import { useState } from 'react';
 import { FiEdit, FiTrash } from 'react-icons/fi';
 import { textClasses } from 'styles';
 import type { Theme, ThemePlaylist } from 'types';
-import { ThemeCard } from '../../Themes';
+import { ThemeCardPreview } from '../../Themes/ThemeCard';
 
 export function ThemePlaylistStack({
 	cardPlaylist,
@@ -113,68 +113,44 @@ export function ThemePlaylistStack({
 							{...presentationProps}
 							style={{ position: 'absolute', top: -60, zIndex: 3 }}
 						>
-							<ThemeCard
+							<ThemeCardPreview
 								cardTheme={
 									allThemes.find((theme: Theme) => theme.id === Number(themeList[0])) ||
 									missingTheme
 								}
-								allThemes={allThemes}
-								themePlaylists={[]}
-								setSelectedTheme={() => {}}
-								openThemeModal={() => {}}
-								enabled={false}
-								management={false}
 							/>
 						</Parallax>
 						<Parallax
 							{...presentationProps}
 							style={{ position: 'absolute', top: -60, zIndex: 2 }}
 						>
-							<ThemeCard
+							<ThemeCardPreview
 								cardTheme={
 									allThemes.find((theme: Theme) => theme.id === Number(themeList[1])) ||
 									missingTheme
 								}
-								allThemes={allThemes}
-								themePlaylists={[]}
-								setSelectedTheme={() => {}}
-								openThemeModal={() => {}}
-								enabled={false}
-								management={false}
 							/>
 						</Parallax>
 						<Parallax
 							{...presentationProps}
 							style={{ position: 'absolute', top: -60, zIndex: 1 }}
 						>
-							<ThemeCard
+							<ThemeCardPreview
 								cardTheme={
 									allThemes.find((theme: Theme) => theme.id === Number(themeList[2])) ||
 									missingTheme
 								}
-								allThemes={allThemes}
-								themePlaylists={[]}
-								setSelectedTheme={() => {}}
-								openThemeModal={() => {}}
-								enabled={false}
-								management={false}
 							/>
 						</Parallax>
 						<Parallax
 							{...presentationProps}
 							style={{ position: 'absolute', top: -60, zIndex: 0 }}
 						>
-							<ThemeCard
+							<ThemeCardPreview
 								cardTheme={
 									allThemes.find((theme: Theme) => theme.id === Number(themeList[3])) ||
 									missingTheme
 								}
-								allThemes={allThemes}
-								themePlaylists={[]}
-								setSelectedTheme={() => {}}
-								openThemeModal={() => {}}
-								enabled={false}
-								management={false}
 							/>
 						</Parallax>
 					</Stack>
@@ -215,16 +191,7 @@ export function ThemePlaylistStack({
 										}}
 									>
 										<Parallax {...presentationProps}>
-											<ThemeCard
+											<ThemeCardPreview key={theme.id} cardTheme={theme} />
-												key={theme.id}
-												cardTheme={theme}
-												allThemes={allThemes}
-												themePlaylists={[]}
-												setSelectedTheme={() => {}}
-												openThemeModal={() => {}}
-												enabled={false}
-												management={false}
-											/>
 										</Parallax>
 									</Box>
 								);
@@ -232,7 +199,13 @@ export function ThemePlaylistStack({
 					</Stack>
 				)}
 
-				<Group w={'100%'} pos={'absolute'} justify='space-between' bottom={0}>
+				<Group
+					w={'100%'}
+					pos={'absolute'}
+					justify='space-between'
+					bottom={0}
+					style={{ zIndex: 1000 }}
+				>
 					<Text
 						style={{
 							paddingRight: '.25rem',
@@ -244,7 +217,7 @@ export function ThemePlaylistStack({
 					>
 						{cardPlaylist.name}
 					</Text>
-					<Group gap={0} style={{ zIndex: 1000 }}>
+					<Group gap={0}>
 						{!defaultLists.includes(cardPlaylist.name) && (
 							<ActionIcon
 								style={{

src/pages/settings/components/Theming/Themes/ThemeCard/ThemeCardPreview.tsx

@@ -0,0 +1,119 @@
+import { Box, Button, Group, Stack, Text } from '@mantine/core';
+import type { Theme } from 'types';
+import { MiniAppItem } from './components/MiniAppItem';
+import { MiniGroupItem } from './components/MiniGroupItem';
+
+export function ThemeCardPreview({ cardTheme }: { cardTheme: Theme }) {
+	return (
+		<Group gap={0} align='center' justify='center' display={'grid'} pos={'relative'}>
+			<Text
+				style={{
+					position: 'absolute',
+					top: -10,
+					left: 6,
+					paddingRight: '.25rem',
+					paddingLeft: '.25rem',
+					backgroundColor: cardTheme.backgroundColor,
+					borderRadius: '4px',
+					color:
+						cardTheme.borderColor === cardTheme.primaryColor
+							? cardTheme.accentColor
+							: cardTheme.primaryColor,
+					zIndex: 3,
+					boxShadow: `2px -2px ${cardTheme.borderColor}`,
+					textOverflow: 'ellipsis',
+					overflow: 'hidden',
+					whiteSpace: 'nowrap',
+					maxWidth: 275,
+				}}
+			>
+				{cardTheme.name}
+			</Text>
+			<Button
+				w={'275px'}
+				h={'115px'}
+				style={{
+					backgroundImage:
+						cardTheme?.backgroundImage?.toLocaleLowerCase() === 'none'
+							? undefined
+							: `linear-gradient(${cardTheme?.backgroundColor}33, ${cardTheme?.backgroundColor}33), url(../../trigger/api/backgroundImages/thumbs/${cardTheme?.backgroundImage})`,
+					backgroundSize:
+						cardTheme?.backgroundImage?.toLocaleLowerCase() === 'none'
+							? undefined
+							: 'cover',
+					backgroundColor:
+						cardTheme?.backgroundImage?.toLocaleLowerCase() === 'none'
+							? cardTheme?.backgroundColor
+							: undefined,
+					backgroundPosition: 'center',
+					border: `solid ${cardTheme.borderColor}`,
+					transition: 'all .25s ease',
+				}}
+			>
+				<Group w={'100%'} gap={0} display={'flex'} align='center' justify='center'>
+					<Stack align='center' gap={12}>
+						<Box
+							style={{
+								height: '8px',
+								width: '100px',
+								backgroundColor: cardTheme.searchColor,
+								borderRadius: '4px',
+								borderBottom: `solid 1px ${cardTheme.borderColor}`,
+							}}
+						/>
+						<Group justify='space-between'>
+							<Box
+								style={{
+									height: '.5rem',
+									width: '100px',
+									backgroundColor: cardTheme.accentColor,
+									borderRadius: '4px',
+								}}
+							/>
+							<Box
+								style={{
+									height: '.5rem',
+									width: '50px',
+									backgroundColor: cardTheme.primaryColor,
+									borderRadius: '4px',
+								}}
+							/>
+						</Group>
+						<Group w={'100%'} mb={-4}>
+							<Box
+								style={{
+									height: '2px',
+									width: '40px',
+									backgroundColor: cardTheme.primaryColor,
+									borderRadius: '4px',
+								}}
+							/>
+						</Group>
+						<Group w={'100%'} gap={10} justify='space-between'>
+							<MiniAppItem cardTheme={cardTheme} />
+							<MiniAppItem cardTheme={cardTheme} />
+							<MiniAppItem cardTheme={cardTheme} />
+							<MiniAppItem cardTheme={cardTheme} />
+						</Group>
+						<Group w={'100%'} mb={-4}>
+							<Box
+								style={{
+									height: '2px',
+									width: '32px',
+									backgroundColor: cardTheme.primaryColor,
+									borderRadius: '4px',
+								}}
+							/>
+						</Group>
+						<Group w={'100%'} gap={10} justify='space-between'>
+							<MiniGroupItem cardTheme={cardTheme} />
+							<MiniGroupItem cardTheme={cardTheme} />
+							<MiniGroupItem cardTheme={cardTheme} />
+							<MiniGroupItem cardTheme={cardTheme} />
+						</Group>
+					</Stack>
+				</Group>
+			</Button>
+		</Group>
+	);
+}

src/pages/settings/components/Theming/Themes/ThemeCard/index.ts

@@ -1 +1,2 @@
 export { ThemeCard } from './ThemeCard';
+export { ThemeCardPreview } from './ThemeCardPreview';