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