:feature: add pld pages feature

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",

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>
   )
 }

src/components/mapCard/MapCardView.ts

@@ -9,6 +9,8 @@ export const MapCardView = styled.figure`
 
   margin-right: 25px;
 
+  cursor: pointer;
+
   * {
     margin: 0;
     padding: 0;

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='/consumption'><li className={router.pathname=='/consumption'? 'actualPath' : null} ><Image src='/assets/sidebar/consumptionIcon.svg' width={25} height={25} />{'Consumo'}</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='#'><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>

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) {
+  static async getInitialProps(
-    const sheet = new ServerStyleSheet();
+    ctx: DocumentContext
-    const originalRenderPage = ctx.renderPage;
+  ): 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 />

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>
+  )
+}

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`

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 {

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;
+    }
+  }
+`

src/utils/renderIf.ts

@@ -0,0 +1,3 @@
+export default function RenderIf({ children, isTrue }) {
+  return isTrue? children : null
+}