Added SettingsHeader

src/pages/settings/components/Shared/SettingsHeader.tsx

@@ -0,0 +1,113 @@
+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, textClasses, textInputClasses } from 'styles';
+
+function SettingsHeader({
+	setDragging,
+	openModal,
+	title,
+	tooltip,
+	searchValue,
+	setSearchValue,
+}: any) {
+	const { isMobile, theme } = useCommonHooks();
+	return (
+		<Group align='center' justify='center' mt={'1rem'}>
+			<Group w={isMobile ? undefined : '100%'}>
+				<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
+					{title}
+				</Text>
+				<Popover withArrow withOverlay withinPortal={false}>
+					<Popover.Target>
+						<ActionIcon
+							className={actionIconClasses.settingsTooltip}
+							classNames={actionIconClasses}
+						>
+							<FiHelpCircle />
+						</ActionIcon>
+					</Popover.Target>
+					<Popover.Dropdown
+						style={{
+							color: theme.primaryColor,
+							backgroundColor: theme.backgroundColor,
+							width: '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(--color-text-acc), var(--color-text-pri))',
+									fontWeight: 700,
+									WebkitBackgroundClip: 'text',
+									WebkitTextFillColor: 'transparent',
+								}}
+							>
+								{tooltip.description}
+							</Highlight>
+						</Stack>
+					</Popover.Dropdown>
+				</Popover>
+				<Button
+					className={buttonClasses.tableButton}
+					classNames={buttonClasses}
+					onClick={openModal}
+				>
+					<FiPlus />
+				</Button>
+			</Group>
+			<TextInput
+				w={isMobile ? undefined : '35%'}
+				pos={isMobile ? undefined : 'absolute'}
+				className={textInputClasses.settingsItem}
+				classNames={textInputClasses}
+				autoFocus={!isMobile}
+				placeholder='Search...'
+				value={searchValue}
+				onInput={(event: any) => {
+					setSearchValue(event.target.value);
+				}}
+			/>
+			{setDragging && (
+				<Switch
+					label={<Text c={theme.primaryColor}>Reorder</Text>}
+					labelPosition='left'
+					pos={'absolute'}
+					right={isMobile ? '2rem' : '1rem'}
+					top={isMobile ? '10rem' : undefined}
+					onChange={(e) => {
+						setDragging(e.target.checked);
+					}}
+					color={theme.primaryColor}
+					styles={{
+						label: {
+							color: theme.primaryColor,
+							top: isMobile ? -22 : 0,
+							left: isMobile ? -8 : 0,
+							position: isMobile ? 'absolute' : undefined,
+						},
+					}}
+				/>
+			)}
+		</Group>
+	);
+}
+
+export default SettingsHeader;