Merge branch 'feature/mapCard' into 'dev'

Feature/map card

See merge request kluppsoftware/smart-energia-web!5

src/components/button/loginButton/LoginButton.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { LoginButtonView } from './LoginButtonView'
+
+interface LoginButtonInterface {
+  title: string
+}
+
+export default function LoginButton({ title }: LoginButtonInterface) {
+  return (
+    <LoginButtonView>
+      {title}
+    </LoginButtonView>
+  )
+}

src/components/button/loginButton/LoginButtonView.ts

@@ -0,0 +1,19 @@
+import styled from 'styled-components'
+
+export const LoginButtonView = styled.button`
+  width: 80%;
+  height: 95px;
+
+  border-radius: 8px;
+  background: linear-gradient(88.75deg, #254F7F 0.18%, #888888 99.28);
+
+  font-family: 'Nunito Sans';
+  font-style: normal;
+  font-weight: 700;
+  font-size: 32px;
+  line-height: 44px;
+  text-align: center;
+  letter-spacing: 0.03em;
+
+  color: #FFFFFF;
+`

src/components/mapCard/MapCard.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import Image from 'next/image'
+import { MapCardView } from './style'
+
+interface MapCardInterface {
+  title: string,
+  subtitle: string,
+  statistic: string,
+  imgSource: string,
+}
+
+export default function MapCard({ title, subtitle, statistic, imgSource }: MapCardInterface) {
+
+  return (
+    <MapCardView>
+      <Image src={imgSource} width={125} height={125} />
+      <div>
+        <h4>{title}</h4>
+        <span>{subtitle}</span>
+        <article>
+          <Image src="/graphLineIcon.svg" width={20} height={20} />
+          <p>{statistic}</p>
+        </article>
+      </div>
+    </MapCardView>
+  )
+}

src/components/mapCard/style.ts

@@ -0,0 +1,27 @@
+import styled from 'styled-components'
+
+export const MapCardView = styled.figure`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  flex-direction: row;
+
+  margin-right: 25px;
+
+  span {
+      margin-bottom: 25px;
+    }
+
+  div {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    flex-direction: column;
+
+    article {
+      display: flex;
+    }
+  }
+`

src/components/sidebar/Sidebar.tsx

@@ -0,0 +1,40 @@
+import Image from 'next/image'
+import React, { useState } from 'react'
+import { SidebarView } from './SidebarView'
+
+export default function Sidebar() {
+  const [ economiaDrawer, setEconomiaDrawer ] = useState(false)
+
+  const [ viewModal, setViewModal ] = useState(false)
+
+  return (
+    <SidebarView economiaDrawer={economiaDrawer} modalOpen={viewModal} >
+      <div className='hamburger' onClick={() => setViewModal(!viewModal)} >
+        <Image src='/assets/hamburgerModal.svg' width={100} height={100} />
+      </div>
+      <Image src='/assets/logo.svg' width={100} height={100} className='imageNext' />
+      <ul>
+        <li>{'Visão Geral'}</li>
+        <li>{'Consumo'}</li>
+        <li>{'Resumo de Op. >'}</li>
+        <li onClick={() => setEconomiaDrawer(!economiaDrawer)} >{'Economia >'}</li>
+        <div className='economiaDrawer drawer' >
+          <li>Economia Bruta</li>
+          <li>Economia Acumulada</li>
+          <li>Custo Estimado</li>
+          <li>Custo R/MWh</li>
+        </div>
+        <li>{'Notícias >'}</li>
+        <li>{'Info Setorial >'}</li>
+        <li>{'SAQ >'}</li>
+        <li>{'Sobre Nós >'}</li>
+        <li>{'Notificação >'}</li>
+        <li>{'Telemetria >'}</li>
+      </ul>
+      <aside>
+        <p>Nossos Gerentes estão prontos para atendê-los</p>
+        <div><h3>(xx) XXXX-XXXX</h3></div>
+      </aside>
+    </SidebarView>
+  )
+}

src/components/sidebar/SidebarView.ts

@@ -0,0 +1,147 @@
+import styled from 'styled-components'
+
+interface SidebarViewInterface {
+  economiaDrawer: boolean | null,
+  modalOpen: boolean | null
+}
+
+export const SidebarView = styled.nav<SidebarViewInterface>`
+  position: fixed;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  flex-direction: column;
+
+  width: 20rem;
+
+  margin: 0;
+  padding: 0;
+
+  box-shadow: 18px 4px 35px rgba(0, 0, 0, 0.02);
+
+  background-color: #FFFFFF;
+
+  ul {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    flex-direction: column;
+
+    list-style: none;
+
+    width: 100%;
+
+    li {
+      width: 100%;
+      height: 67px;
+
+      font-family: 'Poppins';
+      font-style: normal;
+      font-weight: 500;
+      font-size: 18px;
+      line-height: 27px;
+      /* identical to box height */
+
+      color: #969BA0;
+
+      cursor: pointer;
+    }
+
+    .economiaDrawer {
+      display: ${props => props.economiaDrawer? 'block' : 'none'};
+    }
+  }
+
+  aside {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    flex-wrap: wrap;
+
+    width: 90%;
+    height: 190px;
+
+    background: linear-gradient(155.54deg, #254F7F 15.63%, #9C9C9C 136.34%);
+    border-radius: 26px;
+
+    p {
+      text-align: center;
+      width: 80%;
+
+      font-family: 'Poppins';
+      font-style: normal;
+      font-weight: 600;
+      font-size: 14px;
+      line-height: 21px;
+      text-align: center;
+
+      color: #FFFFFF;
+    }
+
+    div {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      width: 80%;
+      height: 60px;
+
+      background: #FFFFFF;
+      border-radius: 8px;
+    }
+  }
+
+  .drawer {
+    margin-left: 20px;
+  }
+
+  .hamburger {
+    display: none;
+  }
+
+  @media (max-width: 1196px) {
+    align-items: flex-start;
+
+    width: 20rem;
+    /* height: ${props => props.modalOpen? '100%' : null}; */
+
+    padding-top: 20px;
+    padding-left: 20px;
+
+    /* background-color: ${props => props.modalOpen? '#FFF' : 'transparent'}; */
+
+    z-index: 2;
+
+    .hamburger {
+      position: fixed;
+      top: 20px;
+
+      display: inherit;
+      width: 40px;
+      height: 40px;
+
+      /* background-color: black; */
+
+      cursor: pointer;
+
+      z-index: 2;
+    }
+    .imageNext {
+      display: none;
+      opacity: 0;
+    }
+    ul {
+      display: ${props => props.modalOpen? 'block' : 'none'};
+      min-height: 100vh;
+
+      background-color: #FFF;
+    }
+    aside {
+      display: none;
+    }
+  }
+`