Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2605 | Rev 2688 | 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%',
18 
  [theme.breakpoints.up('sm')]: {
19 
    borderRadius: theme.shape.borderRadius
20 
  }
21 
}))
22 
 
2268 stevensc 23 
export function Widget({ children, styles, ...props }) {
24 
  return (
2606 stevensc 25 
    <WidgetContainer sx={styles} {...props} com>
2268 stevensc 26 
      {children}
27 
    </WidgetContainer>
28 
  )
2261 stevensc 29 
}
30 
 
31 
export function WidgetHeader({
32 
  title = '',
33 
  subheader = '',
34 
  avatar = '',
2276 stevensc 35 
  renderAction = () => null,
2366 stevensc 36 
  styles = {},
2261 stevensc 37 
  ...props
38 
}) {
39 
  return (
40 
    <CardHeader
2364 stevensc 41 
      avatar={avatar ? <Avatar alt={title} src={avatar} /> : null}
2276 stevensc 42 
      action={renderAction()}
2261 stevensc 43 
      title={title}
44 
      subheader={subheader}
2262 stevensc 45 
      titleTypographyProps={{
2263 stevensc 46 
        sx: { fontSize: '16px', fontWeight: 600, color: 'var(--title-color)' }
2262 stevensc 47 
      }}
48 
      subheaderTypographyProps={{
2263 stevensc 49 
        sx: { fontSize: '14px', color: 'var(--subtitle-color)' }
2262 stevensc 50 
      }}
2275 stevensc 51 
      sx={{ padding: 1, paddingBottom: 0, ...styles }}
2261 stevensc 52 
      {...props}
53 
    />
54 
  )
55 
}
56 
 
2366 stevensc 57 
export function WidgetBody({ children, styles = {}, ...props }) {
2270 stevensc 58 
  return (
2276 stevensc 59 
    <CardContent
60 
      sx={{ padding: 1, '&:last-child': { paddingBottom: 1 }, ...styles }}
61 
      {...props}
62 
    >
2270 stevensc 63 
      {children}
64 
    </CardContent>
65 
  )
2261 stevensc 66 
}
67 
 
2366 stevensc 68 
export function WidgetActions({ children, styles = {}, ...props }) {
2261 stevensc 69 
  return (
2275 stevensc 70 
    <CardActions
2380 stevensc 71 
      sx={{
72 
        padding: 1,
73 
        paddingTop: 0,
74 
        justifyContent: 'space-around',
75 
        gap: 1,
76 
        '& > button': {
77 
          flex: '1'
78 
        },
79 
        ...styles
80 
      }}
2275 stevensc 81 
      disableSpacing
82 
      {...props}
83 
    >
2261 stevensc 84 
      {children}
85 
    </CardActions>
86 
  )
87 
}
88 
 
89 
export function WidgetMedia({
90 
  src = '',
91 
  height = 200,
92 
  width = 200,
93 
  alt = '',
2562 stevensc 94 
  type = 'image',
2366 stevensc 95 
  styles = {},
2261 stevensc 96 
  ...props
97 
}) {
2562 stevensc 98 
  const getMediaComponent = (type) => {
99 
    const options = {
100 
      image: 'img',
101 
      video: 'video',
102 
      audio: 'audio'
103 
    }
104 
 
105 
    return options[type] ?? options.image
106 
  }
107 
 
2261 stevensc 108 
  return (
109 
    <CardMedia
110 
      alt={alt}
2562 stevensc 111 
      component={getMediaComponent(type)}
2261 stevensc 112 
      height={height}
2562 stevensc 113 
      src={src}
2261 stevensc 114 
      width={width}
2393 stevensc 115 
      sx={{
116 
        objectFit: 'contain',
117 
        ...styles
118 
      }}
2261 stevensc 119 
      {...props}
120 
    />
121 
  )
122 
}
123 
 
124 
Widget.Header = WidgetHeader
125 
Widget.Body = WidgetBody
126 
Widget.Actions = WidgetActions
127 
Widget.Media = WidgetMedia
128 
 
129 
export default Widget