Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3596 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3719 stevensc 1 
import React from 'react';
2 
import {
3 
  Avatar,
4 
  Card,
5 
  CardActions,
6 
  CardContent,
7 
  CardHeader,
8 
  CardMedia,
9 
  styled
10 
} from '@mui/material';
11 
 
12 
import colors from '@styles/config/colors';
13 
 
14 
const WidgetContainer = styled(Card)(({ theme }) => ({
15 
  borderRadius: 0,
16 
  border: `1px solid ${colors.border.primary}`,
17 
  height: 'fit-content',
18 
  position: 'relative',
19 
  boxShadow: 'none',
20 
  transition: theme.transitions.easing.easeInOut,
21 
  width: '100%',
22 
  [theme.breakpoints.up('sm')]: {
23 
    borderRadius: theme.shape.borderRadius
24 
  }
25 
}));
26 
 
27 
export function Widget({ children, styles, ...props }) {
28 
  return (
29 
    <WidgetContainer sx={styles} {...props}>
30 
      {children}
31 
    </WidgetContainer>
32 
  );
33 
}
34 
 
35 
export function WidgetHeader({
36 
  title = '',
37 
  subheader = '',
38 
  avatar = '',
39 
  styles = {},
40 
  renderAction = () => null,
41 
  onClick = () => {},
42 
  ...props
43 
}) {
44 
  return (
45 
    <CardHeader
46 
      avatar={avatar ? <Avatar alt={title} src={avatar} /> : null}
47 
      action={typeof renderAction === 'function' ? renderAction() : null}
48 
      title={title}
49 
      subheader={subheader}
50 
      titleTypographyProps={{
51 
        variant: 'h3',
52 
        onClick
53 
      }}
54 
      subheaderTypographyProps={{
55 
        variant: 'overline'
56 
      }}
57 
      sx={{
58 
        '& .MuiCardHeader-action ': { marginRight: 0 },
59 
        padding: 1,
60 
        ...styles
61 
      }}
62 
      {...props}
63 
    />
64 
  );
65 
}
66 
 
67 
export function WidgetBody({ children, styles = {}, ...props }) {
68 
  return (
69 
    <CardContent
70 
      sx={{
71 
        padding: 1,
72 
        '&:last-child': { paddingBottom: 1 },
73 
        '.MuiCardHeader-root + &': { paddingTop: 0 },
74 
        ...styles
75 
      }}
76 
      {...props}
77 
    >
78 
      {children}
79 
    </CardContent>
80 
  );
81 
}
82 
 
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 
 
100 
export function WidgetActions({ children, styles = {}, ...props }) {
101 
  return (
102 
    <CardActions
103 
      sx={{
104 
        padding: 0.5,
105 
        justifyContent: 'space-around',
106 
        gap: { xs: 0, md: 0.5 },
107 
        '& > button': {
108 
          flex: 1,
109 
          flexWrap: 'wrap'
110 
        },
111 
        borderTop: `1px solid ${colors.border.primary}`,
112 
        ...styles
113 
      }}
114 
      disableSpacing
115 
      {...props}
116 
    >
117 
      {children}
118 
    </CardActions>
119 
  );
120 
}
121 
 
122 
const getMediaComponent = (type) => {
123 
  const options = {
124 
    image: 'img',
125 
    video: 'video',
126 
    audio: 'audio'
127 
  };
128 
 
129 
  return options[type] ?? options.image;
130 
};
131 
 
132 
export function WidgetMedia({
133 
  src = '',
134 
  height,
135 
  width,
136 
  alt = '',
137 
  type = 'image',
138 
  styles = {},
139 
  ...props
140 
}) {
141 
  return (
142 
    <CardMedia
143 
      alt={alt}
144 
      component={getMediaComponent(type)}
145 
      height={height}
146 
      image={src}
147 
      width={width}
148 
      sx={{
149 
        objectFit: 'contain',
150 
        ...styles
151 
      }}
152 
      {...props}
153 
    />
154 
  );
155 
}
156 
 
157 
Widget.Header = WidgetHeader;
158 
Widget.Body = WidgetBody;
159 
Widget.Footer = WidgetFooter;
160 
Widget.Actions = WidgetActions;
161 
Widget.Media = WidgetMedia;
162 
 
163 
export default Widget;