128 lines
3.0 KiB
TypeScript
128 lines
3.0 KiB
TypeScript
import { Button, Card, Group, Stack, Text, TextInput } from '@mantine/core';
|
|
import { useCommonHooks, useMutationAPI } from 'hooks';
|
|
import { useState } from 'react';
|
|
import { textInputClasses } from 'styles';
|
|
|
|
export function EditBackground({
|
|
fileName,
|
|
setFileName,
|
|
inUseBackgrounds,
|
|
setBackground,
|
|
setNewFileName,
|
|
setEditing,
|
|
}: {
|
|
fileName: string;
|
|
setFileName: (searchValue: string) => void;
|
|
inUseBackgrounds: string[];
|
|
setBackground: React.Dispatch<React.SetStateAction<File | null>>;
|
|
setNewFileName: (searchValue: string) => void;
|
|
setEditing: React.Dispatch<React.SetStateAction<boolean>>;
|
|
}) {
|
|
const [rename, setRename] = useState<string>('');
|
|
const { mutateAsync } = useMutationAPI();
|
|
const { theme } = useCommonHooks();
|
|
return (
|
|
<Stack
|
|
justify='center'
|
|
align='center'
|
|
style={{
|
|
width: '100%',
|
|
height: '30rem',
|
|
backgroundColor: 'var(--mantine-color-search-0)',
|
|
padding: '1rem',
|
|
borderRadius: '.5rem',
|
|
backgroundFilter: 'blur(5px)',
|
|
}}
|
|
>
|
|
<Text fw={600} fz={'2rem'}>
|
|
Editing {fileName}
|
|
</Text>
|
|
{inUseBackgrounds.includes(fileName) && (
|
|
<Text fw={600} fz={'1.5rem'}>
|
|
Updating the name will update the associated themes.
|
|
</Text>
|
|
)}
|
|
<Group h={'100%'} mb={'1rem'}>
|
|
<TextInput
|
|
className={textInputClasses.settingsItem}
|
|
classNames={textInputClasses}
|
|
label='New Name'
|
|
onChange={(e) => setRename(e.target.value)}
|
|
styles={
|
|
theme.textShadowsEnabled && {
|
|
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
|
|
}
|
|
}
|
|
/>
|
|
<Card
|
|
style={{
|
|
aspectRatio: '16/9',
|
|
height: '100%',
|
|
backgroundImage: `url(../../api/backgroundImages/${fileName})`,
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
backgroundRepeat: 'no-repeat',
|
|
padding: '2rem',
|
|
margin: '1rem',
|
|
}}
|
|
/>
|
|
</Group>
|
|
<Group>
|
|
<Button
|
|
mt={'auto'}
|
|
w={'min-content'}
|
|
color='green'
|
|
onClick={() => {
|
|
if (
|
|
!rename.endsWith('.png') &&
|
|
!rename.endsWith('.jpg') &&
|
|
!rename.endsWith('.jpeg')
|
|
) {
|
|
mutateAsync({
|
|
method: 'PATCH',
|
|
endpoint: 'api/backgrounds',
|
|
body: {
|
|
fileName,
|
|
newFileName: `${rename}${fileName.substring(
|
|
fileName.lastIndexOf('.'),
|
|
fileName.length,
|
|
)}`,
|
|
},
|
|
});
|
|
} else {
|
|
mutateAsync({
|
|
method: 'PATCH',
|
|
endpoint: 'api/backgrounds',
|
|
body: {
|
|
fileName,
|
|
newFileName: rename,
|
|
},
|
|
});
|
|
}
|
|
setBackground(null);
|
|
setFileName('');
|
|
setNewFileName('');
|
|
setEditing(false);
|
|
}}
|
|
>
|
|
Save
|
|
</Button>
|
|
<Button
|
|
mt={'auto'}
|
|
w={'min-content'}
|
|
color={'var(--mantine-color-red-6)'}
|
|
onClick={() => {
|
|
setBackground(null);
|
|
setFileName('');
|
|
setNewFileName('');
|
|
setEditing(false);
|
|
setFileName('');
|
|
}}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
</Group>
|
|
</Stack>
|
|
);
|
|
}
|