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

Working Reflection
All checks were successful
Deploy to production / build (push) Successful in 18s
Details

Browse Source
This commit is contained in:
Sean Edmunds
2026-10-10 09:13:07 -05:00
parent 2e0be492f6
commit de4a963a08
1 changed files with 87 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -63,44 +63,44 @@ export function ThemePlaylistStack({
}, 75); }, 75);
return ( return (
<Stack <Reflection reflectionStart={75} reflectionEnd={100} shadowOpacity={0.25}>
gap={0} <Stack
w={300} gap={0}
pos={'relative'} w={300}
onMouseEnter={() => setHover(true)} pos={'relative'}
onMouseLeave={() => setHover(false)} onMouseEnter={() => setHover(true)}
style={{ onMouseLeave={() => setHover(false)}
background: hover style={{
? 'radial-gradient(var(--mantine-color-search-0), transparent)' background: hover
: undefined, ? 'radial-gradient(var(--mantine-color-search-0), transparent)'
cursor: 'pointer', : undefined,
borderRadius: '100%', cursor: 'pointer',
}} borderRadius: '100%',
onClick={() => { }}
setCurrentThemePlaylist(cardPlaylist.name); onClick={() => {
setThemeName('random'); setCurrentThemePlaylist(cardPlaylist.name);
}} setThemeName('random');
> }}
{modalOpened && ( >
<DeleteItemModal {modalOpened && (
modalOpened={modalOpened} <DeleteItemModal
handleClose={closeModal} modalOpened={modalOpened}
handleDelete={() => handleDelete(cardPlaylist, 'api/themePlaylists')} handleClose={closeModal}
title='Delete Theme Playlist' handleDelete={() => handleDelete(cardPlaylist, 'api/themePlaylists')}
body={ title='Delete Theme Playlist'
<Stack gap={0} w={'100%'} h={'150px'} align='center'> body={
<Text>Are you sure you want to delete this Theme Playlist?</Text> <Stack gap={0} w={'100%'} h={'150px'} align='center'>
<Text <Text>Are you sure you want to delete this Theme Playlist?</Text>
className={textClasses.deleteItem} <Text
classNames={textClasses} className={textClasses.deleteItem}
>{`"${cardPlaylist.name}"`}</Text> classNames={textClasses}
<Text c='red'>This action cannot be undone!</Text> >{`"${cardPlaylist.name}"`}</Text>
</Stack> <Text c='red'>This action cannot be undone!</Text>
} </Stack>
/> }
)} />
{cardPlaylist?.name === 'Time of Day' ? ( )}
<Reflection> {cardPlaylist?.name === 'Time of Day' ? (
<Stack <Stack
w='100%' w='100%'
h='200px' h='200px'
@@ -178,9 +178,7 @@ export function ThemePlaylistStack({
/> />
</Parallax> </Parallax>
</Stack> </Stack>
</Reflection> ) : (
) : (
<Reflection>
<Stack <Stack
w='100%' w='100%'
h='200px' h='200px'
@@ -232,61 +230,55 @@ export function ThemePlaylistStack({
); );
})} })}
</Stack> </Stack>
</Reflection> )}
)}
<Group <Group w={'100%'} pos={'absolute'} justify='space-between' bottom={0}>
w={'100%'} <Text
pos={'absolute'} style={{
justify='space-between' paddingRight: '.25rem',
bottom={0} paddingLeft: '.25rem',
style={{ zIndex: 1000 }} backgroundColor: 'var(--mantine-color-border-0)',
> borderRadius: '4px',
<Text color: 'var(--mantine-color-primary-0)',
style={{ }}
paddingRight: '.25rem', >
paddingLeft: '.25rem', {cardPlaylist.name}
backgroundColor: 'var(--mantine-color-border-0)', </Text>
borderRadius: '4px', <Group gap={0} style={{ zIndex: 1000 }}>
color: 'var(--mantine-color-primary-0)', {!defaultLists.includes(cardPlaylist.name) && (
}} <ActionIcon
> style={{
{cardPlaylist.name} paddingRight: '.25rem',
</Text> paddingLeft: '.25rem',
<Group gap={0}> backgroundColor: 'var(--mantine-color-border-0)',
{!defaultLists.includes(cardPlaylist.name) && ( borderRadius: '4px',
<ActionIcon color: 'var(--mantine-color-background-0)',
style={{ }}
paddingRight: '.25rem', onClick={() => {
paddingLeft: '.25rem', handleOpen(cardPlaylist);
backgroundColor: 'var(--mantine-color-border-0)', }}
borderRadius: '4px', >
color: 'var(--mantine-color-background-0)', <FiEdit />
}} </ActionIcon>
onClick={() => { )}
handleOpen(cardPlaylist); {cardPlaylist.default === 0 && (
}} <ActionIcon
> color='red'
<FiEdit /> style={{
</ActionIcon> paddingRight: '.25rem',
)} paddingLeft: '.25rem',
{cardPlaylist.default === 0 && ( borderRadius: '4px',
<ActionIcon }}
color='red' onClick={() => {
style={{ openModal();
paddingRight: '.25rem', }}
paddingLeft: '.25rem', >
borderRadius: '4px', <FiTrash color='black' />
}} </ActionIcon>
onClick={() => { )}
openModal(); </Group>
}}
>
<FiTrash color='black' />
</ActionIcon>
)}
</Group> </Group>
</Group> </Stack>
</Stack> </Reflection>
); );
} }