Proyectos de Subversion LeadersLinked - SPA

Rev

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