Added SettingsHeader

src/pages/settings/components/WoL/WolClients.tsx

@@ -1,31 +1,21 @@
 import {
-	ActionIcon,
 	Button,
 	Card,
 	Divider,
 	Grid,
 	GridCol,
 	Group,
-	Highlight,
 	Modal,
 	Popover,
 	Stack,
-	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 { WolClient } from 'types';
+import SettingsHeader from '../Shared/SettingsHeader';
 import DebouncedWolClient from './DebouncedWolClient';
 import WolClientSettingsItem from './WolClientSettingsItem';
 
@@ -36,7 +26,7 @@ const WolClientSettings = () => {
 	});
 	const [wolClients, setWolClients] = useState<WolClient[]>([]);
 	const { mutateAsync } = useMutationAPI();
-	const { theme, isMobile, modalStyle } = useCommonHooks();
+	const { isMobile, modalStyle } = useCommonHooks();
 	const [newWolClient, setNewWolClient] = useState<WolClient>({
 		id: undefined,
 		hostname: '',
@@ -141,69 +131,18 @@ const WolClientSettings = () => {
 					</Modal.Body>
 				</Modal.Content>
 			</Modal.Root>
-			<Group align='center' justify='center' mt={'1rem'}>
-				<Group w={isMobile ? undefined : '100%'}>
-					<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
-						WoL Clients
-					</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,
-							}}
-						>
-							<Stack>
-								<Text className={textClasses.settingsTooltip} classNames={textClasses}>
-									{'Wake on Lan clients can be configured here.'}
-								</Text>
-								<Highlight
-									ta={'center'}
-									highlight={['Clients', 'homepage']}
-									className={textClasses.settingsTooltip}
-									classNames={textClasses}
-									highlightStyles={{
-										backgroundImage:
-											'linear-gradient(45deg, var(--color-text-acc), var(--color-text-pri))',
-										fontWeight: 700,
-										WebkitBackgroundClip: 'text',
-										WebkitTextFillColor: 'transparent',
-									}}
-								>
-									{'Clients can be powered on from the settings button the homepage.'}
-								</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);
-					}}
-				/>
-			</Group>
+			<SettingsHeader
+				setDragging={undefined}
+				openModal={openModal}
+				title={'Search Providers'}
+				tooltip={{
+					title: 'Wake on Lan clients can be configured here.',
+					highlightList: ['Clients', 'homepage'],
+					description: 'Clients can be powered on from the settings button the homepage.',
+				}}
+				searchValue={searchValue}
+				setSearchValue={setSearchValue}
+			/>
 			<Stack w={'100%'} align='center'>
 				<Grid columns={18} w={'75%'}>
 					{wolClients?.map((client: WolClient) => (