export function HomeMenu()

in apps/newsletters-ui/src/app/components/HomeMenu.tsx [57:135]
72 lines of code
5 McCabe index (conditional complexity)

export function HomeMenu() {
	const list = useLoaderData() as NewsletterData[];
	const permissions = usePermissions();
	const navigate = useNavigate();

	if (!permissions) return null;

	const showEditOptions = shouldShowEditOptions(permissions);

	return (
		<Container maxWidth={'lg'}>
			<Grid container spacing={3} rowSpacing={6} paddingY={4}>
				<ButtonGridItem
					path="/launched"
					content={'View launched newsletters'}
				/>
				<ButtonGridItem path="/drafts" content={'View draft newsletters'} />

				{permissions.writeToDrafts && (
					<ButtonGridItem
						path="/drafts/newsletter-data"
						content={'Create newsletter'}
						variant="contained"
					/>
				)}

				{showEditOptions && (
					<Grid item xs={6} sm={4} display={'flex'}>
						<ScrollingMenuButton
							buttonText="update newsletter"
							buttonProps={{
								variant: 'outlined',
								fullWidth: true,
								size: 'large',
							}}
							ariaMenuId="newsletter-update-menu"
							ariaButtonLabel="select newsletter to update"
							options={list.map((newsletter) => ({
								name: newsletter.name,
								id: newsletter.identityName,
							}))}
							handleSelect={(identityName) => {
								navigate(`/launched/edit/${identityName}`);
							}}
						/>
					</Grid>
				)}

				{permissions.editNewsletters && (
					<Grid item xs={6} sm={4} display={'flex'}>
						<ScrollingMenuButton
							buttonText="set rendering options"
							buttonProps={{
								variant: 'outlined',
								fullWidth: true,
								size: 'large',
							}}
							ariaMenuId="rendering-options-menu"
							ariaButtonLabel="select newsletter to set rendering options for"
							options={list.map((newsletter) => ({
								name: newsletter.name,
								id: newsletter.identityName,
							}))}
							handleSelect={(identityName) => {
								navigate(`/launched/rendering-options/${identityName}`);
							}}
						/>
					</Grid>
				)}

				<ButtonGridItem
					path="/layouts"
					content={'View Newsletter Layouts'}
					variant="outlined"
				/>
			</Grid>
		</Container>
	);
}