Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2639 | | 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 { useNavigate } from 'react-router-dom';
3 
import { Avatar, Box, Card, styled } from '@mui/material';
4 
 
5 
export const WidgetWrapper = styled(Card)(({ theme }) => ({
6 
  boxShadow: theme.shadows[1], // 0px 0px 0px 1px rgba(0, 0, 0, 0.08);
7 
  height: 'fit-content',
8 
  width: '100%',
9 
  boxSizing: 'border-box',
10 
  overflow: 'hidden',
11 
  position: 'relative',
12 
  span: {
13 
    fontSize: '0.9rem'
14 
  },
15 
  p: {
16 
    color: 'var(--font-color)',
17 
    fontSize: '14px',
18 
    textAlign: 'justify',
19 
    marginBottom: '0.5rem'
20 
  },
21 
  h2: {
22 
    fontSize: '1rem'
23 
  },
24 
  [theme.breakpoints.up('sm')]: {
25 
    borderRadius: theme.shape.borderRadius
26 
  }
27 
}));
28 
 
29 
WidgetWrapper.Body = styled(Box)({
30 
  padding: '10px 1rem',
31 
  display: 'flex',
32 
  flexDirection: 'column'
33 
});
34 
 
35 
WidgetWrapper.Actions = styled(Box)(({ theme }) => ({
36 
  display: 'flex',
37 
  justifyContent: 'space-around',
38 
  borderTop: '1px solid rgb(211, 211, 211)',
39 
  padding: '5px',
40 
  gap: '0.5rem',
41 
  '> button, > a': {
42 
    alignItems: 'center',
43 
    borderRadius: 'var(--border-radius)',
44 
    cursor: 'pointer',
45 
    display: 'inline-flex',
46 
    flexDirection: 'column',
47 
    fontSize: '0.9rem',
48 
    padding: '5px',
49 
    position: 'relative',
50 
    '&:hover': {
51 
      backgroundColor: 'whitesmoke'
52 
    }
53 
  },
54 
  [theme.breakpoints.up('sm')]: {
55 
    flexDirection: 'row',
56 
    gap: '0.5rem',
57 
    fontSize: '1rem'
58 
  }
59 
}));
60 
 
61 
const LayoutHeader = styled(Box)`
62 
  display: flex;
63 
  gap: 0.5rem;
64 
  padding: 10px 1rem;
65 
  align-items: center;
66 
  justify-content: space-between;
67 
  position: relative;
68 
`;
69 
 
70 
const HeaderInfo = styled(Box)`
71 
  align-items: center;
72 
  display: inline-flex;
73 
  gap: 0.5rem;
74 
  width: fit-content;
75 
`;
76 
 
77 
const HeaderContent = styled(Box)`
78 
  display: flex;
79 
  flex-direction: column;
80 
`;
81 
 
82 
const Header = ({ image = '', title = '', url = '', timeElapsed = '', children, ...rest }) => {
83 
  const navigate = useNavigate();
84 
 
85 
  const goToProfile = () => {
86 
    if (!url) return;
87 
    navigate(url);
88 
  };
89 
 
90 
  return (
91 
    <LayoutHeader {...rest}>
92 
      <HeaderInfo>
93 
        {image && (
94 
          <Avatar
95 
            src={image}
96 
            alt={`${title} profile image`}
97 
            sx={{ width: '50px', height: '50px' }}
98 
          />
99 
        )}
100 
        <HeaderContent>
101 
          <h2 onClick={goToProfile}>{title}</h2>
102 
 
103 
          {timeElapsed && <span>{timeElapsed}</span>}
104 
        </HeaderContent>
105 
      </HeaderInfo>
106 
      {children}
107 
    </LayoutHeader>
108 
  );
109 
};
110 
 
111 
WidgetWrapper.Header = Header;
112 
 
113 
export default WidgetWrapper;