Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev Autor Línea Nro. Línea
614 stevensc 1 
import React from "react";
2 
import styled from "styled-components";
3 
import { device } from "../../styles/MediaQueries";
4 
import { Avatar } from "@mui/material";
5 
import { Link } from "react-router-dom";
5 stevensc 6 
 
531 stevensc 7 
const LayoutContainer = styled.div`
530 stevensc 8 
  background-color: var(--bg-color);
9 
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08);
5 stevensc 10 
  height: fit-content;
530 stevensc 11 
  width: -moz-available;
12 
  width: -webkit-fill-available;
13 
  width: fill-available;
597 stevensc 14 
  overflow: hidden;
15 
  position: relative;
536 stevensc 16 
  span {
17 
    font-size: 0.9rem;
18 
  }
611 stevensc 19 
  p {
20 
    color: var(--font-color);
21 
    font-size: 14px;
22 
    text-align: justify;
617 stevensc 23 
    margin-bottom: 0.5rem;
611 stevensc 24 
  }
25 
  h2 {
26 
    font-size: 1rem;
27 
  }
530 stevensc 28 
  @media ${device.tablet} {
29 
    border-radius: var(--border-radius);
30 
  }
614 stevensc 31 
`;
5 stevensc 32 
 
532 stevensc 33 
const LayoutHeader = styled.div`
34 
  display: flex;
35 
  gap: 0.5rem;
616 stevensc 36 
  padding: 10px 1rem;
532 stevensc 37 
  align-items: center;
537 stevensc 38 
  justify-content: space-between;
532 stevensc 39 
  position: relative;
614 stevensc 40 
`;
532 stevensc 41 
 
535 stevensc 42 
const LayoutBody = styled.div`
616 stevensc 43 
  padding: 10px 1rem;
554 stevensc 44 
  display: flex;
45 
  flex-direction: column;
614 stevensc 46 
`;
535 stevensc 47 
 
534 stevensc 48 
const HeaderInfo = styled.div`
49 
  align-items: center;
50 
  display: inline-flex;
51 
  gap: 0.5rem;
52 
  width: fit-content;
614 stevensc 53 
`;
534 stevensc 54 
 
531 stevensc 55 
const LayoutActions = styled.div`
56 
  display: flex;
532 stevensc 57 
  justify-content: space-around;
531 stevensc 58 
  border-top: 1px solid rgb(211, 211, 211);
645 stevensc 59 
  padding: 5px;
531 stevensc 60 
  & > button {
61 
    align-items: center;
62 
    border-radius: var(--border-radius);
63 
    cursor: pointer;
64 
    display: inline-flex;
65 
    flex-direction: column;
66 
    font-size: 0.9rem;
67 
    padding: 5px;
68 
    position: relative;
69 
    &:hover {
70 
      background-color: whitesmoke;
71 
    }
72 
    @media ${device.tablet} {
73 
      flex-direction: row;
74 
      gap: 0.5rem;
75 
      font-size: 1rem;
76 
    }
77 
  }
614 stevensc 78 
`;
531 stevensc 79 
 
80 
const StyledContainer = ({ children, ...rest }) => {
614 stevensc 81 
  return <LayoutContainer {...rest}>{children}</LayoutContainer>;
82 
};
5 stevensc 83 
 
531 stevensc 84 
const Actions = ({ children, ...rest }) => {
614 stevensc 85 
  return <LayoutActions {...rest}>{children}</LayoutActions>;
86 
};
531 stevensc 87 
 
535 stevensc 88 
const Body = ({ children, ...rest }) => {
614 stevensc 89 
  return <LayoutBody {...rest}>{children}</LayoutBody>;
90 
};
535 stevensc 91 
 
614 stevensc 92 
const Header = ({ image = "", title = "", url = "", children, ...rest }) => {
534 stevensc 93 
  return (
94 
    <LayoutHeader {...rest}>
95 
      <HeaderInfo>
96 
        {image && (
97 
          <Avatar
98 
            src={image}
99 
            alt={`${title} profile image`}
614 stevensc 100 
            sx={{ width: "50px", height: "50px" }}
534 stevensc 101 
          />
102 
        )}
639 stevensc 103 
        {url ? (
614 stevensc 104 
          <Link to={url}>
105 
            <h2>{title}</h2>
106 
          </Link>
639 stevensc 107 
        ) : (
108 
          <h2>{title}</h2>
109 
        )}
534 stevensc 110 
      </HeaderInfo>
111 
      {children}
112 
    </LayoutHeader>
614 stevensc 113 
  );
114 
};
532 stevensc 115 
 
614 stevensc 116 
StyledContainer.Actions = Actions;
117 
StyledContainer.Header = Header;
118 
StyledContainer.Body = Body;
531 stevensc 119 
 
614 stevensc 120 
export default StyledContainer;