ContentContainer ContentContainer.tsx

100% Statements 1/1

100% Branches 8/8

100% Functions 1/1

100% Lines 1/1

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49  
 
 
 
 
 
 
 
 
 
 
3x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import {
  DetailedHTMLProps,
  HTMLAttributes,
  PropsWithChildren,
  ReactElement,
} from "react";
 
interface ContentContainerProps {
  hasPageHeader?: boolean;
}
 
export default function ContentContainer({
  children,
  hasPageHeader,
}: PropsWithChildren<ContentContainerProps> &
  DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>): ReactElement {
  return (
    <main>
      {children}
      <div className="app-footer"></div>
      <style jsx>{`
      main {
          display: block;
          margin: ${hasPageHeader ? "0 auto 0 auto" : "60px auto"};
          padding: ${hasPageHeader ? "0" : "0px 20px 30px"};
          min-height: calc(100svh - 90px);
          width: 100%;
          background: #121212;
        }
        .app-footer {
          height: 1px;
        }
        @media (max-width: 1000px) {
          main {
            width: 100vw;
            margin: ${hasPageHeader ? "0 0 0 0" : "60px auto"};
          }
        }
        @media screen and (max-width: 768px) {
          main {
          padding: ${hasPageHeader ? "0" : "0px 0px 30px"};
          }
        }
      }
      `}</style>
    </main>
  );
}