Added SettingsHeader

src/pages/settings/components/Bookmarks/Bookmarks.tsx

@@ -1,32 +1,21 @@
 import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
 import {
-	ActionIcon,
 	Box,
 	Button,
 	Card,
 	Divider,
 	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 { Bookmark, BookmarkGroup } from 'types';
+import SettingsHeader from '../Shared/SettingsHeader';
 import DebouncedGroupSettingsItem from './DebouncedGroupSettingsItem';
 const BookmarkSettings = () => {
 	const { data: linkData, isFetched: linksIsFetched } = useQueryAPI({
@@ -190,99 +179,28 @@ const BookmarkSettings = () => {
 					</Modal.Body>
 				</Modal.Content>
 			</Modal.Root>
-			<Group align='center' justify='center' mt={'1rem'}>
-				<Group w={isMobile ? undefined : '100%'}>
-					<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
-						Bookmarks
-					</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}>
-									{'Bookmarks are the links that will be displayed on the homepage.'}
-								</Text>
-								<Highlight
-									highlight={[
-										'Bookmark',
-										'Bookmarks',
-										'Group',
-										'Groups',
-										'Link',
-										'Links',
-										'Category',
-										'Categories',
-									]}
-									className={textClasses.settingsTooltip}
-									classNames={textClasses}
-									highlightStyles={{
-										backgroundImage:
-											'linear-gradient(45deg, var(--color-text-acc), var(--color-text-pri))',
-										fontWeight: 700,
-										WebkitBackgroundClip: 'text',
-										WebkitTextFillColor: 'transparent',
-									}}
-								>
-									{
-										'Bookmarks can only belong to a single category, and will be displayed under that category on 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);
-					}}
-				/>
-				<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={'Bookmarks'}
+				tooltip={{
+					title: 'Bookmarks are the links that will be displayed on the homepage.',
+					highlightList: [
+						'Bookmark',
+						'Bookmarks',
+						'Group',
+						'Groups',
+						'Link',
+						'Links',
+						'Category',
+						'Categories',
+					],
+					description:
+						'Bookmarks can only belong to a single category, and will be displayed under that category on the homepage.',
+				}}
+				searchValue={searchValue}
+				setSearchValue={setSearchValue}
+			/>
 			{dragging ? (
 				<DragDropContext onDragEnd={onDragEnd}>
 					<Stack w={'100%'} align='center'>