one-click-accessibility/modules/scanner/assets/js/components/block-button/index.js

import CircleCheckFilledIcon from '@elementor/icons/CircleCheckFilledIcon';
import { Chip } from '@elementor/ui';
import Box from '@elementor/ui/Box';
import Typography from '@elementor/ui/Typography';
import PropTypes from 'prop-types';
import { useScannerWizardContext } from '@ea11y-apps/scanner/context/scanner-wizard-context';
import {
	StyledButton,
	StyledButtonContainer,
} from '@ea11y-apps/scanner/styles/app.styles';

export const BlockButton = ({ title, count, block }) => {
	const { setOpenedBlock, isResolved } = useScannerWizardContext();

	const handleClick = () => {
		setOpenedBlock(block);
	};

	const resolved = count === 0 || isResolved(block);

	return (
		<StyledButton
			variant="outlined"
			color="secondary"
			size="large"
			fullWidth
			onClick={handleClick}
		>
			<StyledButtonContainer
				elevation={0}
				variant="elevation"
				color={resolved ? 'success' : 'default'}
			>
				<Box display="flex" alignItems="center" gap={0.5}>
					<Typography variant="subtitle2">{title}</Typography>
					{!resolved && (
						<Chip label={count} color="error" variant="standard" size="tiny" />
					)}
				</Box>
				{resolved && <CircleCheckFilledIcon color="success" />}
			</StyledButtonContainer>
		</StyledButton>
	);
};

BlockButton.propTypes = {
	title: PropTypes.string.isRequired,
	count: PropTypes.number.isRequired,
	block: PropTypes.string.isRequired,
};