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

import Stack from '@elementor/ui/Stack';
import Box from '@elementor/ui/Box';
import Typography from '@elementor/ui/Typography';
import Switch from '@elementor/ui/Switch';

export const Setting = ({
	label,
	value,
	onSwitchClick,
	code,
	description,
	tip,
}) => {
	return (
		<Stack direction="column" spacing={2}>
			<Stack direction="row" spacing={2}>
				<Box sx={{ minWidth: 80, height: 38 }}>
					<Box
						display="inline-flex"
						alignItems="center"
						justifyContent="center"
						height="100%"
					>
						<Switch onClick={onSwitchClick} checked={value} />
					</Box>
				</Box>
				<Box sx={{ height: 38, width: '100%' }}>
					<Box
						display="flex"
						alignItems="center"
						justifyContent="flex-start"
						height="100%"
						width="fit-content"
					>
						<Typography variant="subtitle1" sx={{ fontWeight: 500 }}>
							{label}
						</Typography>
					</Box>
				</Box>
			</Stack>
			<Stack direction="row" spacing={2}>
				<Box sx={{ minWidth: 80 }}>
					<Box height="100%" />
				</Box>
				<Box sx={{ width: '100%' }}>
					<Box height="100%">
						<Typography variant="body1" sx={{ py: 1, fontWeight: 400 }}>
							{description}
						</Typography>
						<Typography variant="body2" sx={{ py: 1, mb: 2, fontWeight: 400 }}>
							{tip}
						</Typography>
						<Typography
							component="code"
							color="text.tertiary"
							variant="body2"
							sx={{ fontFamily: 'Courier New' }}
						>
							{code}
						</Typography>
					</Box>
				</Box>
			</Stack>
		</Stack>
	);
};