167 lines
3.8 KiB
TypeScript
167 lines
3.8 KiB
TypeScript
import {
|
|
ActionIcon,
|
|
Button,
|
|
Group,
|
|
Highlight,
|
|
Popover,
|
|
Stack,
|
|
Switch,
|
|
Text,
|
|
TextInput,
|
|
} from '@mantine/core';
|
|
import { useCommonHooks } from 'hooks';
|
|
import { FiHelpCircle, FiLoader, FiPlus } from 'react-icons/fi';
|
|
import {
|
|
actionIconClasses,
|
|
buttonClasses,
|
|
popoverClasses,
|
|
switchClasses,
|
|
textClasses,
|
|
textInputClasses,
|
|
} from 'styles';
|
|
|
|
function SettingsHeader({
|
|
setDragging,
|
|
openModal,
|
|
title,
|
|
tooltip,
|
|
searchValue,
|
|
setSearchValue,
|
|
searchPlaceholder,
|
|
isLoading,
|
|
setIsLoading,
|
|
}: {
|
|
setDragging: undefined | ((dragging: boolean) => void);
|
|
openModal: () => void;
|
|
title: string;
|
|
tooltip: {
|
|
title: string;
|
|
highlightList: string[];
|
|
description: string;
|
|
};
|
|
searchValue: string | undefined;
|
|
setSearchValue: (searchValue: string) => void;
|
|
searchPlaceholder: string | undefined;
|
|
isLoading: boolean;
|
|
setIsLoading: (isLoading: boolean) => void;
|
|
}) {
|
|
const { isMobile } = useCommonHooks();
|
|
return (
|
|
<Group
|
|
align='center'
|
|
justify='center'
|
|
style={{
|
|
backdropFilter: 'blur(10px) brightness(.75)',
|
|
zIndex: 199,
|
|
paddingTop: '1.5rem',
|
|
paddingBottom: '1.5rem',
|
|
paddingLeft: '1rem',
|
|
height: 'min-content',
|
|
width: '100%',
|
|
marginTop: 0,
|
|
position: 'absolute',
|
|
}}
|
|
>
|
|
<Group w={isMobile ? undefined : '100%'}>
|
|
<Text
|
|
miw={isMobile ? 100 : undefined}
|
|
className={textClasses.settingsSubTitle}
|
|
classNames={textClasses}
|
|
>
|
|
{title}
|
|
</Text>
|
|
<Popover withArrow withOverlay classNames={popoverClasses}>
|
|
<Popover.Target>
|
|
<ActionIcon
|
|
className={actionIconClasses.settingsTooltip}
|
|
classNames={actionIconClasses}
|
|
>
|
|
<FiHelpCircle />
|
|
</ActionIcon>
|
|
</Popover.Target>
|
|
<Popover.Dropdown
|
|
style={{
|
|
color: 'var(--mantine-color-primary-0)',
|
|
backgroundColor: 'var(--mantine-color-background-0)',
|
|
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, var(--mantine-color-accent-0), var(--mantine-color-primary-0))',
|
|
fontWeight: 700,
|
|
WebkitBackgroundClip: 'text',
|
|
WebkitTextFillColor: 'transparent',
|
|
}}
|
|
>
|
|
{tooltip.description}
|
|
</Highlight>
|
|
</Stack>
|
|
</Popover.Dropdown>
|
|
</Popover>
|
|
{searchValue !== undefined && (
|
|
<Button
|
|
className={buttonClasses.newItemButton}
|
|
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) => {
|
|
setIsLoading(true);
|
|
setSearchValue(event.target.value);
|
|
}}
|
|
style={{
|
|
zIndex: 100,
|
|
}}
|
|
rightSection={
|
|
isLoading && (
|
|
<ActionIcon
|
|
className={actionIconClasses.loadingSpinner}
|
|
classNames={actionIconClasses}
|
|
>
|
|
<FiLoader />
|
|
</ActionIcon>
|
|
)
|
|
}
|
|
/>
|
|
)}
|
|
{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;
|