hello-theme/modules/admin-home/assets/js/components/link/promotion-link.js

import Stack from '@elementor/ui/Stack';
import Typography from '@elementor/ui/Typography';
import Button from '@elementor/ui/Button';
import Paper from '@elementor/ui/Paper';
import Image from '@elementor/ui/Image';
import { Feature } from '../promotions/feature';
import UpgradeIcon from '@elementor/icons/UpgradeIcon';

export const PromotionLink = ({
	image,
	alt,
	title,
	messages,
	button,
	url,
	features,
	target = '_blank',
	width = 100,
	height = 100,
	horizontalLayout = false,
	upgrade = false,
	backgroundImage = false,
	backgroundColor = false,
	buttonBgColor = false,
}) => {
	const backgroundFallback = backgroundImage ? 'transparent' : null;
	const paperSx = horizontalLayout
		? {
				display: 'flex',
				alignItems: 'center',
				justifyContent: 'space-between',
				p: 3,
				gap: 4,
				maxWidth: 600,
			}
		: { p: 3 };
	paperSx.backgroundImage = backgroundImage ? `url(${backgroundImage})` : null;
	paperSx.backgroundColor = backgroundColor
		? backgroundColor
		: backgroundFallback;
	paperSx.color = backgroundImage || backgroundColor ? 'rgb(12, 13, 14)' : null;

	const stackSx = horizontalLayout
		? { flex: 0.6, alignItems: 'center', justifyContent: 'center' }
		: { alignItems: 'center', justifyContent: 'center' };

	const featuresStackSx = horizontalLayout ? { flex: 0.4, mt: 4 } : { mt: 4 };

	const startIcon = upgrade ? <UpgradeIcon /> : null;

	return (
		<Paper sx={paperSx} backgroundImage>
			<Stack direction="column" sx={stackSx}>
				<Image src={image} alt={alt} variant="square" sx={{ width, height }} />
				<Typography sx={{ mt: 1 }} align="center" variant="h6">
					{title}
				</Typography>
				{messages.map((message, i) => {
					return (
						<Typography key={i} sx={{ mt: 0.6 }} align="center" variant="body2">
							{message}
						</Typography>
					);
				})}
				<Button
					startIcon={startIcon}
					sx={{ mt: 2, backgroundColor: buttonBgColor }}
					color="promotion"
					variant="contained"
					href={url}
					target={target}
					rel="noreferrer"
				>
					{button}
				</Button>
			</Stack>

			{features && (
				<Stack gap={1} sx={featuresStackSx}>
					{features.map((feature, i) => {
						return <Feature key={i} text={feature} />;
					})}
				</Stack>
			)}
		</Paper>
	);
};