Bug fixes

src/pages/settings/components/Theming/DeleteBackground.tsx

@@ -0,0 +1,95 @@
+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;