Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 611 | Rev 616 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 611 Rev 614
Línea 1... Línea 1...
1 
import React from 'react'
 1 
import React from "react";
2 
import styled from 'styled-components'
 2 
import styled from "styled-components";
3 
import { device } from '../../styles/MediaQueries'
 3 
import { device } from "../../styles/MediaQueries";
4 
import { Avatar } from '@mui/material'
 4 
import { Avatar } from "@mui/material";
- 
 
 5 
import { Link } from "react-router-dom";
Línea 5... Línea 6...
5 
 
 6 
 
6 
const LayoutContainer = styled.div`
 7 
const LayoutContainer = styled.div`
7 
  background-color: var(--bg-color);
 8 
  background-color: var(--bg-color);
8 
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08);
 9 
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08);
Línea 25... Línea 26...
25 
    font-size: 1rem;
 26 
    font-size: 1rem;
26 
  }
 27 
  }
27 
  @media ${device.tablet} {
 28 
  @media ${device.tablet} {
28 
    border-radius: var(--border-radius);
 29 
    border-radius: var(--border-radius);
29 
  }
 30 
  }
30 
`
 31 
`;
Línea 31... Línea 32...
31 
 
 32 
 
32 
const LayoutHeader = styled.div`
 33 
const LayoutHeader = styled.div`
33 
  display: flex;
 34 
  display: flex;
34 
  gap: 0.5rem;
 35 
  gap: 0.5rem;
35 
  padding: 5px 1rem;
 36 
  padding: 5px 1rem;
36 
  align-items: center;
 37 
  align-items: center;
37 
  justify-content: space-between;
 38 
  justify-content: space-between;
38 
  position: relative;
 39 
  position: relative;
Línea 39... Línea 40...
39 
`
 40 
`;
40 
 
 41 
 
41 
const LayoutBody = styled.div`
 42 
const LayoutBody = styled.div`
42 
  padding: 5px 1rem;
 43 
  padding: 5px 1rem;
43 
  display: flex;
 44 
  display: flex;
Línea 44... Línea 45...
44 
  flex-direction: column;
 45 
  flex-direction: column;
45 
`
 46 
`;
46 
 
 47 
 
47 
const HeaderInfo = styled.div`
 48 
const HeaderInfo = styled.div`
48 
  align-items: center;
 49 
  align-items: center;
49 
  display: inline-flex;
 50 
  display: inline-flex;
Línea 50... Línea 51...
50 
  gap: 0.5rem;
 51 
  gap: 0.5rem;
51 
  width: fit-content;
 52 
  width: fit-content;
52 
`
 53 
`;
53 
 
 54 
 
Línea 72... Línea 73...
72 
      flex-direction: row;
 73 
      flex-direction: row;
73 
      gap: 0.5rem;
 74 
      gap: 0.5rem;
74 
      font-size: 1rem;
 75 
      font-size: 1rem;
75 
    }
 76 
    }
76 
  }
 77 
  }
77 
`
 78 
`;
Línea 78... Línea 79...
78 
 
 79 
 
79 
const StyledContainer = ({ children, ...rest }) => {
 80 
const StyledContainer = ({ children, ...rest }) => {
80 
  return <LayoutContainer {...rest}>{children}</LayoutContainer>
 81 
  return <LayoutContainer {...rest}>{children}</LayoutContainer>;
Línea 81... Línea 82...
81 
}
 82 
};
82 
 
 83 
 
83 
const Actions = ({ children, ...rest }) => {
 84 
const Actions = ({ children, ...rest }) => {
Línea 84... Línea 85...
84 
  return <LayoutActions {...rest}>{children}</LayoutActions>
 85 
  return <LayoutActions {...rest}>{children}</LayoutActions>;
85 
}
 86 
};
86 
 
 87 
 
Línea 87... Línea 88...
87 
const Body = ({ children, ...rest }) => {
 88 
const Body = ({ children, ...rest }) => {
88 
  return <LayoutBody {...rest}>{children}</LayoutBody>
 89 
  return <LayoutBody {...rest}>{children}</LayoutBody>;
89 
}
 90 
};
90 
 
 91 
 
91 
const Header = ({ image, title, children, ...rest }) => {
 92 
const Header = ({ image = "", title = "", url = "", children, ...rest }) => {
92 
  return (
 93 
  return (
93 
    <LayoutHeader {...rest}>
 94 
    <LayoutHeader {...rest}>
94 
      <HeaderInfo>
 95 
      <HeaderInfo>
95 
        {image && (
 96 
        {image && (
96 
          <Avatar
 97 
          <Avatar
97 
            src={image}
 98 
            src={image}
- 
 
 99 
            alt={`${title} profile image`}
- 
 
 100 
            sx={{ width: "50px", height: "50px" }}
98 
            alt={`${title} profile image`}
 101 
          />
- 
 
 102 
        )}
- 
 
 103 
        {title ? (
99 
            sx={{ width: '50px', height: '50px' }}
 104 
          <Link to={url}>
100 
          />
 105 
            <h2>{title}</h2>
101 
        )}
 106 
          </Link>
102 
        {title && <h2>{title}</h2>}
 107 
        ) : null}
103 
      </HeaderInfo>
 108 
      </HeaderInfo>
Línea 104... Línea 109...
104 
      {children}
 109 
      {children}
105 
    </LayoutHeader>
 110 
    </LayoutHeader>
106 
  )
 111 
  );
Línea 107... Línea 112...
107 
}
 112 
};