:feature: add pld pages feature

2022-05-16 08:26:09 -03:00 · 2022-05-16 08:26:09 -03:00 · 875d9e45ab
commit 875d9e45ab
parent dc6b9bbe67
11 changed files with 1805 additions and 144 deletions
--- a/package.json
+++ b/package.json
@ -17,20 +17,26 @@
    ]
  },
  "dependencies": {
+    "@date-io/date-fns": "^2.14.0",
    "@emotion/react": "^11.9.0",
    "@emotion/styled": "^11.8.1",
    "@material-ui/core": "^4.12.4",
    "@material-ui/icons": "^4.11.3",
    "@mui/material": "^5.6.4",
+    "@mui/x-data-grid": "^5.11.0",
+    "@mui/x-date-pickers": "^5.0.0-alpha.3",
    "@typescript-eslint/eslint-plugin": "^5.22.0",
    "@typescript-eslint/parser": "^5.22.0",
    "chart.js": "^3.7.1",
    "eslint-plugin-react": "^7.29.4",
    "eslit": "^6.0.0",
    "faker": "5.5.3",
+    "install": "^0.13.0",
    "next": "12.1.6",
+    "npm": "^8.10.0",
    "nprogress": "^0.2.0",
    "react": "18.1.0",
+    "react-calendar": "^3.7.0",
    "react-chartjs-2": "^4.1.0",
    "react-dom": "18.1.0",
    "react-icons": "^4.3.1",
--- a/src/components/mapCard/MapCard.tsx
+++ b/src/components/mapCard/MapCard.tsx
@ -1,6 +1,7 @@
 import React from 'react'
 import Image from 'next/image'
 import { MapCardView } from './MapCardView'
+import Link from 'next/link'

 interface MapCardInterface {
  title: string,
@ -10,10 +11,12 @@ interface MapCardInterface {
 }

 export default function MapCard({ title, subtitle, statistic, imgSource }: MapCardInterface) {
+  const route = title==='R$/MWh'? '/consumption': `pld/${title.slice(0,2).toLocaleLowerCase()}-${title.slice(3,5).toLocaleLowerCase()}`

  return (
+    <Link href={route} >
      <MapCardView>
-      <Image src={imgSource} width={110} height={110} />
+        <Image src={imgSource} width={110} height={110}/>
        <div>
          <h4>{title}</h4>
          <span>{subtitle}</span>
@ -30,5 +33,6 @@ export default function MapCard({ title, subtitle, statistic, imgSource }: MapCa
          </article>
        </div>
      </MapCardView>
+    </Link>
  )
 }
--- a/src/components/mapCard/MapCardView.ts
+++ b/src/components/mapCard/MapCardView.ts
@ -9,6 +9,8 @@ export const MapCardView = styled.figure`

  margin-right: 25px;

+  cursor: pointer;
+
  * {
    margin: 0;
    padding: 0;
--- a/src/components/sidebar/Sidebar.tsx
+++ b/src/components/sidebar/Sidebar.tsx
@ -26,8 +26,6 @@ export default function Sidebar() {
      </div>
      <ul>
        <Link href='/dashboard'><li className={router.pathname=='/dashboard'? 'actualPath' : null} ><Image src='/assets/sidebar/dashboardIcon.svg' width={25} height={25} />{'Visão Geral'}</li></Link>
-        <Link href='/consumption'><li className={router.pathname=='/consumption'? 'actualPath' : null} ><Image src='/assets/sidebar/consumptionIcon.svg' width={25} height={25} />{'Consumo'}</li></Link>
-        <Link href='/resumoOperacao'><li className={router.pathname=='/resumoOperacao'? 'actualPath' : null} ><Image src='/assets/sidebar/summaryOperationsIcon.svg' width={25} height={25} />{'Resumo de Op. '}</li></Link>
        <li onClick={() => setEconomiaDrawer(!economiaDrawer)} className={router.pathname=='/grossSavings' || router.pathname=='/accumulatedSavings' || router.pathname=='/estimatedCost' || router.pathname=='/costIndicator' ? 'actualPath' : null } ><Image src='/assets/sidebar/economyIcon.svg' width={25} height={25} />{'Economia'}</li>
          <div className='economiaDrawer drawer' >
          <Link href='/grossSavings'><li>Economia Bruta</li></Link>
@ -35,12 +33,14 @@ export default function Sidebar() {
          <Link href='/estimatedCost'><li>Custo Estimado</li></Link>
          <Link href='/costIndicator'><li>Custo R/MWh</li></Link>
          </div>
+        <Link href='/telemetria'><li className={router.pathname=='/telemetry'? 'actualPath' : null}><Image src='/assets/sidebar/telemetryIcon.svg' width={25} height={25} />{'Telemetria >'}</li></Link>
+        <Link href='/resumoOperacao'><li className={router.pathname=='/resumoOperacao'? 'actualPath' : null} ><Image src='/assets/sidebar/summaryOperationsIcon.svg' width={25} height={25} />{'Resumo de Op. '}</li></Link>
        <Link href='/news'><li className={router.pathname=='/news'? 'actualPath' : null}><Image src='/assets/sidebar/newsIcon.svg' width={25} height={25} />{'Notícias >'}</li></Link>
        <Link href='#'><li className={router.pathname=='/sectorialInfo'? 'actualPath' : null}><Image src='/assets/sidebar/sectorialInfoIcon.svg' width={25} height={25} />{'Info Setorial >'}</li></Link>
-        <Link href='/faq'><li className={router.pathname=='/faq'? 'actualPath' : null}><Image src='/assets/sidebar/saqIcon.svg' width={25} height={25} />{'FAQ >'}</li></Link>
-        <Link href='/aboutUs'><li className={router.pathname=='/aboutUs'? 'actualPath' : null}><Image src='/assets/sidebar/dashboardIcon.svg' width={25} height={25} />{'Sobre Nós >'}</li></Link>
+        <Link href='/consumption'><li className={router.pathname=='/consumption'? 'actualPath' : null} ><Image src='/assets/sidebar/consumptionIcon.svg' width={25} height={25} />{'Consumo'}</li></Link>
        <Link href='#'><li className={router.pathname=='/notification'? 'actualPath' : null}><Image src='/assets/sidebar/notificationsIcon.svg' width={25} height={25} />{'Notificação >'}</li></Link>
-        <Link href='/telemetria'><li className={router.pathname=='/telemetry'? 'actualPath' : null}><Image src='/assets/sidebar/telemetryIcon.svg' width={25} height={25} />{'Telemetria >'}</li></Link>
+        <Link href='/aboutUs'><li className={router.pathname=='/aboutUs'? 'actualPath' : null}><Image src='/assets/sidebar/dashboardIcon.svg' width={25} height={25} />{'Sobre Nós >'}</li></Link>
+        <Link href='/faq'><li className={router.pathname=='/faq'? 'actualPath' : null}><Image src='/assets/sidebar/saqIcon.svg' width={25} height={25} />{'FAQ >'}</li></Link>
      </ul>
      <aside>
        <p>Nossos Gerentes estão prontos para atendê-los</p>
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@ -2,35 +2,37 @@ import React from 'react'

 import { ServerStyleSheet } from 'styled-components';

-import Document, { Html, Head, Main, NextScript } from 'next/document'
+import Document, { DocumentContext, DocumentInitialProps, Html, Head, Main, NextScript } from 'next/document'

 export default class MyDocument extends Document {
-  static async GetInitialProps(ctx) {
-    const sheet = new ServerStyleSheet();
-    const originalRenderPage = ctx.renderPage;
+  static async getInitialProps(
+    ctx: DocumentContext
+  ): Promise<DocumentInitialProps> {
+    const sheet = new ServerStyleSheet()
+    const originalRenderPage = ctx.renderPage

    try {
      ctx.renderPage = () =>
        originalRenderPage({
-        enhanceApp: App => props => sheet.collectStyles(<App {...props} />)
-      });
+          enhanceApp: (App) => (props) =>
+            sheet.collectStyles(<App {...props} />),
+        })

-      const initialProps = await Document.getInitialProps(ctx);
+      const initialProps = await Document.getInitialProps(ctx)
      return {
        ...initialProps,
-      styles: (
+        styles: [
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
-        </>
-      )
-      };
+          </>,
+        ],
+      }
    } finally {
-        sheet.seal();
+      sheet.seal()
    }
  }

-
    render() {
      return (
        <Html>
@ -43,6 +45,11 @@ export default class MyDocument extends Document {

            <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"/>
            <link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400&family=Lobster&family=Poppins:ital,wght@0,500;0,600;0,800;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet" />
+
+            <link rel="preconnect" href="https://fonts.googleapis.com"/>
+            <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin='true' />
+            <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"/>
+
          </Head>
          <body>
            <Main />
--- a/src/pages/pld/[region].tsx
+++ b/src/pages/pld/[region].tsx
@ -0,0 +1,229 @@
+import React, { useEffect, useState } from 'react'
+import Image from 'next/Image'
+import { useRouter } from 'next/router'
+
+import Header from '../../components/header/Header'
+import MenuItem from '@mui/material/MenuItem';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+
+import { PldGraphView, PldTableView } from '../../styles/layouts/pld/PldView'
+
+import RenderIf from '../../utils/renderIf'
+import BasicButton from '../../components/buttons/basicButton/BasicButton';
+import Chart from '../../components/graph/Chart';
+
+export default function region() {
+  const router = useRouter()
+  const { region } = router.query
+
+  const [page, setPage] = useState<number>(1)
+  const [age, setAge] = React.useState('');
+
+  const handleChange = (event: SelectChangeEvent) => {
+    setAge(event.target.value);
+  };
+
+  useEffect(() => {
+    console.log(page)
+  }, [page])
+
+  return (
+    <main style={{
+      width: '100%',
+    }}>
+      <Header name='' />
+      <RenderIf isTrue={page===1? true : false}>
+        <PldTableView>
+          <section className='images' >
+            <Image src='/assets/logo.svg' width={150} height={150} />
+            <Image src='/assets/logo.svg' width={150} height={150} />
+          </section>
+          <table className="tg">
+            <thead>
+              <tr>
+                <th className='tg-8oo6'>Mês</th>
+                <th className='tg-8oo6'>Nordeste</th>
+                <th className='tg-8oo6'>Norte</th>
+                <th className='tg-8oo6'>Sudeste</th>
+                <th className='tg-8oo6'>Sul</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td className='tg-gceh'>Unidade - 9500130</td>
+                <td className='tg-uulg'>Compra</td>
+                <td className='tg-gceh'>122,269</td>
+                <td className='tg-gceh'>COPEL COM I5</td>
+                <td className='tg-uulg'>234,67</td>
+              </tr>
+              <tr>
+                <td className='tg-hq65'>Unidade - 9500130</td>
+                <td className='tg-0tzy'>Compra</td>
+                <td className='tg-hq65'>110,348</td>
+                <td className='tg-hq65'>EMEWE I5</td>
+                <td className='tg-0tzy'>190,16</td>
+              </tr>
+              <tr>
+                <td className="tg-gceh">Unidade - 9500130</td>
+                <td className="tg-uulg">Compra</td>
+                <td className="tg-gceh">13,074</td>
+                <td className="tg-gceh">PACTO COMERCIALIZADORA I5</td>
+                <td className="tg-gceh">300,36</td>
+              </tr>
+              <tr>
+                <td className='tg-hq65'>Unidade - 9500130</td>
+                <td className='tg-0tzy'>Compra</td>
+                <td className='tg-hq65'>133,117</td>
+                <td className='tg-hq65'>COPEL COM I5</td>
+                <td className='tg-0tzy'>300,36</td>
+              </tr>
+              <tr>
+                <td className='tg-gceh'>Unidade - 9500130</td>
+                <td className='tg-uulg'>Compra</td>
+                <td className='tg-gceh'>120,138</td>
+                <td className='tg-gceh'>EMEWE I5</td>
+                <td className='tg-uulg'>234,67</td>
+              </tr>
+              <tr>
+                <td className='tg-hq65'>Unidade - 9500130</td>
+                <td className='tg-0tzy'>Compra</td>
+                <td className='tg-hq65'>14,897</td>
+                <td className='tg-hq65'>PACTO COMERCIALIZADORA I5</td>
+                <td className='tg-0tzy'>300,36</td>
+              </tr>
+              <tr>
+                <td className='tg-gceh'>Unidade - 9500130</td>
+                <td className='tg-uulg'>Compra</td>
+                <td className='tg-gceh'>120,138</td>
+                <td className='tg-gceh'>EMEWE I5</td>
+                <td className='tg-uulg'>234,67</td>
+              </tr>
+              <tr>
+                <td className='tg-hq65'>Unidade - 9500130</td>
+                <td className='tg-0tzy'>Compra</td>
+                <td className='tg-hq65'>14,897</td>
+                <td className='tg-hq65'>PACTO COMERCIALIZADORA I5</td>
+                <td className='tg-0tzy'>300,36</td>
+              </tr>
+              <tr>
+                <td className='tg-gceh'>Unidade - 9500130</td>
+                <td className='tg-uulg'>Compra</td>
+                <td className='tg-gceh'>120,138</td>
+                <td className='tg-gceh'>EMEWE I5</td>
+                <td className='tg-uulg'>234,67</td>
+              </tr>
+              <tr>
+                <td className='tg-hq65'>Unidade - 9500130</td>
+                <td className='tg-0tzy'>Compra</td>
+                <td className='tg-hq65'>14,897</td>
+                <td className='tg-hq65'>PACTO COMERCIALIZADORA I5</td>
+                <td className='tg-0tzy'>300,36</td>
+              </tr>
+              <tr>
+                <td className='tg-gceh'>Unidade - 9500130</td>
+                <td className='tg-uulg'>Compra</td>
+                <td className='tg-gceh'>120,138</td>
+                <td className='tg-gceh'>EMEWE I5</td>
+                <td className='tg-uulg'>234,67</td>
+              </tr>
+              <tr>
+                <td className='tg-hq65'>Unidade - 9500130</td>
+                <td className='tg-0tzy'>Compra</td>
+                <td className='tg-hq65'>14,897</td>
+                <td className='tg-hq65'>PACTO COMERCIALIZADORA I5</td>
+                <td className='tg-0tzy'>300,36</td>
+              </tr>
+              <tr>
+                <td className='tg-gceh'>Unidade - 9500130</td>
+                <td className='tg-uulg'>Compra</td>
+                <td className='tg-gceh'>120,138</td>
+                <td className='tg-gceh'>EMEWE I5</td>
+                <td className='tg-uulg'>234,67</td>
+              </tr>
+              <tr>
+                <td className='tg-hq65'>Unidade - 9500130</td>
+                <td className='tg-0tzy'>Compra</td>
+                <td className='tg-hq65'>14,897</td>
+                <td className='tg-hq65'>PACTO COMERCIALIZADORA I5</td>
+                <td className='tg-0tzy'>300,36</td>
+              </tr>
+              <tr>
+                <td className='tg-gceh'>Unidade - 9500130</td>
+                <td className='tg-uulg'>Compra</td>
+                <td className='tg-gceh'>120,138</td>
+                <td className='tg-gceh'>EMEWE I5</td>
+                <td className='tg-uulg'>234,67</td>
+              </tr>
+              <tr>
+                <td className='tg-hq65'>Unidade - 9500130</td>
+                <td className='tg-0tzy'>Compra</td>
+                <td className='tg-hq65'>14,897</td>
+                <td className='tg-hq65'>PACTO COMERCIALIZADORA I5</td>
+                <td className='tg-0tzy'>300,36</td>
+              </tr>
+            </tbody>
+          </table>
+
+          <section>
+            <article>
+              <p>Valores Diarios: </p>
+              <p>R$100,00</p>
+            </article>
+            <article>
+              <p>Valores Horários: </p>
+              <p>R$100,00</p>
+            </article>
+          </section>
+        </PldTableView>
+      </RenderIf>
+
+      <RenderIf isTrue={page===2? true : false}>
+        <PldGraphView>
+          <section className='images' >
+            <Image src='/assets/logo.svg' width={150} height={150} />
+            <Image src='/assets/logo.svg' width={150} height={150} />
+          </section>
+          <section className='toolsbar'>
+            <div className='select'>
+              <Select
+                value={age}
+                onChange={handleChange}
+                displayEmpty
+                sx={{
+                  width: '100%'
+                }}
+              >
+                <MenuItem value={0}>Filial 3</MenuItem>
+                <MenuItem value={10}>Filial 3</MenuItem>
+                <MenuItem value={20}>Twenty</MenuItem>
+                <MenuItem value={30}>Thirty</MenuItem>
+              </Select>
+            </div>
+            <input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09"/>
+            <BasicButton title='Download (csv)' />
+          </section>
+          <Chart title='' />
+        </PldGraphView>
+      </RenderIf>
+
+      <RenderIf isTrue={page===3? true : false}>
+        <PldGraphView>
+          <section className='images' >
+            <Image src='/assets/logo.svg' width={150} height={150} />
+            <Image src='/assets/logo.svg' width={150} height={150} />
+          </section>
+          <section className='toolsbar'>
+            <input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09"/>
+            <BasicButton title='Download (csv)' />
+          </section>
+          <Chart title='' />
+        </PldGraphView>
+      </RenderIf>
+
+      <footer>
+        <label onClick={() => page>1? setPage(page-1) : null} >voltar {page} </label>
+        <label onClick={() => page<3? setPage(page+1) : null} >avançar</label>
+      </footer>
+    </main>
+  )
+}
--- a/src/styles/layouts/ResumoOperacao/ResumoOperacaoView.ts
+++ b/src/styles/layouts/ResumoOperacao/ResumoOperacaoView.ts
@ -11,15 +11,15 @@ export const TableView = styled.div`
  height: 100%;


-.tg{
+  .tg{
    border-collapse:collapse;
    border-spacing:0;
    font-family:Poppins;
    width: 100%;

-}
+  }

-.tg td{
+  .tg td{
    border-color:#DDDFE1;
    border-style:solid;
    border-width:1px;
@ -28,10 +28,10 @@ export const TableView = styled.div`
    overflow:hidden;
    padding:17px 30px;
    word-break:normal;
-}
+  }


-.tg th{
+  .tg th{
    border-color:#DDDFE1;
    border-style:solid;
    border-width:1px;
@ -41,40 +41,40 @@ export const TableView = styled.div`
    overflow:hidden;
    padding:10px 5px;
    word-break:normal;
-}
-.tg .tg-8oo6{
+  }
+  .tg .tg-8oo6{
    color:#464a53;
    font-size:13px;
    text-align:center;
    vertical-align:top;
    padding: 10px 18px;
    text-align: center;
-}
-.tg .tg-uulg{
+  }
+  .tg .tg-uulg{
    background-color:#efefef;
    color:#abafb3;
    font-size:14px;
    text-align:center;
    vertical-align:top
-}
-.tg .tg-gceh{
+  }
+  .tg .tg-gceh{
    background-color:#efefef;
    color:#6a707e;
    font-size:14px;
    text-align:center;
    vertical-align:top
-}
-.tg .tg-0tzy{
+  }
+  .tg .tg-0tzy{
    color:#abafb3;
    font-size:14px;
    text-align:center;
    vertical-align:top
-}
-.tg .tg-hq65{color:#6a707e;
+  }
+  .tg .tg-hq65{color:#6a707e;
    font-size:14px;
    text-align:center;
    vertical-align:top
-}
+  }

  .tg .tg-baqh{
    text-align:center;
@ -97,10 +97,6 @@ export const TableView = styled.div`

    color: #254F7F;
  }
-
-    .pagination{
-
-    }
 `;

 export const Pagination = styled.div`
--- a/src/styles/layouts/dashboard/DashboardView.ts
+++ b/src/styles/layouts/dashboard/DashboardView.ts
@ -18,13 +18,15 @@ export const DashboardView = styled.main`

    flex-wrap: wrap;

-    box-shadow: 0px 0px 15px -3px rgba(0,0,0,0.1);
-    border-radius: 10px;
-
    width: 100%;
    height: fit-content;

    margin: 2rem 0 2rem 0;
+
+    background-color: #fff;
+
+    box-shadow: 0px 0px 15px -3px rgba(0,0,0,0.1);
+    border-radius: 10px;
  }

  .dashboard {
--- a/src/styles/layouts/pld/PldView.ts
+++ b/src/styles/layouts/pld/PldView.ts
@ -0,0 +1,184 @@
+import styled from "styled-components"
+
+export const PldTableView = styled.main`
+  width: 100%;
+
+  .tg{
+    border-collapse:collapse;
+    border-spacing:0;
+    font-family:Poppins;
+    width: 100%;
+
+  }
+
+  .tg td{
+    border-color:#DDDFE1;
+    border-style:solid;
+    border-width:1px;
+    font-family:Poppins;
+    font-size: 10px;
+    overflow:hidden;
+    padding:17px 30px;
+    word-break:normal;
+  }
+
+
+  .tg th{
+    border-color:#DDDFE1;
+    border-style:solid;
+    border-width:1px;
+    font-family:Poppins;
+    font-size:10px;
+    font-weight:500;
+    overflow:hidden;
+    padding:10px 5px;
+    word-break:normal;
+  }
+  .tg .tg-8oo6{
+    color:#464a53;
+    font-size:13px;
+    text-align:center;
+    vertical-align:top;
+    padding: 10px 18px;
+    text-align: center;
+  }
+  .tg .tg-uulg{
+    background-color:#efefef;
+    color:#abafb3;
+    font-size:14px;
+    text-align:center;
+    vertical-align:top
+  }
+  .tg .tg-gceh{
+    background-color:#efefef;
+    color:#6a707e;
+    font-size:14px;
+    text-align:center;
+    vertical-align:top
+  }
+  .tg .tg-0tzy{
+    color:#abafb3;
+    font-size:14px;
+    text-align:center;
+    vertical-align:top
+  }
+  .tg .tg-hq65{color:#6a707e;
+    font-size:14px;
+    text-align:center;
+    vertical-align:top
+  }
+
+  .tg .tg-baqh{
+    text-align:center;
+    vertical-align:top
+  }
+  .tg .tg-0lax{
+    text-align:left;
+    vertical-align:top
+  }
+  .tg .tg-womg{
+    background-color:#dddfe1;
+    text-align:center;
+    vertical-align:top
+  }
+
+  h3{
+    font-weight: 600;
+    font-size: 22px;
+    line-height: 54px;
+
+    color: #254F7F;
+  }
+
+  .images {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+
+    margin: 40px;
+  }
+
+  section {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    article {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      width: 40%;
+      height: 8rem;
+
+      margin: 40px;
+
+      border-radius: 20px;
+      box-shadow: 0 0 11px rgba(0, 0, 0, 0.2)  ;
+      -webkit-box-shadow: 0 0 11px rgba(0, 0, 0, 0.2)  ;
+      -moz-box-shadow: 0 0 11px rgba(0, 0, 0, 0.2)  ;
+      background: #F8F8F8;
+    }
+  }
+
+  footer {
+    label {
+      cursor: pointer;
+      margin: 20px;
+    }
+  }
+`
+
+export const PldGraphView = styled.main`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  flex-direction: column;
+  flex-wrap: wrap;
+
+  width: 100%;
+
+  .select {
+    width: 20rem;
+  }
+
+  input {
+    width: 20rem;
+    height: 3.5rem;
+
+    padding: 14px;
+
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    font-weight: 400;
+
+    border-radius: 6px;
+    border: solid gray 1px;
+
+    background-color: #F9F9F9;
+  }
+
+  section {
+    display: flex;
+    align-items: center;
+
+    flex-wrap: wrap;
+
+    :first-child {
+      justify-content: space-around;
+    }
+    :nth-child(2) {
+      margin-top: 50px;
+      justify-content: space-evenly;
+    }
+
+    width: 100%;
+  }
+
+  footer {
+    label {
+      cursor: pointer;
+      margin: 20px;
+    }
+  }
+`
--- a/src/utils/renderIf.ts
+++ b/src/utils/renderIf.ts
@ -0,0 +1,3 @@
+export default function RenderIf({ children, isTrue }) {
+  return isTrue? children : null
+}
--- a/yarn.lock
+++ b/yarn.lock