63 lines
2.0 KiB
JavaScript
63 lines
2.0 KiB
JavaScript
import Avatar from '@mui/material/Avatar';
|
|
import AvatarGroup from '@mui/material/AvatarGroup';
|
|
import Box from '@mui/material/Box';
|
|
|
|
function LeftSideCanvas({ title, subtitle, text }) {
|
|
return (
|
|
<Box
|
|
className="h-full min-h-screen relative hidden md:flex flex-auto items-center justify-center p-64 lg:px-112 overflow-hidden max-w-[45vw] w-full"
|
|
sx={{ backgroundColor: 'common.layout' }}
|
|
>
|
|
<svg
|
|
className="absolute inset-0 pointer-events-none"
|
|
viewBox="0 0 960 540"
|
|
width="100%"
|
|
height="100%"
|
|
preserveAspectRatio="xMidYMax slice"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<Box
|
|
component="g"
|
|
sx={{ color: 'primary.light' }}
|
|
className="opacity-20"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="100"
|
|
>
|
|
<circle r="234" cx="196" cy="23" />
|
|
<circle r="234" cx="790" cy="491" />
|
|
</Box>
|
|
</svg>
|
|
|
|
<div className="z-10 relative w-full max-w-2xl">
|
|
{title && <div className="text-7xl font-bold leading-none text-primary-light">{title}</div>}
|
|
{subtitle && (
|
|
<div className="mt-24 text-lg tracking-tight leading-6 text-common-disabled">
|
|
{subtitle}
|
|
</div>
|
|
)}
|
|
<div className="flex items-center mt-32">
|
|
<AvatarGroup
|
|
sx={{
|
|
'& .MuiAvatar-root': {
|
|
borderColor: 'common.layout',
|
|
},
|
|
}}
|
|
>
|
|
<Avatar src="assets/images/avatars/female-18.jpg" />
|
|
<Avatar src="assets/images/avatars/female-11.jpg" />
|
|
<Avatar src="assets/images/avatars/male-09.jpg" />
|
|
<Avatar src="assets/images/avatars/male-16.jpg" />
|
|
</AvatarGroup>
|
|
|
|
{text && (
|
|
<div className="ml-16 font-medium tracking-tight text-common-disabled">{text}</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
export default LeftSideCanvas;
|