Added SettingsHeader

src/pages/settings/components/Theming/ThemePlaylists.tsx

@@ -1,20 +1,11 @@
-import {
-	ActionIcon,
-	Box,
-	Button,
-	Group,
-	Highlight,
-	Popover,
-	Stack,
-	Text,
-	TextInput,
-} from '@mantine/core';
+import { Box, Group, Stack, Text } from '@mantine/core';
 import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useState } from 'react';
-import { FiChevronRight, FiHelpCircle, FiPlus } from 'react-icons/fi';
-import { actionIconClasses, buttonClasses, textClasses, textInputClasses } from 'styles';
+import { FiChevronRight } from 'react-icons/fi';
+import { textClasses } from 'styles';
 import type { ThemePlaylist } from 'types';
+import SettingsHeader from '../Shared/SettingsHeader';
 import ThemePlaylistCard from './ThemePlaylistCard';
 import ThemePlaylistModal from './ThemePlaylistModal';
 
@@ -28,8 +19,7 @@ function ThemePlaylists() {
 	const { mutateAsync } = useMutationAPI();
 	const [opened, { open, close }] = useDisclosure(false);
 	const [selectedPlaylist, setSelectedPlaylist] = useState<any>({});
-	const { currentThemePlaylist, setCurrentThemePlaylist, theme, isMobile } =
-		useCommonHooks();
+	const { currentThemePlaylist, setCurrentThemePlaylist, theme } = useCommonHooks();
 	const [searchValue, setSearchValue] = useState('');
 	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
 
@@ -39,6 +29,7 @@ function ThemePlaylists() {
 	};
 
 	const handleClose = () => {
+		setSelectedPlaylist({});
 		close();
 	};
 
@@ -52,7 +43,7 @@ function ThemePlaylists() {
 	};
 
 	return (
-		<>
+		<Stack>
 			<ThemePlaylistModal
 				opened={opened}
 				handleClose={handleClose}
@@ -63,77 +54,19 @@ function ThemePlaylists() {
 				createPlaylist={mutateAsync}
 			/>
 			<Stack h={'100%'} w={'100%'}>
-				<Group w={'100%'} justify='center' align='center' mt={'1rem'}>
-					<Group w={isMobile ? undefined : '100%'}>
-						<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
-							Theme Playlists
-						</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}>
-										{'Theme playlists can be created here and applied to the homepage.'}
-									</Text>
-									<Highlight
-										highlight={['Theme', 'Themes', 'Playlist', 'Playlists']}
-										className={textClasses.settingsTooltip}
-										classNames={textClasses}
-										highlightStyles={{
-											backgroundImage:
-												'linear-gradient(45deg, var(--color-text-acc), var(--color-text-pri))',
-											fontWeight: 700,
-											WebkitBackgroundClip: 'text',
-											WebkitTextFillColor: 'transparent',
-										}}
-									>
-										{
-											'Playlists are lists of themes. They can be enabled either here or in the settings button on the homepage. When a playlist is enabled, it will shuffle the included themes on the homepage. If a theme is part of a playlist, it will appear while the playlist is active, regardless of random/shuffle.'
-										}
-									</Highlight>
-								</Stack>
-							</Popover.Dropdown>
-						</Popover>
-						<Button
-							className={buttonClasses.tableButton}
-							classNames={buttonClasses}
-							onClick={() => {
-								setSelectedPlaylist({
-									name: 'New Playlist',
-									themeList: '[]',
-								});
-								open();
-							}}
-						>
-							<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={open}
+					title={'Theme Playlists'}
+					tooltip={{
+						title: 'Theme playlists can be created here and applied to the homepage.',
+						highlightList: ['Clients', 'homepage'],
+						description:
+							'Playlists are lists of themes. They can be enabled either here or in the settings button on the homepage. When a playlist is enabled, it will shuffle the included themes on the homepage. If a theme is part of a playlist, it will appear while the playlist is active, regardless of random/shuffle.',
+					}}
+					searchValue={searchValue}
+					setSearchValue={setSearchValue}
+				/>
 				<Group justify='center' align='center' pos={'relative'}>
 					<Text p={0} className={textClasses.settingsSubTitle} classNames={textClasses}>
 						Defaults
@@ -222,7 +155,7 @@ function ThemePlaylists() {
 						})}
 				</Group>
 			</Stack>
-		</>
+		</Stack>
 	);
 }