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

import Dialog from '@elementor/ui/Dialog';
import DialogContent from '@elementor/ui/DialogContent';
import DialogHeader from '@elementor/ui/DialogHeader';
import Typography from '@elementor/ui/Typography';
import { __ } from '@wordpress/i18n';
import Stack from '@elementor/ui/Stack';
import Update from './update';
import Divider from '@elementor/ui/Divider';
import { PlusIcon } from './plus-icon';
import { Fragment } from 'react';

export const ChangelogDialog = ({ open, onClose, whatsNew }) => {
	return (
		<Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
			<DialogHeader onClose={onClose} variant="outlined" logo={<PlusIcon />}>
				<Typography
					variant="overline"
					sx={{
						textTransform: 'uppercase',
						fontWeight: 400,
						color: 'text.primary',
					}}
				>
					{__('Changelog', 'hello-elementor')}
				</Typography>
			</DialogHeader>

			<DialogContent sx={{ p: 0 }}>
				<Stack direction={'column'}>
					{whatsNew.map((item, index) => {
						return (
							<Fragment key={item.id}>
								<Update {...item} />
								{index !== whatsNew.length - 1 && <Divider />}
							</Fragment>
						);
					})}
				</Stack>
			</DialogContent>
		</Dialog>
	);
};