Proyectos de Subversion LeadersLinked - SPA

Rev

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