Added SettingsHeader

src/pages/settings/components/Applications/Applications.tsx

@@ -1,6 +1,5 @@
 import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
 import {
-	ActionIcon,
 	Box,
 	Button,
 	Card,
@@ -8,27 +7,18 @@ import {
 	Grid,
 	GridCol,
 	Group,
-	Highlight,
 	Modal,
 	Popover,
 	Stack,
-	Switch,
 	Text,
 	TextInput,
 } from '@mantine/core';
 import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
-import { FiHelpCircle, FiPlus } from 'react-icons/fi';
-import {
-	actionIconClasses,
-	buttonClasses,
-	cardClasses,
-	modalClasses,
-	textClasses,
-	textInputClasses,
-} from 'styles';
+import { cardClasses, modalClasses, textInputClasses } from 'styles';
 import type { Application } from 'types';
+import SettingsHeader from '../Shared/SettingsHeader';
 import AppSettingsItem from './AppSettingsItem';
 import DebouncedApplication from './DebouncedApplication';
 
@@ -236,99 +226,28 @@ const ApplicationSettings = () => {
 					</Modal.Body>
 				</Modal.Content>
 			</Modal.Root>
-			<Group align='center' justify='center' mt={'1rem'}>
-				<Group w={isMobile ? undefined : '100%'}>
-					<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
-						Applications
-					</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}>
-									{'Applications are the apps that will be displayed on the homepage.'}
-								</Text>
-								<Highlight
-									highlight={[
-										'Applications',
-										'apps',
-										'application',
-										'name',
-										'base url',
-										'url',
-										'icon',
-										'filter',
-									]}
-									className={textClasses.settingsTooltip}
-									classNames={textClasses}
-									highlightStyles={{
-										backgroundImage:
-											'linear-gradient(45deg, var(--color-text-acc), var(--color-text-pri))',
-										fontWeight: 700,
-										WebkitBackgroundClip: 'text',
-										WebkitTextFillColor: 'transparent',
-									}}
-								>
-									{
-										'Applications contain a name, base url, url, icon and filter. Currently the icon must be the mdi icon name. URLs can contain either http(s):// or not. Base URLs should start with /, otherwise they will cause errors.'
-									}
-								</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);
-					}}
-				/>
-				<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>
+			<SettingsHeader
+				setDragging={setDragging}
+				openModal={openModal}
+				title={'Applications'}
+				tooltip={{
+					title: 'Applications are the apps that will be displayed on the homepage.',
+					highlightList: [
+						'Applications',
+						'apps',
+						'application',
+						'name',
+						'base url',
+						'url',
+						'icon',
+						'filter',
+					],
+					description:
+						'Applications contain a name, base url, url, icon and filter. Currently the icon must be the mdi icon name. URLs can contain either http(s):// or not. Base URLs should start with /, otherwise they will cause errors.',
+				}}
+				searchValue={searchValue}
+				setSearchValue={setSearchValue}
+			/>
 			{dragging ? (
 				<DragDropContext onDragEnd={onDragEnd}>
 					<Stack w={'100%'} align='center'>