Refactor

src/components/HelpModal/HelpModal.tsx

@@ -0,0 +1,59 @@
+import { Divider, Group, Modal, Stack, Text } from '@mantine/core';
+import { appTheme } from 'contexts';
+import { useAtom } from 'jotai';
+import { modalClasses } from 'styles';
+
+export function HelpModal({
+	setValue,
+	setProviderLabel,
+	setProviderURL,
+	providers,
+	providerModalOpened,
+	closeProviderModal,
+}: any) {
+	const [theme, _] = useAtom(appTheme);
+	return (
+		<Modal.Root
+			size={'60%'}
+			className={modalClasses.helpModal}
+			classNames={modalClasses}
+			opened={providerModalOpened}
+			onClose={() => {
+				closeProviderModal();
+				setValue('');
+				setProviderLabel('Google Search');
+				setProviderURL('https://www.google.com/search?q=');
+			}}
+			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>Help info</Modal.Title>
+					<Modal.CloseButton />
+				</Modal.Header>
+				<Modal.Body pb={'2rem'}>
+					<Stack gap={0} w={'100%'} align='center'>
+						<h3 style={{ padding: 0, margin: 0 }}>Search Providers</h3>
+						<Divider py={8} w={'65%'} color={theme.accentColor} />
+						{providers?.map((provider: any) => (
+							<Group key={provider.prefix} gap={0} w={'50%'} justify='space-between'>
+								<Text>{provider.prefix}</Text>
+								<Text>{provider.name}</Text>
+							</Group>
+						))}
+					</Stack>
+				</Modal.Body>
+			</Modal.Content>
+		</Modal.Root>
+	);
+}