New settings pages

src/components/HelpModal/HelpModal.tsx

@@ -1,15 +1,18 @@
-import { Divider, Group, Modal, Stack } from '@mantine/core';
+import { Divider, Modal, Stack } from '@mantine/core';
 import { useCommonHooks } from 'hooks';
 import { modalClasses } from 'styles';
-import HintItem from './HintItem';
+import HelpSection from './HelpSection';
 
 export function HelpModal({
+	setSearchValue,
+	setProviderLabel,
+	setProviderURL,
 	providerModalOpened,
 	closeProviderModal,
 	applicationData,
 	providerData,
 }: any) {
-	const { theme, setSearchValue, setProviderLabel, setProviderURL } = useCommonHooks();
+	const { theme } = useCommonHooks();
 	return (
 		<Modal.Root
 			size={'60%'}
@@ -17,10 +20,10 @@ export function HelpModal({
 			classNames={modalClasses}
 			opened={providerModalOpened}
 			onClose={() => {
-				closeProviderModal();
 				setSearchValue('');
 				setProviderLabel('Google Search');
 				setProviderURL('https://www.google.com/search?q=');
+				closeProviderModal();
 			}}
 			style={{
 				'--color-text-pri': theme.primaryColor,
@@ -41,67 +44,25 @@ export function HelpModal({
 				</Modal.Header>
 				<Modal.Body pb={'2rem'}>
 					<Stack gap={0} w={'100%'} align='center'>
-						<h3
-							style={{
-								zIndex: 0,
-								padding: '8px',
-								marginTop: 0,
-								marginBottom: -32,
-								borderRadius: '8px',
-								color: theme.backgroundColor,
-								backgroundColor: theme.borderColor,
-							}}
-						>
-							Search Providers
-						</h3>
-						<Divider py={8} color={theme.accentColor} />
-						<Group
-							style={{
-								width: '100%',
-								backgroundColor: theme.searchColor,
-								borderRadius: '8px',
-								padding: '24px',
-								justifyItems: 'center',
-							}}
-						>
-							{providerData?.map((provider: any) => (
-								<HintItem
-									key={provider.prefix}
-									command={provider.prefix}
-									item={provider.name}
-								/>
-							))}
-						</Group>
-						<h3
-							style={{
-								zIndex: 0,
-								padding: '8px',
-								marginBottom: -32,
-								borderRadius: '8px',
-								color: theme.backgroundColor,
-								backgroundColor: theme.borderColor,
-							}}
-						>
-							Available Applications
-						</h3>
-						<Divider py={8} color={theme.accentColor} />
-						<Group
-							style={{
-								width: '100%',
-								backgroundColor: theme.searchColor,
-								borderRadius: '8px',
-								padding: '32px',
-								justifyItems: 'center',
-							}}
-						>
-							{applicationData?.map((application: any) => (
-								<HintItem
-									key={application.id}
-									command={`!${application.baseUrl.substr(1).toLowerCase()}`}
-									item={application.url}
-								/>
-							))}
-						</Group>
+						<HelpSection
+							name={'Search Providers'}
+							items={providerData.map((provider: any) => {
+								return {
+									name: provider.name,
+									command: provider.prefix,
+								};
+							})}
+						/>
+						<Divider my={8} color={theme.accentColor} />
+						<HelpSection
+							name={'Available Applications'}
+							items={applicationData.map((application: any) => {
+								return {
+									name: application.url,
+									command: `!${application.baseUrl.substring(1).toLowerCase()}`,
+								};
+							})}
+						/>
 					</Stack>
 				</Modal.Body>
 			</Modal.Content>