75 lines
1.9 KiB
TypeScript
75 lines
1.9 KiB
TypeScript
import { Divider, Modal, Stack } from '@mantine/core';
|
|
import { useCommonHooks } from 'hooks';
|
|
import { modalClasses } from 'styles';
|
|
import type { Application, Provider } from 'types';
|
|
import HelpSection from './HelpSection';
|
|
|
|
export function HelpModal({
|
|
setSearchValue,
|
|
setProviderLabel,
|
|
setProviderURL,
|
|
providerModalOpened,
|
|
closeProviderModal,
|
|
applicationData,
|
|
providerData,
|
|
}: {
|
|
setSearchValue: (value: string) => void;
|
|
setProviderLabel: (label: string) => void;
|
|
setProviderURL: (url: string) => void;
|
|
providerModalOpened: boolean;
|
|
closeProviderModal: () => void;
|
|
applicationData: Application[];
|
|
providerData: Provider[];
|
|
}) {
|
|
const { isMobile } = useCommonHooks();
|
|
return (
|
|
<Modal.Root
|
|
size={'60%'}
|
|
className={modalClasses.helpModal}
|
|
classNames={modalClasses}
|
|
opened={providerModalOpened}
|
|
fullScreen={isMobile}
|
|
centered
|
|
onClose={() => {
|
|
setSearchValue('');
|
|
setProviderLabel('Google Search');
|
|
setProviderURL('https://www.google.com/search?q=');
|
|
closeProviderModal();
|
|
}}
|
|
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'>
|
|
<HelpSection
|
|
name={'Search Providers'}
|
|
items={providerData.map((provider: Provider) => {
|
|
return {
|
|
name: provider.name,
|
|
command: provider.prefix,
|
|
};
|
|
})}
|
|
/>
|
|
<Divider my={'.5rem'} color={'var(--mantine-color-accent-0)'} />
|
|
<HelpSection
|
|
name={'Available Applications'}
|
|
items={applicationData.map((application: Application) => {
|
|
return {
|
|
name: application.url,
|
|
command: `!${application.baseUrl.substring(1).toLowerCase()}`,
|
|
};
|
|
})}
|
|
/>
|
|
</Stack>
|
|
</Modal.Body>
|
|
</Modal.Content>
|
|
</Modal.Root>
|
|
);
|
|
}
|