Rev 3065 | Ir a la última revisión | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |
import React from 'react'
import { Avatar, Typography } from '@mui/material'
import { parse } from '@utils'
import StatItem from './StatItem'
import Widget from '@components/UI/Widget'
export default function GroupWidget({
group: {
cover = '',
image = '',
name = '',
overview = '',
total_members = '',
group_type = '',
accessibility = ''
}
}) {
return (
<Widget>
<Widget.Media
src={cover}
alt='Profile cover'
styles={{
marginBottom: 'calc(-30px - 1rem)',
height: '60px',
objectFit: 'cover'
}}
/>
<Widget.Body styles={{ textAlign: 'center' }}>
<Avatar
src={image}
name={name}
sx={{ width: 60, height: 60, margin: 'auto' }}
/>
<Typography variant='h2'>{name}</Typography>
<Typography>{`${group_type} - ${accessibility}`}</Typography>
<Typography>{parse(overview)}</Typography>
</Widget.Body>
<StatItem title='Número de miembros' number={total_members} />
</Widget>
)
}