Rev 2275 | Rev 2366 | Ir a la última revisión | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |
import React from 'react'
import {
Avatar,
Card,
CardActions,
CardContent,
CardHeader,
CardMedia,
styled
} from '@mui/material'
const WidgetContainer = styled(Card)(({ theme }) => ({
backgroundColor: theme.palette.background.default,
borderRadius: 0,
boxShadow: theme.shadows[1],
height: 'fit-content',
position: 'relative',
width: '100%',
[theme.breakpoints.up('sm')]: {
borderRadius: theme.shape.borderRadius
}
}))
export function Widget({ children, styles, ...props }) {
return (
<WidgetContainer sx={styles} {...props}>
{children}
</WidgetContainer>
)
}
export function WidgetHeader({
title = '',
subheader = '',
avatar = '',
renderAction = () => null,
styles,
...props
}) {
return (
<CardHeader
avatar={avatar ? <Avatar alt={avatar.alt} src={avatar.src} /> : null}
action={renderAction()}
title={title}
subheader={subheader}
titleTypographyProps={{
sx: { fontSize: '16px', fontWeight: 600, color: 'var(--title-color)' }
}}
subheaderTypographyProps={{
sx: { fontSize: '14px', color: 'var(--subtitle-color)' }
}}
sx={{ padding: 1, paddingBottom: 0, ...styles }}
{...props}
/>
)
}
export function WidgetBody({ children, styles, ...props }) {
return (
<CardContent
sx={{ padding: 1, '&:last-child': { paddingBottom: 1 }, ...styles }}
{...props}
>
{children}
</CardContent>
)
}
export function WidgetActions({ children, styles, ...props }) {
return (
<CardActions
sx={{ padding: 1, paddingTop: 0, ...styles }}
disableSpacing
{...props}
>
{children}
</CardActions>
)
}
export function WidgetMedia({
src = '',
height = 200,
width = 200,
alt = '',
component = 'img',
styles,
...props
}) {
return (
<CardMedia
alt={alt}
component={component}
height={height}
image={src}
width={width}
sx={styles}
{...props}
/>
)
}
Widget.Header = WidgetHeader
Widget.Body = WidgetBody
Widget.Actions = WidgetActions
Widget.Media = WidgetMedia
export default Widget