Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 645 Rev 656
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";
 5 
import { Link } from 'react-router-dom'
Línea 6... Línea 6...
6 
 
 6 
 
7 
const LayoutContainer = styled.div`
 7 
const LayoutContainer = styled.div`
8 
  background-color: var(--bg-color);
 8 
  background-color: var(--bg-color);
9 
  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 26... Línea 26...
26 
    font-size: 1rem;
 26 
    font-size: 1rem;
27 
  }
 27 
  }
28 
  @media ${device.tablet} {
 28 
  @media ${device.tablet} {
29 
    border-radius: var(--border-radius);
 29 
    border-radius: var(--border-radius);
30 
  }
 30 
  }
31 
`;
 31 
`
Línea 32... Línea 32...
32 
 
 32 
 
33 
const LayoutHeader = styled.div`
 33 
const LayoutHeader = styled.div`
34 
  display: flex;
 34 
  display: flex;
35 
  gap: 0.5rem;
 35 
  gap: 0.5rem;
36 
  padding: 10px 1rem;
 36 
  padding: 10px 1rem;
37 
  align-items: center;
 37 
  align-items: center;
38 
  justify-content: space-between;
 38 
  justify-content: space-between;
39 
  position: relative;
 39 
  position: relative;
Línea 40... Línea 40...
40 
`;
 40 
`
41 
 
 41 
 
42 
const LayoutBody = styled.div`
 42 
const LayoutBody = styled.div`
43 
  padding: 10px 1rem;
 43 
  padding: 10px 1rem;
44 
  display: flex;
 44 
  display: flex;
Línea 45... Línea 45...
45 
  flex-direction: column;
 45 
  flex-direction: column;
46 
`;
 46 
`
47 
 
 47 
 
48 
const HeaderInfo = styled.div`
 48 
const HeaderInfo = styled.div`
49 
  align-items: center;
 49 
  align-items: center;
50 
  display: inline-flex;
 50 
  display: inline-flex;
Línea 51... Línea 51...
51 
  gap: 0.5rem;
 51 
  gap: 0.5rem;
52 
  width: fit-content;
 52 
  width: fit-content;
53 
`;
 53 
`
54 
 
 54 
 
55 
const LayoutActions = styled.div`
 55 
const LayoutActions = styled.div`
56 
  display: flex;
 56 
  display: flex;
- 
 
 57 
  justify-content: space-around;
57 
  justify-content: space-around;
 58 
  border-top: 1px solid rgb(211, 211, 211);
58 
  border-top: 1px solid rgb(211, 211, 211);
 59 
  padding: 5px;
59 
  padding: 5px;
 60 
  & > button,
60 
  & > button {
 61 
  & > a {
61 
    align-items: center;
 62 
    align-items: center;
Línea 73... Línea 74...
73 
      flex-direction: row;
 74 
      flex-direction: row;
74 
      gap: 0.5rem;
 75 
      gap: 0.5rem;
75 
      font-size: 1rem;
 76 
      font-size: 1rem;
76 
    }
 77 
    }
77 
  }
 78 
  }
78 
`;
 79 
`
Línea 79... Línea 80...
79 
 
 80 
 
80 
const StyledContainer = ({ children, ...rest }) => {
 81 
const StyledContainer = ({ children, ...rest }) => {
81 
  return <LayoutContainer {...rest}>{children}</LayoutContainer>;
 82 
  return <LayoutContainer {...rest}>{children}</LayoutContainer>
Línea 82... Línea 83...
82 
};
 83 
}
83 
 
 84 
 
84 
const Actions = ({ children, ...rest }) => {
 85 
const Actions = ({ children, ...rest }) => {
Línea 85... Línea 86...
85 
  return <LayoutActions {...rest}>{children}</LayoutActions>;
 86 
  return <LayoutActions {...rest}>{children}</LayoutActions>
86 
};
 87 
}
87 
 
 88 
 
Línea 88... Línea 89...
88 
const Body = ({ children, ...rest }) => {
 89 
const Body = ({ children, ...rest }) => {
89 
  return <LayoutBody {...rest}>{children}</LayoutBody>;
 90 
  return <LayoutBody {...rest}>{children}</LayoutBody>
90 
};
 91 
}
91 
 
 92 
 
92 
const Header = ({ image = "", title = "", url = "", children, ...rest }) => {
 93 
const Header = ({ image = '', title = '', url = '', children, ...rest }) => {
93 
  return (
 94 
  return (
94 
    <LayoutHeader {...rest}>
 95 
    <LayoutHeader {...rest}>
95 
      <HeaderInfo>
 96 
      <HeaderInfo>
96 
        {image && (
 97 
        {image && (
97 
          <Avatar
 98 
          <Avatar
98 
            src={image}
 99 
            src={image}
99 
            alt={`${title} profile image`}
 100 
            alt={`${title} profile image`}
100 
            sx={{ width: "50px", height: "50px" }}
 101 
            sx={{ width: '50px', height: '50px' }}
101 
          />
 102 
          />
Línea 108... Línea 109...
108 
          <h2>{title}</h2>
 109 
          <h2>{title}</h2>
109 
        )}
 110 
        )}
110 
      </HeaderInfo>
 111 
      </HeaderInfo>
111 
      {children}
 112 
      {children}
112 
    </LayoutHeader>
 113 
    </LayoutHeader>
113 
  );
 114 
  )
114 
};
 115 
}
Línea 115... Línea 116...
115 
 
 116 
 
116 
StyledContainer.Actions = Actions;
 117 
StyledContainer.Actions = Actions
117 
StyledContainer.Header = Header;
 118 
StyledContainer.Header = Header
Línea 118... Línea 119...
118 
StyledContainer.Body = Body;
 119 
StyledContainer.Body = Body