Search/help updates

src/components/HelpModal/HelpModal.tsx

@@ -1,14 +1,15 @@
-import { Divider, Group, Modal, Stack, Text } from '@mantine/core';
+import { Divider, Group, Modal, Stack } from '@mantine/core';
 import { useCommonHooks } from 'hooks';
 import { modalClasses } from 'styles';
+import HintItem from './HintItem';
 
 export function HelpModal({
 	providerModalOpened,
 	closeProviderModal,
+	applicationData,
 	providerData,
 }: any) {
 	const { theme, setSearchValue, setProviderLabel, setProviderURL } = useCommonHooks();
-
 	return (
 		<Modal.Root
 			size={'60%'}
@@ -40,14 +41,67 @@ export function HelpModal({
 				</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} />
-						{providerData?.map((provider: any) => (
-							<Group key={provider.prefix} gap={0} w={'50%'} justify='space-between'>
-								<Text>{provider.prefix}</Text>
-								<Text>{provider.name}</Text>
-							</Group>
-						))}
+						<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>
 					</Stack>
 				</Modal.Body>
 			</Modal.Content>