Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2824 | Rev 2827 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
2276 stevensc 1 
import React from 'react'
2261 stevensc 2 
import {
3 
  Avatar,
4 
  Card,
5 
  CardActions,
6 
  CardContent,
7 
  CardHeader,
8 
  CardMedia,
9 
  styled
10 
} from '@mui/material'
11 
 
12 
const WidgetContainer = styled(Card)(({ theme }) => ({
2275 stevensc 13 
  borderRadius: 0,
2261 stevensc 14 
  boxShadow: theme.shadows[1],
15 
  height: 'fit-content',
16 
  position: 'relative',
17 
  width: '100%',
2688 stevensc 18 
  transition: theme.transitions.easing.easeInOut,
2261 stevensc 19 
  [theme.breakpoints.up('sm')]: {
20 
    borderRadius: theme.shape.borderRadius
21 
  }
22 
}))
23 
 
2268 stevensc 24 
export function Widget({ children, styles, ...props }) {
25 
  return (
2809 stevensc 26 
    <WidgetContainer sx={styles} {...props}>
2268 stevensc 27 
      {children}
28 
    </WidgetContainer>
29 
  )
2261 stevensc 30 
}
31 
 
32 
export function WidgetHeader({
33 
  title = '',
34 
  subheader = '',
35 
  avatar = '',
2809 stevensc 36 
  styles = {},
2276 stevensc 37 
  renderAction = () => null,
2809 stevensc 38 
  onClick = () => {},
2261 stevensc 39 
  ...props
40 
}) {
41 
  return (
42 
    <CardHeader
2364 stevensc 43 
      avatar={avatar ? <Avatar alt={title} src={avatar} /> : null}
2276 stevensc 44 
      action={renderAction()}
2261 stevensc 45 
      title={title}
46 
      subheader={subheader}
2262 stevensc 47 
      titleTypographyProps={{
2818 stevensc 48 
        variant: 'h3',
2809 stevensc 49 
        onClick
2262 stevensc 50 
      }}
51 
      subheaderTypographyProps={{
2818 stevensc 52 
        variant: 'body2'
2262 stevensc 53 
      }}
2818 stevensc 54 
      sx={{ padding: 1, ...styles }}
2261 stevensc 55 
      {...props}
56 
    />
57 
  )
58 
}
59 
 
2366 stevensc 60 
export function WidgetBody({ children, styles = {}, ...props }) {
2270 stevensc 61 
  return (
2819 stevensc 62 
    <CardContent
63 
      sx={{
2821 stevensc 64 
        padding: 1,
65 
        '&:last-child': { paddingBottom: 1 },
2825 stevensc 66 
        '&:not(:last-child)': { paddingBottom: 0 },
2824 stevensc 67 
        '.MuiCardHeader-root + &': { paddingTop: 0 },
2819 stevensc 68 
        ...styles
69 
      }}
70 
      {...props}
71 
    >
2270 stevensc 72 
      {children}
73 
    </CardContent>
74 
  )
2261 stevensc 75 
}
76 
 
2366 stevensc 77 
export function WidgetActions({ children, styles = {}, ...props }) {
2261 stevensc 78 
  return (
2275 stevensc 79 
    <CardActions
2380 stevensc 80 
      sx={{
81 
        padding: 1,
82 
        justifyContent: 'space-around',
83 
        gap: 1,
84 
        '& > button': {
85 
          flex: '1'
86 
        },
87 
        ...styles
88 
      }}
2275 stevensc 89 
      disableSpacing
90 
      {...props}
91 
    >
2261 stevensc 92 
      {children}
93 
    </CardActions>
94 
  )
95 
}
96 
 
97 
export function WidgetMedia({
98 
  src = '',
99 
  height = 200,
100 
  width = 200,
101 
  alt = '',
2562 stevensc 102 
  type = 'image',
2366 stevensc 103 
  styles = {},
2261 stevensc 104 
  ...props
105 
}) {
2562 stevensc 106 
  const getMediaComponent = (type) => {
107 
    const options = {
108 
      image: 'img',
109 
      video: 'video',
110 
      audio: 'audio'
111 
    }
112 
 
113 
    return options[type] ?? options.image
114 
  }
115 
 
2261 stevensc 116 
  return (
117 
    <CardMedia
118 
      alt={alt}
2562 stevensc 119 
      component={getMediaComponent(type)}
2261 stevensc 120 
      height={height}
2562 stevensc 121 
      src={src}
2261 stevensc 122 
      width={width}
2393 stevensc 123 
      sx={{
124 
        objectFit: 'contain',
125 
        ...styles
126 
      }}
2261 stevensc 127 
      {...props}
128 
    />
129 
  )
130 
}
131 
 
132 
Widget.Header = WidgetHeader
133 
Widget.Body = WidgetBody
134 
Widget.Actions = WidgetActions
135 
Widget.Media = WidgetMedia
136 
 
137 
export default Widget