54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
import { Divider, Group, Modal, Stack, Text } from '@mantine/core';
|
|
import { useCommonHooks } from 'hooks';
|
|
import { modalClasses } from 'styles';
|
|
|
|
export function HelpModal({ providerModalOpened, closeProviderModal }: any) {
|
|
const { theme, providers, setSearchValue, setProviderLabel, setProviderURL } =
|
|
useCommonHooks();
|
|
|
|
return (
|
|
<Modal.Root
|
|
size={'60%'}
|
|
className={modalClasses.helpModal}
|
|
classNames={modalClasses}
|
|
opened={providerModalOpened}
|
|
onClose={() => {
|
|
closeProviderModal();
|
|
setSearchValue('');
|
|
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>
|
|
);
|
|
}
|