unleash.unleash/frontend/src/component/changeRequest/UpdateCount.tsx

import { FC } from 'react';
import { Box, Typography } from '@mui/material';
import { ConditionallyRender } from '../common/ConditionallyRender/ConditionallyRender';

export const UpdateCount: FC<{
    featuresCount: number;
    segmentsCount: number;
}> = ({ featuresCount, segmentsCount }) => (
    <Box sx={{ display: 'inline', pl: 0.5 }}>
        <Typography
            component="span"
            variant="body2"
            fontWeight="bold"
            display="inline"
        >
            {featuresCount}{' '}
            {featuresCount === 1 ? 'feature toggle' : 'feature toggles'}
        </Typography>
        <ConditionallyRender
            condition={segmentsCount > 0}
            show={
                <>
                    <Typography component="span" variant="body2">
                        {' and '}
                    </Typography>
                    <Typography
                        component="span"
                        variant="body2"
                        fontWeight="bold"
                        display="inline"
                    >
                        {segmentsCount}{' '}
                        {segmentsCount === 1 ? 'segment' : 'segments'}
                    </Typography>
                </>
            }
        />
    </Box>
);