Rev 2276 | 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 (<CardHeaderavatar={avatar ? <Avatar alt={title} src={avatar} /> : 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 (<CardContentsx={{ padding: 1, '&:last-child': { paddingBottom: 1 }, ...styles }}{...props}>{children}</CardContent>)}export function WidgetActions({ children, styles, ...props }) {return (<CardActionssx={{ padding: 1, paddingTop: 0, ...styles }}disableSpacing{...props}>{children}</CardActions>)}export function WidgetMedia({src = '',height = 200,width = 200,alt = '',component = 'img',styles,...props}) {return (<CardMediaalt={alt}component={component}height={height}image={src}width={width}sx={styles}{...props}/>)}Widget.Header = WidgetHeaderWidget.Body = WidgetBodyWidget.Actions = WidgetActionsWidget.Media = WidgetMediaexport default Widget