Background uploads

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

@@ -0,0 +1,163 @@
+import {
+	ActionIcon,
+	Button,
+	Card,
+	FileInput,
+	Group,
+	Modal,
+	ScrollArea,
+	SimpleGrid,
+	Text,
+} from '@mantine/core';
+import { useCommonHooks } from 'hooks';
+import { useFileUploadAPI, useMutationAPI } from 'hooks/useAPI';
+import { useState } from 'react';
+import { FiTrash } from 'react-icons/fi';
+import { modalClasses } from 'styles';
+
+function BackgroundModal({
+	backgroundModalOpened,
+	handleBackgroundModalClose,
+	backgroundList,
+}: {
+	backgroundModalOpened: boolean;
+	handleBackgroundModalClose: () => void;
+	backgroundList: string[];
+}) {
+	const [background, setBackground] = useState<File | null>(null);
+	const [err, setErr] = useState<boolean>(false);
+	const { isMobile } = useCommonHooks();
+	const { mutateAsync: uploadAsync } = useFileUploadAPI();
+	const { mutateAsync } = useMutationAPI();
+	const fd = new FormData();
+	const handleFileUpload = (e: any) => {
+		setErr(false);
+		setBackground(e);
+	};
+	return (
+		<Modal.Root
+			size={'50%'}
+			className={modalClasses.editThemeModal}
+			classNames={modalClasses}
+			opened={backgroundModalOpened}
+			onClose={() => {
+				handleBackgroundModalClose();
+				setBackground(null);
+			}}
+			fullScreen={isMobile}
+			centered
+		>
+			<Modal.Overlay style={{ backdropFilter: 'blur(5px)' }} />
+			<Modal.Content>
+				<Modal.Header style={{ justifyContent: 'center' }}>
+					<Group pos={'absolute'}>
+						<Text c={'var(--mantine-color-background-0)'}>Backgrounds</Text>
+					</Group>
+					<Modal.CloseButton />
+				</Modal.Header>
+				<Modal.Body p={'2rem'}>
+					<ScrollArea
+						type={'always'}
+						style={{
+							width: '100%',
+							height: '20rem',
+							backgroundColor: 'var(--mantine-color-background-0)',
+						}}
+					>
+						<SimpleGrid w={'100%'} cols={3} p={'.5rem'}>
+							{backgroundList
+								.filter((background) => background !== 'None')
+								.map((background) => (
+									<Group key={background} display={'flex'} pos={'relative'}>
+										<Text
+											style={{
+												color: 'var(--mantine-color-primary-0)',
+												backgroundColor: 'var(--mantine-color-accent-0)',
+												padding: '.25rem',
+												borderRadius: '.5rem',
+												position: 'absolute',
+												top: '-.5rem',
+												left: 0,
+												zIndex: 3,
+											}}
+										>
+											{background}
+										</Text>
+										<Card
+											style={{
+												aspectRatio: '16/9',
+												width: '100%',
+												backgroundImage: `url(/backgrounds/${background})`,
+												backgroundSize: 'cover',
+												backgroundPosition: 'center',
+												backgroundRepeat: 'no-repeat',
+												padding: '2rem',
+												margin: '1rem',
+											}}
+										/>
+										<ActionIcon
+											style={{
+												color: 'red',
+												position: 'absolute',
+												bottom: '.5rem',
+												right: '.5rem',
+												zIndex: 3,
+											}}
+											onClick={() => {
+												mutateAsync({
+													method: 'DELETE',
+													endpoint: 'api/backgrounds',
+													body: { background },
+												});
+											}}
+										>
+											<FiTrash />
+										</ActionIcon>
+									</Group>
+								))}
+						</SimpleGrid>
+					</ScrollArea>
+					<FileInput
+						clearable
+						accept='image/png,image/jpeg'
+						value={background}
+						onChange={handleFileUpload}
+						label={'Upload Background'}
+						placeholder={'Upload Background'}
+						p={'xl'}
+						w={'100%'}
+						error={err && 'Please upload a background'}
+						styles={{
+							input: {
+								color: 'var(--mantine-color-primary-0)',
+							},
+							placeholder: {
+								color: 'var(--mantine-color-accent-0)',
+							},
+						}}
+					/>
+					<Button
+						onClick={() => {
+							if (background) {
+								fd.append('background', background || '');
+								uploadAsync({
+									method: 'POST',
+									endpoint: 'api/backgrounds',
+									body: fd,
+								});
+								handleBackgroundModalClose();
+								setBackground(null);
+								setErr(false);
+							} else {
+								setErr(true);
+							}
+						}}
+					>
+						Upload
+					</Button>
+				</Modal.Body>
+			</Modal.Content>
+		</Modal.Root>
+	);
+}
+export default BackgroundModal;