New less heavy component for previews

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';