Added SettingsHeader

src/pages/settings/components/Search/SearchProviders.tsx

@@ -1,5 +1,4 @@
 import {
-	ActionIcon,
 	Box,
 	Button,
 	Card,
@@ -7,26 +6,17 @@ import {
 	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 { Provider } from 'types';
+import SettingsHeader from '../Shared/SettingsHeader';
 import DebouncedSearchProvider from './DebouncedSearchProvider';
 import SearchProviderSettingsItem from './SearchProviderSettingsItem';
 
@@ -36,7 +26,7 @@ const SearchProviderSettings = () => {
 		endpoint: endpoint,
 	});
 	const [providerData, setProviderData] = useState<Provider[]>([]);
-	const { theme, isMobile, modalStyle } = useCommonHooks();
+	const { isMobile, modalStyle } = useCommonHooks();
 	const { mutateAsync } = useMutationAPI();
 	const [newProvider, setNewProvider] = useState<Provider>({
 		id: undefined,
@@ -160,71 +150,19 @@ const SearchProviderSettings = () => {
 					</Modal.Body>
 				</Modal.Content>
 			</Modal.Root>
-			<Group align='center' justify='center' mt={'1rem'}>
-				<Group w={isMobile ? undefined : '100%'}>
-					<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
-						Search Providers
-					</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}>
-									{'Search providers and shortcuts can be configured here.'}
-								</Text>
-								<Highlight
-									highlight={['Providers', 'search']}
-									className={textClasses.settingsTooltip}
-									classNames={textClasses}
-									highlightStyles={{
-										backgroundImage:
-											'linear-gradient(45deg, var(--color-text-acc), var(--color-text-pri))',
-										fontWeight: 700,
-										WebkitBackgroundClip: 'text',
-										WebkitTextFillColor: 'transparent',
-									}}
-								>
-									{
-										'Providers can be used in the search bar. By starting a search with the prefix, it will be redirected to the url of the provider to complete the search.'
-									}
-								</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: 'Search providers and shortcuts can be configured here.',
+					highlightList: ['Providers', 'search'],
+					description:
+						'Providers can be used in the search bar. By starting a search with the prefix, it will be redirected to the url of the provider to complete the search.',
+				}}
+				searchValue={searchValue}
+				setSearchValue={setSearchValue}
+			/>
 			<Stack w={'100%'} align='center'>
 				<Grid columns={18} w={'75%'}>
 					{providerData?.map((provider: Provider) => (