Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2614 | 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'
2639 stevensc 3 
import { Avatar, Box, Card, styled } from '@mui/material'
1161 stevensc 4 
 
2639 stevensc 5 
export const WidgetWrapper = styled(Card)(({ theme }) => ({
1508 stevensc 6 
  boxShadow: theme.shadows[1], // 0px 0px 0px 1px rgba(0, 0, 0, 0.08);
1507 stevensc 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')]: {
1509 stevensc 25 
    borderRadius: theme.shape.borderRadius
536 stevensc 26 
  }
1507 stevensc 27 
}))
5 stevensc 28 
 
1507 stevensc 29 
WidgetWrapper.Body = styled(Box)({
30 
  padding: '10px 1rem',
31 
  display: 'flex',
32 
  flexDirection: 'column'
33 
})
535 stevensc 34 
 
1507 stevensc 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'
531 stevensc 52 
    }
1507 stevensc 53 
  },
54 
  [theme.breakpoints.up('sm')]: {
55 
    flexDirection: 'row',
56 
    gap: '0.5rem',
57 
    fontSize: '1rem'
531 stevensc 58 
  }
1507 stevensc 59 
}))
531 stevensc 60 
 
1507 stevensc 61 
const LayoutHeader = styled(Box)`
1161 stevensc 62 
  display: flex;
63 
  gap: 0.5rem;
64 
  padding: 10px 1rem;
65 
  align-items: center;
66 
  justify-content: space-between;
67 
  position: relative;
68 
`
5 stevensc 69 
 
1507 stevensc 70 
const HeaderInfo = styled(Box)`
1161 stevensc 71 
  align-items: center;
72 
  display: inline-flex;
73 
  gap: 0.5rem;
74 
  width: fit-content;
75 
`
531 stevensc 76 
 
1507 stevensc 77 
const HeaderContent = styled(Box)`
1161 stevensc 78 
  display: flex;
79 
  flex-direction: column;
80 
`
535 stevensc 81 
 
714 stevensc 82 
const Header = ({
83 
  image = '',
84 
  title = '',
85 
  url = '',
86 
  timeElapsed = '',
87 
  children,
88 
  ...rest
89 
}) => {
2614 stevensc 90 
  const navigate = useNavigate()
1161 stevensc 91 
 
92 
  const goToProfile = () => {
93 
    if (!url) return
2614 stevensc 94 
    navigate(url)
1161 stevensc 95 
  }
96 
 
534 stevensc 97 
  return (
98 
    <LayoutHeader {...rest}>
99 
      <HeaderInfo>
100 
        {image && (
101 
          <Avatar
102 
            src={image}
103 
            alt={`${title} profile image`}
656 stevensc 104 
            sx={{ width: '50px', height: '50px' }}
534 stevensc 105 
          />
106 
        )}
714 stevensc 107 
        <HeaderContent>
1161 stevensc 108 
          <h2 onClick={goToProfile}>{title}</h2>
109 
 
714 stevensc 110 
          {timeElapsed && <span>{timeElapsed}</span>}
111 
        </HeaderContent>
534 stevensc 112 
      </HeaderInfo>
113 
      {children}
114 
    </LayoutHeader>
656 stevensc 115 
  )
116 
}
532 stevensc 117 
 
1507 stevensc 118 
WidgetWrapper.Header = Header
531 stevensc 119 
 
1507 stevensc 120 
export default WidgetWrapper