Proyectos de Subversion LeadersLinked - SPA

Rev

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