smedmunds/TriggerFrontend
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

New less heavy component for previews
All checks were successful
Deploy to production / build (push) Successful in 17s
Details

Browse Source
This commit is contained in:
Sean Edmunds
2026-10-12 13:43:14 -05:00
parent 204c9fcd02
commit ea56aa8402
3 changed files with 134 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/pages/settings/components/Theming/ThemePlaylists/components/ThemePlaylistStack.tsx
View File

@@ -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
key={theme.id}
cardTheme={theme}
allThemes={allThemes}
themePlaylists={[]}
setSelectedTheme={() => {}}
openThemeModal={() => {}}
enabled={false}
management={false}
/>
<ThemeCardPreview key={theme.id} cardTheme={theme} />
</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={{

119
src/pages/settings/components/Theming/Themes/ThemeCard/ThemeCardPreview.tsx Normal file
View File

@@ -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>
);
}

1
src/pages/settings/components/Theming/Themes/ThemeCard/index.ts
View File

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