Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3054 | Rev 3154 | 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,
2850 stevensc 16 
  border: `1px solid ${colors.border.primary}`,
2261 stevensc 17 
  height: 'fit-content',
18 
  position: 'relative',
2851 stevensc 19 
  boxShadow: 'none',
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
2830 stevensc 45 
      avatar={avatar ? <Avatar alt={title} src={avatar} /> : null}
3054 stevensc 46 
      action={typeof renderAction === 'function' ? renderAction() : null}
2261 stevensc 47 
      title={title}
48 
      subheader={subheader}
2262 stevensc 49 
      titleTypographyProps={{
2818 stevensc 50 
        variant: 'h3',
2809 stevensc 51 
        onClick
2262 stevensc 52 
      }}
53 
      subheaderTypographyProps={{
2917 stevensc 54 
        variant: 'overline'
2262 stevensc 55 
      }}
3093 stevensc 56 
      sx={{
57 
        '& .MuiCardHeader-action ': { marginRight: 0 },
58 
        padding: 1,
59 
        ...styles
60 
      }}
2261 stevensc 61 
      {...props}
62 
    />
63 
  )
64 
}
65 
 
2366 stevensc 66 
export function WidgetBody({ children, styles = {}, ...props }) {
2270 stevensc 67 
  return (
2819 stevensc 68 
    <CardContent
69 
      sx={{
2821 stevensc 70 
        padding: 1,
71 
        '&:last-child': { paddingBottom: 1 },
2824 stevensc 72 
        '.MuiCardHeader-root + &': { paddingTop: 0 },
2819 stevensc 73 
        ...styles
74 
      }}
75 
      {...props}
76 
    >
2270 stevensc 77 
      {children}
78 
    </CardContent>
79 
  )
2261 stevensc 80 
}
81 
 
2366 stevensc 82 
export function WidgetActions({ children, styles = {}, ...props }) {
2261 stevensc 83 
  return (
2275 stevensc 84 
    <CardActions
2380 stevensc 85 
      sx={{
2829 stevensc 86 
        padding: 0.5,
2380 stevensc 87 
        justifyContent: 'space-around',
88 
        gap: 1,
89 
        '& > button': {
90 
          flex: '1'
91 
        },
2830 stevensc 92 
        borderTop: `1px solid ${colors.border.primary}`,
2380 stevensc 93 
        ...styles
94 
      }}
2275 stevensc 95 
      disableSpacing
96 
      {...props}
97 
    >
2261 stevensc 98 
      {children}
99 
    </CardActions>
100 
  )
101 
}
102 
 
103 
export function WidgetMedia({
104 
  src = '',
2840 stevensc 105 
  height,
106 
  width,
2261 stevensc 107 
  alt = '',
2562 stevensc 108 
  type = 'image',
2366 stevensc 109 
  styles = {},
2261 stevensc 110 
  ...props
111 
}) {
2562 stevensc 112 
  const getMediaComponent = (type) => {
113 
    const options = {
114 
      image: 'img',
115 
      video: 'video',
116 
      audio: 'audio'
117 
    }
118 
 
119 
    return options[type] ?? options.image
120 
  }
121 
 
2261 stevensc 122 
  return (
123 
    <CardMedia
124 
      alt={alt}
2562 stevensc 125 
      component={getMediaComponent(type)}
2261 stevensc 126 
      height={height}
2562 stevensc 127 
      src={src}
2261 stevensc 128 
      width={width}
2393 stevensc 129 
      sx={{
2889 stevensc 130 
        objectFit: 'contain',
2393 stevensc 131 
        ...styles
132 
      }}
2261 stevensc 133 
      {...props}
134 
    />
135 
  )
136 
}
137 
 
138 
Widget.Header = WidgetHeader
139 
Widget.Body = WidgetBody
140 
Widget.Actions = WidgetActions
141 
Widget.Media = WidgetMedia
142 
 
143 
export default Widget