Proyectos de Subversion LeadersLinked - SPA

Rev

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

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