143 lines
3.1 KiB
TypeScript
143 lines
3.1 KiB
TypeScript
import {
|
|
ActionIcon,
|
|
Button,
|
|
Group,
|
|
Highlight,
|
|
Popover,
|
|
Stack,
|
|
Switch,
|
|
Text,
|
|
TextInput,
|
|
} from '@mantine/core';
|
|
import { useCommonHooks } from 'hooks';
|
|
import { FiHelpCircle, FiPlus } from 'react-icons/fi';
|
|
import {
|
|
actionIconClasses,
|
|
buttonClasses,
|
|
popoverClasses,
|
|
switchClasses,
|
|
textClasses,
|
|
textInputClasses,
|
|
} from 'styles';
|
|
|
|
function SettingsHeader({
|
|
setDragging,
|
|
openModal,
|
|
title,
|
|
tooltip,
|
|
searchValue,
|
|
setSearchValue,
|
|
searchPlaceholder,
|
|
}: any) {
|
|
const { isMobile, theme, modalStyle } = useCommonHooks();
|
|
return (
|
|
<Group
|
|
py={'1.5rem'}
|
|
pl={'1rem'}
|
|
h={'min-content'}
|
|
w={'100%'}
|
|
align='center'
|
|
mt={0}
|
|
justify='center'
|
|
pos={'absolute'}
|
|
style={{ backdropFilter: 'blur(10px) brightness(.75)', zIndex: 199 }}
|
|
>
|
|
<Group w={isMobile ? undefined : '100%'}>
|
|
<Text
|
|
miw={isMobile ? 100 : undefined}
|
|
className={textClasses.settingsSubTitle}
|
|
classNames={textClasses}
|
|
>
|
|
{title}
|
|
</Text>
|
|
<Popover
|
|
withArrow
|
|
withOverlay
|
|
withinPortal={true}
|
|
styles={{
|
|
dropdown: modalStyle,
|
|
}}
|
|
classNames={popoverClasses}
|
|
>
|
|
<Popover.Target>
|
|
<ActionIcon
|
|
className={actionIconClasses.settingsTooltip}
|
|
classNames={actionIconClasses}
|
|
>
|
|
<FiHelpCircle />
|
|
</ActionIcon>
|
|
</Popover.Target>
|
|
<Popover.Dropdown
|
|
style={{
|
|
color: theme.primaryColor,
|
|
backgroundColor: theme.backgroundColor,
|
|
width: isMobile ? '95%' : '500px',
|
|
}}
|
|
>
|
|
<Stack>
|
|
<Text className={textClasses.settingsTooltip} classNames={textClasses}>
|
|
{tooltip.title}
|
|
</Text>
|
|
<Highlight
|
|
highlight={tooltip.highlightList}
|
|
className={textClasses.settingsTooltip}
|
|
classNames={textClasses}
|
|
highlightStyles={{
|
|
backgroundImage: `linear-gradient(45deg, ${theme.accentColor}, ${theme.primaryColor})`,
|
|
fontWeight: 700,
|
|
WebkitBackgroundClip: 'text',
|
|
WebkitTextFillColor: 'transparent',
|
|
}}
|
|
>
|
|
{tooltip.description}
|
|
</Highlight>
|
|
</Stack>
|
|
</Popover.Dropdown>
|
|
</Popover>
|
|
{searchValue !== undefined && (
|
|
<Button
|
|
className={buttonClasses.tableButton}
|
|
classNames={buttonClasses}
|
|
onClick={openModal}
|
|
>
|
|
<FiPlus />
|
|
</Button>
|
|
)}
|
|
</Group>
|
|
{searchValue !== undefined && (
|
|
<TextInput
|
|
w={isMobile ? undefined : '35%'}
|
|
pos={isMobile ? undefined : 'absolute'}
|
|
className={textInputClasses.settingsItem}
|
|
classNames={textInputClasses}
|
|
autoFocus={!isMobile}
|
|
placeholder={searchPlaceholder || 'Search...'}
|
|
value={searchValue}
|
|
onInput={(event: any) => {
|
|
setSearchValue(event.target.value);
|
|
}}
|
|
style={{
|
|
zIndex: 100,
|
|
}}
|
|
/>
|
|
)}
|
|
{setDragging && (
|
|
<Switch
|
|
className={switchClasses.default}
|
|
classNames={switchClasses}
|
|
label={'Reorder'}
|
|
labelPosition='left'
|
|
pos={'absolute'}
|
|
right={isMobile ? '2rem' : '1rem'}
|
|
top={isMobile ? '3.5rem' : undefined}
|
|
onChange={(e) => {
|
|
setDragging(e.target.checked);
|
|
}}
|
|
/>
|
|
)}
|
|
</Group>
|
|
);
|
|
}
|
|
|
|
export default SettingsHeader;
|