Settings updates

src/pages/settings/components/Applications/DebouncedApplication.tsx

@@ -0,0 +1,179 @@
+import {
+	ActionIcon,
+	Button,
+	Card,
+	Group,
+	Modal,
+	Stack,
+	Text,
+	TextInput,
+	Tooltip,
+} from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import { IconTrash } from '@tabler/icons-react';
+import { useCommonHooks } from 'hooks';
+import { cardClasses, modalClasses, textInputClasses } from 'styles';
+
+function DebouncedApplication({ application, handleDelete, setApplication }: any) {
+	const { theme } = useCommonHooks();
+	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
+	return (
+		<Card className={cardClasses.settingsItem} classNames={cardClasses}>
+			<Modal.Root
+				size={'60%'}
+				className={modalClasses.helpModal}
+				classNames={modalClasses}
+				opened={modalOpened}
+				onClose={() => {
+					closeModal();
+				}}
+				style={{
+					'--color-text-pri': theme.primaryColor,
+					'--color-text-acc': theme.accentColor,
+					'--color-background': theme.backgroundColor,
+					'--color-border': theme.borderColor,
+					'--color-search-background': theme.searchColor,
+					'--image-background': `url(${theme.backgroundImage})`,
+				}}
+				closeOnEscape
+				closeOnClickOutside
+			>
+				<Modal.Overlay />
+				<Modal.Content>
+					<Modal.Header>
+						<Modal.Title>Add a new message</Modal.Title>
+						<Modal.CloseButton />
+					</Modal.Header>
+					<Modal.Body pb={'2rem'}>
+						<Stack gap={0} w={'100%'} h={'150px'} align='center'>
+							<Text>Are you sure you want to delete this application?</Text>
+							<Text
+								style={{
+									fontWeight: 'bold',
+									fontSize: '20px',
+									padding: '8px',
+									margin: '8px',
+									borderRadius: '10px',
+									backgroundColor: 'var(--color-text-acc)',
+									color: 'var(--color-background)',
+								}}
+							>{`"${application.name}"`}</Text>
+							<Text c='red'>This action cannot be undone!</Text>
+							<Group pos={'absolute'} bottom={8}>
+								<Button
+									color={'red'}
+									styles={{ label: { color: 'black' } }}
+									onClick={() => {
+										handleDelete(application);
+										closeModal();
+									}}
+								>
+									Delete
+								</Button>
+								<Button
+									color={'grey'}
+									styles={{ label: { color: 'black' } }}
+									onClick={() => {
+										closeModal();
+									}}
+								>
+									Cancel
+								</Button>
+							</Group>
+						</Stack>
+					</Modal.Body>
+				</Modal.Content>
+			</Modal.Root>
+			<Tooltip
+				color={theme.primaryColor}
+				bd={`solid 1px ${theme.borderColor}`}
+				label={'Delete'}
+			>
+				<ActionIcon
+					pos={'absolute'}
+					right={16}
+					color='red'
+					onClick={() => {
+						openModal();
+					}}
+				>
+					<IconTrash />
+				</ActionIcon>
+			</Tooltip>
+			<Group w={'100%'} justify='center'>
+				<TextInput
+					label={'Name'}
+					className={textInputClasses.settingsItem}
+					pt={16}
+					classNames={textInputClasses}
+					defaultValue={application.name}
+					onChange={(event) => {
+						setApplication({
+							...application,
+							name: event.target.value,
+						});
+					}}
+				/>
+				<TextInput
+					label={'Base URL'}
+					className={textInputClasses.settingsItem}
+					pt={16}
+					classNames={textInputClasses}
+					defaultValue={application.baseUrl}
+					onChange={(event) => {
+						setApplication({
+							...application,
+							baseUrl: event.target.value,
+						});
+					}}
+				/>
+			</Group>
+			<Group w={'100%'} justify='center'>
+				<TextInput
+					label={'URL'}
+					className={textInputClasses.settingsItem}
+					w={'100%'}
+					pt={16}
+					classNames={textInputClasses}
+					defaultValue={application.url}
+					onChange={(event) => {
+						setApplication({
+							...application,
+							url: event.target.value,
+						});
+					}}
+				/>
+			</Group>
+			<Group w={'100%'} justify='center'>
+				<TextInput
+					label={'Icon'}
+					className={textInputClasses.settingsItem}
+					pt={16}
+					classNames={textInputClasses}
+					defaultValue={application.icon}
+					onChange={(event) => {
+						setApplication({
+							...application,
+							icon: event.target.value,
+						});
+					}}
+				/>
+				<TextInput
+					label={'Filter'}
+					className={textInputClasses.settingsItem}
+					pt={16}
+					classNames={textInputClasses}
+					defaultValue={application.filterName}
+					onChange={(event) => {
+						setApplication({
+							...application,
+							filterName: event.target.value,
+						});
+					}}
+				/>
+			</Group>
+		</Card>
+	);
+}
+
+export default DebouncedApplication;