96 lines
2.1 KiB
TypeScript
96 lines
2.1 KiB
TypeScript
import { Button, Card, Group, Stack, Text } from '@mantine/core';
|
|
import { useMutationAPI } from 'hooks';
|
|
|
|
function DeleteBackground({
|
|
fileName,
|
|
setFileName,
|
|
inUseBackgrounds,
|
|
setBackground,
|
|
setNewFileName,
|
|
setConfirm,
|
|
}: {
|
|
fileName: string;
|
|
setFileName: (searchValue: string) => void;
|
|
inUseBackgrounds: string[];
|
|
setBackground: React.Dispatch<React.SetStateAction<File | null>>;
|
|
setNewFileName: (searchValue: string) => void;
|
|
setConfirm: (value: boolean) => void;
|
|
}) {
|
|
const { mutateAsync } = useMutationAPI();
|
|
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'}>
|
|
Are you sure you want to delete {fileName}?
|
|
</Text>
|
|
{inUseBackgrounds.includes(fileName) && (
|
|
<Text fw={600} fz={'1.5rem'}>
|
|
This background is currently in use! This will result in a blank background on
|
|
the theme.
|
|
</Text>
|
|
)}
|
|
<Text fw={600} fz={'3rem'}>
|
|
THIS ACTION CANNOT BE UNDONE!!!
|
|
</Text>
|
|
<Card
|
|
style={{
|
|
aspectRatio: '16/9',
|
|
height: '100%',
|
|
backgroundImage: `url(../../api/backgroundImages/${fileName})`,
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
backgroundRepeat: 'no-repeat',
|
|
padding: '2rem',
|
|
margin: '1rem',
|
|
}}
|
|
/>
|
|
<Group>
|
|
<Button
|
|
mt={'auto'}
|
|
w={'min-content'}
|
|
color='red'
|
|
onClick={() => {
|
|
setBackground(null);
|
|
setFileName('');
|
|
setNewFileName('');
|
|
setConfirm(false);
|
|
setFileName('');
|
|
mutateAsync({
|
|
method: 'DELETE',
|
|
endpoint: 'api/backgrounds',
|
|
body: { fileName },
|
|
});
|
|
}}
|
|
>
|
|
DELETE
|
|
</Button>
|
|
<Button
|
|
mt={'auto'}
|
|
w={'min-content'}
|
|
onClick={() => {
|
|
setBackground(null);
|
|
setFileName('');
|
|
setNewFileName('');
|
|
setConfirm(false);
|
|
setFileName('');
|
|
}}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
</Group>
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
export default DeleteBackground;
|