hello-theme/modules/admin-home/assets/js/components/settings/settings-page.js

import Box from '@elementor/ui/Box';
import Tab from '@elementor/ui/Tab';
import TabPanel from '@elementor/ui/TabPanel';
import Tabs from '@elementor/ui/Tabs';
import { __ } from '@wordpress/i18n';
import useTabs from '@elementor/ui/useTabs';
import Typography from '@elementor/ui/Typography';
import { Seo } from './seo';
import { store as noticesStore } from '@wordpress/notices';
import { useDispatch, useSelect } from '@wordpress/data';
import Snackbar from '@elementor/ui/Snackbar';
import Alert from '@elementor/ui/Alert';
import { useEffect, useState } from 'react';
import { Structure } from './structure';
import { Theme } from './theme';
import { useSettingsContext } from './use-settings-context';
import Paper from '@elementor/ui/Paper';
import { styled } from '@elementor/ui/styles';
import Link from '@elementor/ui/Link';
import Stack from '@elementor/ui/Stack';
import { ChangelogDialog } from './changelog';

const Notices = () => {
	const notices = useSelect(
		(select) =>
			select(noticesStore)
				.getNotices()
				.filter((notice) => 'snackbar' === notice.type),
		[],
	);

	useEffect(() => {
		setOpen(true);
	}, [notices]);

	const [open, setOpen] = useState(true);
	const { removeNotice } = useDispatch(noticesStore);

	const onClose = () => {
		removeNotice();
		setOpen(false);
	};

	return notices.map((notice) => {
		const { content, id, status } = notice;

		return (
			<Snackbar
				open={open}
				key={id}
				autoHideDuration={3000}
				onClose={onClose}
				anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
			>
				<Alert onClose={onClose} severity={status} sx={{ width: '100%' }}>
					{content}
				</Alert>
			</Snackbar>
		);
	});
};

const StyledTab = styled(Tab)(() => ({
	'&.Mui-selected': {
		color: '#C00BB9',
	},
}));

const StyledTabs = styled(Tabs)(() => ({
	'& .MuiTabs-indicator': {
		backgroundColor: '#C00BB9',
	},
}));

export const SettingsPage = () => {
	const { whatsNew } = useSettingsContext();
	const { getTabsProps, getTabProps, getTabPanelProps } = useTabs('one');
	const [open, setOpen] = useState(false);

	const handleOpen = (event) => {
		event.preventDefault();
		setOpen(true);
	};

	const handleClose = () => setOpen(false);

	return (
		<>
			<Paper elevation={1} sx={{ px: 4, py: 3, maxWidth: 750 }}>
				<Box sx={{ width: '100%' }}>
					<Stack
						justifyContent={'space-between'}
						direction={'row'}
						alignItems={'center'}
					>
						<Typography variant="h4" gutterBottom>
							{__('Advanced theme settings', 'hello-elementor')}
						</Typography>
						<Link
							href="#"
							onClick={(event) => handleOpen(event)}
							color={'primary'}
						>
							{__('Changelog', 'hello-elementor')}
						</Link>
					</Stack>
					<Typography variant="body2" component="div" sx={{ mb: 4 }}>
						{__(
							"Advanced settings are available for experienced users and developers. If you're unsure about a setting, we recommend keeping the default option.",
							'hello-elementor',
						)}
					</Typography>
					<Box>
						<Notices />
					</Box>
					<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
						<StyledTabs {...getTabsProps()} aria-label="basic tabs example">
							<StyledTab
								label={__('SEO and accessibility', 'hello-elementor')}
								{...getTabProps('one')}
							/>
							<StyledTab
								label={__('Structure and layout', 'hello-elementor')}
								{...getTabProps('two')}
							/>
							<StyledTab
								label={__('CSS and styling control', 'hello-elementor')}
								{...getTabProps('three')}
							/>
						</StyledTabs>
					</Box>
					<TabPanel {...getTabPanelProps('one')}>
						<Seo />
					</TabPanel>
					<TabPanel {...getTabPanelProps('two')}>
						<Structure />
					</TabPanel>
					<TabPanel {...getTabPanelProps('three')}>
						<Theme />
					</TabPanel>
				</Box>
			</Paper>
			<ChangelogDialog open={open} onClose={handleClose} whatsNew={whatsNew} />
		</>
	);
};