From 205c187c5ff77db48569efd10399dd61fb39c988 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Corte?= Date: Thu, 5 May 2022 15:03:04 -0300 Subject: [PATCH 1/3] add login button --- .../button/loginButton/LoginButton.tsx | 14 ++++++++++++++ .../button/loginButton/LoginButtonView.ts | 19 +++++++++++++++++++ 2 files changed, 33 insertions(+) create mode 100644 src/components/button/loginButton/LoginButton.tsx create mode 100644 src/components/button/loginButton/LoginButtonView.ts diff --git a/src/components/button/loginButton/LoginButton.tsx b/src/components/button/loginButton/LoginButton.tsx new file mode 100644 index 0000000..37d374a --- /dev/null +++ b/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 ( + + {title} + + ) +} diff --git a/src/components/button/loginButton/LoginButtonView.ts b/src/components/button/loginButton/LoginButtonView.ts new file mode 100644 index 0000000..412d979 --- /dev/null +++ b/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; +` From abbb5a319694c3063c9a897e42da1f8624ef1cb4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Corte?= Date: Fri, 6 May 2022 12:37:59 -0300 Subject: [PATCH 2/3] :sparkles: add sidebar component --- src/components/sidebar/Sidebar.tsx | 40 +++++++ src/components/sidebar/SidebarView.ts | 147 ++++++++++++++++++++++++++ 2 files changed, 187 insertions(+) create mode 100644 src/components/sidebar/Sidebar.tsx create mode 100644 src/components/sidebar/SidebarView.ts diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx new file mode 100644 index 0000000..d00a2a9 --- /dev/null +++ b/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 ( + +
setViewModal(!viewModal)} > + +
+ +
    +
  • {'Visão Geral'}
    • +
  • {'Consumo'}
    • +
  • {'Resumo de Op. >'}
    • +
  • setEconomiaDrawer(!economiaDrawer)} >{'Economia >'}
    • +
    +
  • Economia Bruta
    • +
  • Economia Acumulada
    • +
  • Custo Estimado
    • +
  • Custo R/MWh
    • +
    +
  • {'Notícias >'}
    • +
  • {'Info Setorial >'}
    • +
  • {'SAQ >'}
    • +
  • {'Sobre Nós >'}
    • +
  • {'Notificação >'}
    • +
  • {'Telemetria >'}
    • +
+ + + ) +} diff --git a/src/components/sidebar/SidebarView.ts b/src/components/sidebar/SidebarView.ts new file mode 100644 index 0000000..76960f6 --- /dev/null +++ b/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` + 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; + } + } +` From 6feac8022b86a5eae5ee3be1fb98e7fe88babe58 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Corte?= Date: Fri, 6 May 2022 12:41:42 -0300 Subject: [PATCH 3/3] :sprakles: add mapCardComponent --- src/components/mapCard/MapCard.tsx | 27 +++++++++++++++++++++++++++ src/components/mapCard/style.ts | 27 +++++++++++++++++++++++++++ 2 files changed, 54 insertions(+) create mode 100644 src/components/mapCard/MapCard.tsx create mode 100644 src/components/mapCard/style.ts diff --git a/src/components/mapCard/MapCard.tsx b/src/components/mapCard/MapCard.tsx new file mode 100644 index 0000000..1d858b1 --- /dev/null +++ b/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 ( + + +
+

{title}

+ {subtitle} +
+ +

{statistic}

+
+
+ + ) +} diff --git a/src/components/mapCard/style.ts b/src/components/mapCard/style.ts new file mode 100644 index 0000000..d3a58d4 --- /dev/null +++ b/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; + } + } +`