Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev Autor Línea Nro. Línea
3462 stevensc 1 
import React from 'react';
2261 stevensc 2 
import {
3 
  Avatar,
4 
  Card,
5 
  CardActions,
6 
  CardContent,
7 
  CardHeader,
8 
  CardMedia,
9 
  styled
3462 stevensc 10 
} from '@mui/material';
2261 stevensc 11 
 
3596 stevensc 12 
import colors from '@styles/config/colors';
2827 stevensc 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,
3154 stevensc 21 
  width: '100%',
2261 stevensc 22 
  [theme.breakpoints.up('sm')]: {
23 
    borderRadius: theme.shape.borderRadius
24 
  }
3462 stevensc 25 
}));
2261 stevensc 26 
 
2268 stevensc 27 
export function Widget({ children, styles, ...props }) {
28 
  return (
2809 stevensc 29 
    <WidgetContainer sx={styles} {...props}>
2268 stevensc 30 
      {children}
31 
    </WidgetContainer>
3462 stevensc 32 
  );
2261 stevensc 33 
}
34 
 
35 
export function WidgetHeader({
36 
  title = '',
37 
  subheader = '',
38 
  avatar = '',
2809 stevensc 39 
  styles = {},
2276 stevensc 40 
  renderAction = () => null,
2809 stevensc 41 
  onClick = () => {},
2261 stevensc 42 
  ...props
43 
}) {
44 
  return (
45 
    <CardHeader
2830 stevensc 46 
      avatar={avatar ? <Avatar alt={title} src={avatar} /> : null}
3054 stevensc 47 
      action={typeof renderAction === 'function' ? renderAction() : null}
2261 stevensc 48 
      title={title}
49 
      subheader={subheader}
2262 stevensc 50 
      titleTypographyProps={{
2818 stevensc 51 
        variant: 'h3',
2809 stevensc 52 
        onClick
2262 stevensc 53 
      }}
54 
      subheaderTypographyProps={{
2917 stevensc 55 
        variant: 'overline'
2262 stevensc 56 
      }}
3093 stevensc 57 
      sx={{
58 
        '& .MuiCardHeader-action ': { marginRight: 0 },
59 
        padding: 1,
60 
        ...styles
61 
      }}
2261 stevensc 62 
      {...props}
63 
    />
3462 stevensc 64 
  );
2261 stevensc 65 
}
66 
 
2366 stevensc 67 
export function WidgetBody({ children, styles = {}, ...props }) {
2270 stevensc 68 
  return (
2819 stevensc 69 
    <CardContent
70 
      sx={{
2821 stevensc 71 
        padding: 1,
72 
        '&:last-child': { paddingBottom: 1 },
2824 stevensc 73 
        '.MuiCardHeader-root + &': { paddingTop: 0 },
2819 stevensc 74 
        ...styles
75 
      }}
76 
      {...props}
77 
    >
2270 stevensc 78 
      {children}
79 
    </CardContent>
3462 stevensc 80 
  );
2261 stevensc 81 
}
82 
 
3585 stevensc 83 
export function WidgetFooter({ children, styles = {}, ...props }) {
84 
  return (
85 
    <CardActions
86 
      sx={{
87 
        padding: 0.5,
88 
        justifyContent: 'space-around',
89 
        gap: { xs: 0, md: 0.5 },
90 
        borderTop: `1px solid ${colors.border.primary}`,
91 
        ...styles
92 
      }}
93 
      {...props}
94 
    >
95 
      {children}
96 
    </CardActions>
97 
  );
98 
}
99 
 
2366 stevensc 100 
export function WidgetActions({ children, styles = {}, ...props }) {
2261 stevensc 101 
  return (
2275 stevensc 102 
    <CardActions
2380 stevensc 103 
      sx={{
2829 stevensc 104 
        padding: 0.5,
2380 stevensc 105 
        justifyContent: 'space-around',
3271 stevensc 106 
        gap: { xs: 0, md: 0.5 },
2380 stevensc 107 
        '& > button': {
3271 stevensc 108 
          flex: 1,
109 
          flexWrap: 'wrap'
2380 stevensc 110 
        },
2830 stevensc 111 
        borderTop: `1px solid ${colors.border.primary}`,
2380 stevensc 112 
        ...styles
113 
      }}
2275 stevensc 114 
      disableSpacing
115 
      {...props}
116 
    >
2261 stevensc 117 
      {children}
118 
    </CardActions>
3462 stevensc 119 
  );
2261 stevensc 120 
}
121 
 
3462 stevensc 122 
export function WidgetMedia({ src = '', height, width, alt = '', type = 'image', styles = {} }) {
2562 stevensc 123 
  const getMediaComponent = (type) => {
124 
    const options = {
125 
      image: 'img',
126 
      video: 'video',
127 
      audio: 'audio'
3462 stevensc 128 
    };
2562 stevensc 129 
 
3462 stevensc 130 
    return options[type] ?? options.image;
131 
  };
2562 stevensc 132 
 
2261 stevensc 133 
  return (
134 
    <CardMedia
135 
      alt={alt}
2562 stevensc 136 
      component={getMediaComponent(type)}
2261 stevensc 137 
      height={height}
3369 stevensc 138 
      image={src}
2261 stevensc 139 
      width={width}
2393 stevensc 140 
      sx={{
2889 stevensc 141 
        objectFit: 'contain',
2393 stevensc 142 
        ...styles
143 
      }}
2261 stevensc 144 
    />
3462 stevensc 145 
  );
2261 stevensc 146 
}
147 
 
3462 stevensc 148 
Widget.Header = WidgetHeader;
149 
Widget.Body = WidgetBody;
3585 stevensc 150 
Widget.Footer = WidgetFooter;
3462 stevensc 151 
Widget.Actions = WidgetActions;
152 
Widget.Media = WidgetMedia;
2261 stevensc 153 
 
3462 stevensc 154 
export default Widget;