diff --git a/package.json b/package.json index acacedb..f27da74 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,8 @@ "dependencies": { "@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", "@typescript-eslint/eslint-plugin": "^5.22.0", "@typescript-eslint/parser": "^5.22.0", diff --git a/pages/_app.tsx b/pages/_app.tsx index 3e098e7..98112a9 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -12,7 +12,13 @@ import '../styles/globals.ts' import Home from '.' +<<<<<<< HEAD + +function MyApp({ Component, pageProps }: AppProps) { + const [ auth, setAuth ] = useState(false) +======= import Head from 'next/head' +>>>>>>> d76992f98de0130492c71a92530d12b04793ecac function MyApp({ Component, pageProps }: AppProps) { const router = useRouter() diff --git a/pages/_document.tsx b/pages/_document.tsx index a05c9c1..47c06fd 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -39,7 +39,18 @@ export default class MyDocument extends Document { + +<<<<<<< HEAD + + +======= + + + + + +>>>>>>> d76992f98de0130492c71a92530d12b04793ecac
diff --git a/pages/aboutUs.tsx b/pages/aboutUs.tsx new file mode 100644 index 0000000..cef1d84 --- /dev/null +++ b/pages/aboutUs.tsx @@ -0,0 +1,48 @@ +import Image from 'next/image' +import React from 'react' +import Banner from '../src/components/banner/Banner' +import Header from '../src/components/header/Header' +import { AboutUsView } from '../styles/layouts/aboutUs/AboutUsView' + +export default function aboutUs() { + return ( + +
+ + +
+

A SMART ENERGIA é uma consultoria independente especializada em Gestão de Energia Elétrica, consolidada como uma das três maiores consultorias do Brasil. + Devido à grande experiência em operações na CCEE – Câmara de Comercialização de Energia Elétrica e ANEEL, entrega resultados que superam as expectativas.

+ +

Nasceu para gerenciar a compra de energia com inovação, transparência e imparcialidade sendo o elo forte e necessário entre os Consumidores e os + Vendedores de energia.

+ +

Baseada em sua experiência no setor elétrico adquirida desde 2001 e em mais de 900 unidades migradas, atua na negociação de contratos de compra e venda de + energia, na Gestão de Energia no Mercado Livre e criação de produtos diferenciados para atender as necessidades específicas dos consumidores.

+ +

Apoiada pela sólida experiência de seus gestores, conhecendo as premissas dos agentes de Comercialização e Geração para a compra e venda de energia, + aplicamos as mesmas premissas a favor dos Consumidores, disponibilizando assim um diferencial único para a tomada de decisão e elaboração das estratégias de + contratação de energia.

+
    +
  • {'Informação'}
    • +
  • {'Economia'}
    • +
  • {'Gestão de Energia'}
    • +
  • {'Imparcialidade'}
    • +
  • {'Previsão de Custos'}
    • +
  • {'Experiência'}
    • +
  • {'Relacionamento'}
    • +
+ +
+ +
+
+ + ) +} diff --git a/pages/accumulatedSavings.tsx b/pages/accumulatedSavings.tsx index dc7970e..bdeac4b 100644 --- a/pages/accumulatedSavings.tsx +++ b/pages/accumulatedSavings.tsx @@ -2,6 +2,7 @@ import React from 'react' import Chart from '../src/components/graph/Chart' import Header from '../src/components/header/Header' +import PageTitle from '../src/components/pageTitle/PageTitle' import { AccumulatedSavingsView } from '../styles/layouts/economy/accumulatedSavings/AccumulatedSavingsView' @@ -9,10 +10,7 @@ export default function AccumulatedSavings() { return (
-
-

Economia Acumulada

- Economia Bruta Estimada e Acumulada anual (Valores em R$ mil) -
+
diff --git a/pages/areaTest.tsx b/pages/areaTest.tsx index 4b24121..9c62295 100644 --- a/pages/areaTest.tsx +++ b/pages/areaTest.tsx @@ -1,9 +1,81 @@ import React from 'react' import BasicButton from '../src/components/buttons/basicButton/BasicButton' +<<<<<<< HEAD +import Image from 'next/image'; +======= +import GradientButton from '../src/components/buttons/gradientButton/GradientButton' +>>>>>>> d76992f98de0130492c71a92530d12b04793ecac import Graph from '../src/components/graph/Chart' +import Box from '@mui/material/Box'; +import IconButton from '@mui/material/IconButton'; +import Input from '@mui/material/Input'; +import FilledInput from '@mui/material/FilledInput'; +import OutlinedInput from '@mui/material/OutlinedInput'; +import InputLabel from '@mui/material/InputLabel'; +import InputAdornment from '@mui/material/InputAdornment'; +import FormHelperText from '@mui/material/FormHelperText'; +import FormControl from '@mui/material/FormControl'; +import TextField from '@mui/material/TextField'; + + + + export default function areaTest() { + + const [values, setValues] = React.useState({ + amount: '', + password: '', + weight: '', + weightRange: '', + showPassword: false, + }); + const handleChange = + (prop) => (event: React.ChangeEvent) => { + setValues({ ...values, [prop]: event.target.value }); + }; + const handleClickShowPassword = () => { + setValues({ + ...values, + showPassword: !values.showPassword, + }); + }; + const handleMouseDownPassword = (event: React.MouseEvent) => { + event.preventDefault(); + }; + return ( - +<<<<<<< HEAD + // + + Password + + + {values.showPassword ? : } + + + } + label="Password" + /> + + +======= + <> + + + +>>>>>>> d76992f98de0130492c71a92530d12b04793ecac ) } diff --git a/pages/consumption.tsx b/pages/consumption.tsx index 299655c..f19f0bb 100644 --- a/pages/consumption.tsx +++ b/pages/consumption.tsx @@ -1,16 +1,14 @@ import React from 'react' import Chart from '../src/components/graph/Chart' import Header from '../src/components/header/Header' +import PageTitle from '../src/components/pageTitle/PageTitle' import { ConsumptionView } from '../styles/layouts/consumption/ConsumptionView' export default function Consumption() { return (
-
-

Consumo

- Análise de Consumo -
+
diff --git a/pages/costIndicator.tsx b/pages/costIndicator.tsx index 520528b..fd03e16 100644 --- a/pages/costIndicator.tsx +++ b/pages/costIndicator.tsx @@ -2,16 +2,14 @@ import React from 'react' import Chart from '../src/components/graph/Chart' import Header from '../src/components/header/Header' +import PageTitle from '../src/components/pageTitle/PageTitle' import { CostIndicatorView } from '../styles/layouts/economy/costIndicator/CostIndicatorView' export default function CostIndicator() { return (
-
-

Indicador de Custo

- Valores em R$/MWh -
+
diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx index 5bd9939..9124a72 100644 --- a/pages/dashboard.tsx +++ b/pages/dashboard.tsx @@ -3,12 +3,14 @@ import React from 'react' import { DashboardView } from '../styles/layouts/dashboard/DashboardView' import MapCard from '../src/components/mapCard/MapCard' import GraphCard from '../src/components/graph/graphCard/ChartCard' +import Header from '../src/components/header/Header' +import PageTitle from '../src/components/pageTitle/PageTitle' export default function Dashboard() { return ( -

Visão Geral

- Bem Vindo a Smart Energia +
+
diff --git a/pages/estimatedCost.tsx b/pages/estimatedCost.tsx index 6f0c923..e2310ce 100644 --- a/pages/estimatedCost.tsx +++ b/pages/estimatedCost.tsx @@ -2,6 +2,7 @@ import React from 'react' import Chart from '../src/components/graph/Chart' import Header from '../src/components/header/Header' +import PageTitle from '../src/components/pageTitle/PageTitle' import { EstimatedCostView } from '../styles/layouts/economy/estimatedCost/EstimatedCostView' @@ -9,10 +10,7 @@ export default function EstimatedCost() { return (
-
-

Custo Estimado

- Comparativo de Custo Estimado -
+
diff --git a/pages/faq.tsx b/pages/faq.tsx new file mode 100644 index 0000000..164eae9 --- /dev/null +++ b/pages/faq.tsx @@ -0,0 +1,26 @@ +import React from 'react' +import CommonQuestionsCard from '../src/components/faqQuestionsCard/FaqQuestionsCard' +import Header from '../src/components/header/Header' +import { FaqView } from '../styles/layouts/commonQuestions/FaqView' + +export default function commonQuestions() { + return ( + +
+

Perguntas Frequentes

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+ +
+ +
+ +
+ +
+ +
+
+ + ) +} diff --git a/pages/grossSavings.tsx b/pages/grossSavings.tsx index 8fbcea4..865e201 100644 --- a/pages/grossSavings.tsx +++ b/pages/grossSavings.tsx @@ -2,6 +2,7 @@ import React from 'react' import Chart from '../src/components/graph/Chart' import Header from '../src/components/header/Header' +import PageTitle from '../src/components/pageTitle/PageTitle' import { GrossSavingsView } from '../styles/layouts/economy/grossSavings/GrossSavings' @@ -9,10 +10,7 @@ export default function GrossSavings() { return (
-
-

Economia Bruta

- Economia Bruta Estimada e Acumulada anual (Valores em R$ mil) -
+
diff --git a/pages/index.tsx b/pages/index.tsx index 100e637..71ee5f1 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,42 +1,96 @@ -import React, { useState, useEffect } from 'react' +import React, { useState } from 'react' import Image from 'next/image'; import Link from 'next/link'; import { useRouter } from 'next/router' +import OutlinedInput from '@mui/material/OutlinedInput'; +import InputLabel from '@mui/material/InputLabel'; +import InputAdornment from '@mui/material/InputAdornment'; +import LoginButton from '../src/components/buttons/loginButton/LoginButton'; +import FormControl from '@mui/material/FormControl'; +import IconButton from '@mui/material/IconButton'; +import TextField from '@mui/material/TextField'; -import { LoginView} from '../styles/layouts/login/LoginView'; -import { truncateSync } from 'fs'; +import {AiOutlineEyeInvisible, AiOutlineEye} from 'react-icons/ai'; -interface HomeInterface { - auth: any -} +import { LoginView, LoginContainer} from '../styles/layouts/Login/LoginView'; -export default function Home({ auth }: HomeInterface) { +export default function Home() { + const [state, setstate]=useState(false); + const toggleBtn = ()=> { + setstate(prevState => !prevState); + } + const [values, setValues] = React.useState({ + amount: '', + password: '', + weight: '', + weightRange: '', + showPassword: false, + }); const router = useRouter() const rota = router.pathname + const handleChange = (prop) => (event) => { + setValues({ ...values, [prop]: event.target.value }); + }; + + const handleClickShowPassword = () => { + setValues({ + ...values, + showPassword: !values.showPassword, + }); + }; + + const handleMouseDownPassword = (event) => { + event.preventDefault(); + }; + return ( - -
+ +

Bem-Vindo

-

Estratégias Inteligentes em Gestão de Energia

- - +

Estratégias Inteligentes em
Gestão de Energia

+ + + + Password + + + {values.showPassword ? : } + + + } + label="Password" + /> + Esqueceu a senha ? + - + -
- Ou +
+ Ou
-

+55(41) 3012-5900 -
www.energiasmart.com.br

+

+55(41) 3012-5900
www.energiasmart.com.br

-
+ ) } + + diff --git a/pages/resumoOperacao.tsx b/pages/resumoOperacao.tsx index cd2c42a..f050d67 100644 --- a/pages/resumoOperacao.tsx +++ b/pages/resumoOperacao.tsx @@ -1,20 +1,23 @@ import React from 'react'; +<<<<<<< HEAD +import BasicButton from '../src/components/buttons/basicButton/BasicButton'; +======= +import Header from '../src/components/header/Header'; +import PageTitle from '../src/components/pageTitle/PageTitle'; +>>>>>>> d76992f98de0130492c71a92530d12b04793ecac import Sidebar from '../src/components/sidebar/Sidebar'; -import { TableView} from '../styles/layouts/resumoOperacao/ResumoOperacaoView'; - - +import { TableView } from '../styles/layouts/ResumoOperacao/ResumoOperacaoView'; export default function ResumoOperacao() { return( - - -

Resumo de Operaçoes

-

Operações detalhadas

-

Seletor Mês

+
+ +

Seletor Mês

+<<<<<<< HEAD @@ -77,8 +80,75 @@ export default function ResumoOperacao() {
Unidade
+ +

Mostando de 1 a 10 de 30 Entradas

+ +======= + + + Unidade + Operação + Montante (MWh) + Contraparte + Preço(R$/MWh) + ValorNF/Crédito(R$) + + + + + Unidade - 9500130 + Compra + 122,269 + COPEL COM I5 + 234,67 + 38.257,15 + + + Unidade - 9500130 + Compra + 110,348 + EMEWE I5 + 190,16 + 27.978,37 + + + Unidade - 9500130 + Compra + 13,074 + PACTO COMERCIALIZADORA I5 + 300,36 + 5.235,88 + + + Unidade - 9500130 + Compra + 133,117 + COPEL COM I5 + 300,36 + 41.651,42 + + + Unidade - 9500130 + Compra + 120,138 + EMEWE I5 + 234,67 + 30.460,59 + + + Unidade - 9500130 + Compra + 14,897 + PACTO COMERCIALIZADORA I5 + 300,36 + 5.965,95 + + + + +>>>>>>> d76992f98de0130492c71a92530d12b04793ecac ) } diff --git a/pages/telemetria.tsx b/pages/telemetria.tsx index 4a6c890..e1c3a20 100644 --- a/pages/telemetria.tsx +++ b/pages/telemetria.tsx @@ -1,30 +1,109 @@ import React from 'react'; -import Image from 'next/image'; -import BasicButton from '../src/components/buttons/basicButton/BasicButton' +import Banner from '../src/components/banner/Banner'; +import { TelemetriaView, Buttons} from '../styles/layouts/Telemetria/TelemetriaView'; +import GradientButton from '../src/components/buttons/gradientButton/GradientButton' +import Header from '../src/components/header/Header'; +import MenuItem from '@mui/material/MenuItem'; +import FormControl from '@mui/material/FormControl'; +import Select, { SelectChangeEvent } from '@mui/material/Select'; -import { TelemetriaView} from '../styles/layouts/telemetria/TelemetriaView'; export default function Telemetria() { + + const [age, setAge] = React.useState(''); + + const handleChange = (event: SelectChangeEvent) => { + setAge(event.target.value); + }; + + + return( + - -
- +
+ -
- + +

Unidade

+ + + +

Data Inicial

+ + + +

Data Final

+ + + +

Discretização

+ + + + + + + + - - - ) } diff --git a/public/assets/bannerTemplate.png b/public/assets/banners/aboutUsBanner.png similarity index 100% rename from public/assets/bannerTemplate.png rename to public/assets/banners/aboutUsBanner.png diff --git a/public/assets/less-icon.svg b/public/assets/less-icon.svg new file mode 100644 index 0000000..1e98ed9 --- /dev/null +++ b/public/assets/less-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/listIcon.svg b/public/assets/listIcon.svg new file mode 100644 index 0000000..68e3d9b --- /dev/null +++ b/public/assets/listIcon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/assets/plus-icon.svg b/public/assets/plus-icon.svg new file mode 100644 index 0000000..03a43ea --- /dev/null +++ b/public/assets/plus-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/assets/png/copel.png b/public/assets/png/copel.png new file mode 100644 index 0000000..3a1d498 Binary files /dev/null and b/public/assets/png/copel.png differ diff --git a/public/assets/png/copel.xcf b/public/assets/png/copel.xcf new file mode 100644 index 0000000..3e7bb9c Binary files /dev/null and b/public/assets/png/copel.xcf differ diff --git a/public/assets/sidebar/consumptionIcon.svg b/public/assets/sidebar/consumptionIcon.svg new file mode 100644 index 0000000..19b39d1 --- /dev/null +++ b/public/assets/sidebar/consumptionIcon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/assets/sidebar/dashboardIcon.svg b/public/assets/sidebar/dashboardIcon.svg new file mode 100644 index 0000000..3b54fbc --- /dev/null +++ b/public/assets/sidebar/dashboardIcon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/assets/sidebar/economyIcon.svg b/public/assets/sidebar/economyIcon.svg new file mode 100644 index 0000000..b8a2063 --- /dev/null +++ b/public/assets/sidebar/economyIcon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/assets/sidebar/newsIcon.svg b/public/assets/sidebar/newsIcon.svg new file mode 100644 index 0000000..1ed49f2 --- /dev/null +++ b/public/assets/sidebar/newsIcon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/assets/sidebar/notificationsIcon.svg b/public/assets/sidebar/notificationsIcon.svg new file mode 100644 index 0000000..7df561c --- /dev/null +++ b/public/assets/sidebar/notificationsIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/sidebar/saqIcon.svg b/public/assets/sidebar/saqIcon.svg new file mode 100644 index 0000000..03fcfc7 --- /dev/null +++ b/public/assets/sidebar/saqIcon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/assets/sidebar/sectorialInfoIcon.svg b/public/assets/sidebar/sectorialInfoIcon.svg new file mode 100644 index 0000000..1ed49f2 --- /dev/null +++ b/public/assets/sidebar/sectorialInfoIcon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/assets/sidebar/summaryOperationsIcon.svg b/public/assets/sidebar/summaryOperationsIcon.svg new file mode 100644 index 0000000..fd18447 --- /dev/null +++ b/public/assets/sidebar/summaryOperationsIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/sidebar/telemetryIcon.svg b/public/assets/sidebar/telemetryIcon.svg new file mode 100644 index 0000000..8ccd842 --- /dev/null +++ b/public/assets/sidebar/telemetryIcon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/assets/stamps/blueStamp.png b/public/assets/stamps/blueStamp.png new file mode 100644 index 0000000..67cc46c Binary files /dev/null and b/public/assets/stamps/blueStamp.png differ diff --git a/public/assets/stamps/whiteStamp.png b/public/assets/stamps/whiteStamp.png new file mode 100644 index 0000000..5957fd4 Binary files /dev/null and b/public/assets/stamps/whiteStamp.png differ diff --git a/public/copel.svg b/public/copel.svg index d95856e..8271189 100644 --- a/public/copel.svg +++ b/public/copel.svg @@ -1,9 +1,9 @@ - - - - - - - - + + + + + + + + diff --git a/public/eye-svgrepo-com.svg b/public/eye-svgrepo-com.svg new file mode 100644 index 0000000..045a9b3 --- /dev/null +++ b/public/eye-svgrepo-com.svg @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/banner/BannerView.ts b/src/components/banner/BannerView.ts index 6054c72..d694a9a 100644 --- a/src/components/banner/BannerView.ts +++ b/src/components/banner/BannerView.ts @@ -2,6 +2,10 @@ import styled from 'styled-components' export const BannerView = styled.div` position: relative; + + display: flex; + align-items: center; + width: 100%; height: 19rem; @@ -18,13 +22,31 @@ export const BannerView = styled.div` .text { position: relative; - margin: 82px 0 0 20px; + margin: 0 0 0 20px; font-family: 'Poppins'; + font-size:19px; font-style: normal; - color: white; - + padding-top:45px; z-index: 2; + + overflow: hidden; + + p { + font-size: 30px; + } + + * { + margin: 0; + } } + + @media (max-width: 1008px) { + font-size: 170%; + } + + + + ` diff --git a/src/components/buttons/basicButton/BasicButtonView.ts b/src/components/buttons/basicButton/BasicButtonView.ts index 5c66b88..38e44c1 100644 --- a/src/components/buttons/basicButton/BasicButtonView.ts +++ b/src/components/buttons/basicButton/BasicButtonView.ts @@ -7,13 +7,13 @@ export const BasicButtonView = styled.button` width: 120px; height: 45px; - + cursor: pointer; background: #254F7F; border-radius: 8px; border-style: none; font-family: 'Poppins'; - font-size: 16px; + font-size: 90%; /* identical to box height */ diff --git a/src/components/buttons/gradientButton/GradientButton.tsx b/src/components/buttons/gradientButton/GradientButton.tsx new file mode 100644 index 0000000..c6404af --- /dev/null +++ b/src/components/buttons/gradientButton/GradientButton.tsx @@ -0,0 +1,19 @@ +import React from 'react' +import { GradientButtonView } from './GradientButtonView' + +interface GradientButtonInterface { + title: string, + description: string + orange?: undefined | null | boolean, + purple?: undefined | null | boolean, + green?: undefined | null | boolean +} + +export default function GradientButton({ title, description, orange, purple, green }: GradientButtonInterface) { + return ( + +

{title}

+

{description}

+ + ) +} diff --git a/src/components/buttons/gradientButton/GradientButtonView.ts b/src/components/buttons/gradientButton/GradientButtonView.ts new file mode 100644 index 0000000..54359f8 --- /dev/null +++ b/src/components/buttons/gradientButton/GradientButtonView.ts @@ -0,0 +1,58 @@ +import styled from "styled-components"; + +export const GradientButtonView = styled.button` + display: flex; + justify-content: center; + align-items: center; + + flex-direction: column; + border-radius: 2px; + + width: 25%; + height: 110px; + margin-bottom: 25px; + + font-family: 'Poppins'; + font-size: 10px; + + color: #FFFFFF; + + background: ${ props => props.color==='orange'? + 'linear-gradient(200.86deg, #F48665 8.03%, #F48665 91.97%), #FFFFFF' + : + props.color === 'purple'? + 'linear-gradient(200.69deg, #9A56FF 8.53%, #D78AFD 91.47%), #FFFFFF' + : + 'linear-gradient(200.69deg, #23BDB8 8.53%, #43E794 91.47%), #FFFFFF' + }; + + box-shadow: 0.5px 3px 10px rgba(119, 119, 119, 0.1); + + border-style: none; + + cursor: pointer; + + * { + margin: 0; + padding: 0; + } + + p { + :first-child { + font-family: 'Poppins'; + font-style: normal; + font-weight: 700; + font-size: calc(20px); + + text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + } + :last-child { + font-family: 'Poppins'; + font-style: normal; + font-weight: 700; + font-size: 12; + + text-transform: uppercase; + } + } +` diff --git a/src/components/buttons/loginButton/LoginButtonView.ts b/src/components/buttons/loginButton/LoginButtonView.ts index 337672b..35e9fb7 100644 --- a/src/components/buttons/loginButton/LoginButtonView.ts +++ b/src/components/buttons/loginButton/LoginButtonView.ts @@ -1,19 +1,24 @@ import styled from 'styled-components' export const LoginButtonView = styled.button` - width: 100%; - height: 95px; + width: 90%; + height:100%; + min-height: 4rem; + + border-radius: 8px; - background: linear-gradient(88.75deg, #254F7F 0.18%, #888888 99.28); + background: rgb(2,0,36); + background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(37,79,127,1) 35%, rgba(136,136,136,1) 100%); font-family: 'Nunito Sans'; - font-style: normal; font-weight: 700; - font-size: 32px; + font-size: calc(99.98% + 10px); line-height: 44px; text-align: center; - letter-spacing: 0.03em; + border: none; + cursor: pointer; color: #FFFFFF; + ` diff --git a/src/components/faqQuestionsCard/FaqQuestionsCard.tsx b/src/components/faqQuestionsCard/FaqQuestionsCard.tsx new file mode 100644 index 0000000..343e749 --- /dev/null +++ b/src/components/faqQuestionsCard/FaqQuestionsCard.tsx @@ -0,0 +1,23 @@ +import React, { useState } from 'react' +import Image from 'next/image' + +import { FaqQuestionsCardBody, FaqQuestionsCardHeader, CommonQuestionsCardView } from './FaqQuestionsCardView' + +export default function CommonsQuestionsCard() { + const [ showCardBody, setShowCardBody ] = useState(false) + return ( + + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit?

+ setShowCardBody(!showCardBody)} /> + + + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Consequat porta faucibus elementum pharetra varius +

+ + + ) +} diff --git a/src/components/faqQuestionsCard/FaqQuestionsCardView.ts b/src/components/faqQuestionsCard/FaqQuestionsCardView.ts new file mode 100644 index 0000000..91d16dd --- /dev/null +++ b/src/components/faqQuestionsCard/FaqQuestionsCardView.ts @@ -0,0 +1,45 @@ +import styled from "styled-components"; + +export const CommonQuestionsCardView = styled.article` +` + +export const FaqQuestionsCardHeader = styled.div` + display: flex; + justify-content: space-between; + align-items: center; + + flex-direction: row; + + margin-top: 53px; + + width: 100%; + + img { + cursor: pointer; + } +` +interface CardBodyInterface { + showCardBody: boolean; +} +export const FaqQuestionsCardBody = styled.div` + display: ${props => props.showCardBody? 'flex' : 'none'}; + + margin-bottom: 20px; + + p { + font-weight: 400; + font-size: 99%; + + letter-spacing: 0.5px; + + color: rgba(0, 0, 0, 0.6); + + text-align: left; + } + + @media (max-width: 1008px) { + p { + text-align: left; + } + } +` diff --git a/src/components/graph/Chart.tsx b/src/components/graph/Chart.tsx index 9478286..0fbd3e4 100644 --- a/src/components/graph/Chart.tsx +++ b/src/components/graph/Chart.tsx @@ -54,12 +54,12 @@ export default function Chart({ title }: ChartInterface) { { label: '2020', data: labels.map(() => faker.datatype.number({ min: 0, max: 1200 })), - backgroundColor: 'rgba(53, 162, 235, 5)', + backgroundColor: '#C2D5FB', }, { label: '2021', data: labels.map(() => faker.datatype.number({ min: 0, max: 1200 })), - backgroundColor: 'rgba(0, 81, 255, 1)', + backgroundColor: '#255488', }, ], }) diff --git a/src/components/graph/ChartView.ts b/src/components/graph/ChartView.ts index 0b07fbc..7df3e4b 100644 --- a/src/components/graph/ChartView.ts +++ b/src/components/graph/ChartView.ts @@ -1,5 +1,5 @@ import styled from "styled-components" export const ChartView = styled.div` - width: 100%; + width: 80%; ` diff --git a/src/components/graph/graphCard/ChartCard.tsx b/src/components/graph/graphCard/ChartCard.tsx index bbc374d..b71de03 100644 --- a/src/components/graph/graphCard/ChartCard.tsx +++ b/src/components/graph/graphCard/ChartCard.tsx @@ -5,6 +5,7 @@ import ToggleButton from '@mui/material/ToggleButton'; import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; import { ChartCardView } from './ChartCardView'; +import Chart from '../Chart'; interface ChartCardInterface { title: string, @@ -28,7 +29,7 @@ export default function ChartCard({ title, subtitle, consumption, className }: C
-

{title}

+

{title}

{subtitle}
}
-
+ ) } diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx index 62269be..4bc5ffb 100644 --- a/src/components/header/Header.tsx +++ b/src/components/header/Header.tsx @@ -53,7 +53,7 @@ export default function Header({ name }: headerInterface) { />
- +
olá, {'josé'}
diff --git a/src/components/header/HeaderView.ts b/src/components/header/HeaderView.ts index 20d822f..d217c5e 100644 --- a/src/components/header/HeaderView.ts +++ b/src/components/header/HeaderView.ts @@ -2,22 +2,22 @@ import styled from "styled-components"; export const HeaderView = styled.header` display: flex; - align-items: center; justify-content: space-between; - flex-direction: row; - height: 10rem; + margin: 0 0 75px 0; + + width: 100%; section { - display: flex; - align-items: center; - justify-content: center; + width: 30%; - margin: 0; - padding: 0; - :first-child { - width: 30%; + :last-child { + display: flex; + justify-content: flex-end; + align-items: flex-start; + + height: fit-content; } } @@ -29,7 +29,7 @@ export const HeaderView = styled.header` justify-content: center; width: 150px; - height: 43px; + height: 40px; border-radius: 8px; @@ -41,11 +41,20 @@ export const HeaderView = styled.header` ::after { content: ""; position: relative; - left: 40px; - background-color: #FFF; + left: 2.5rem; + background-color: #fff; width: 45px; height: 45px; - border-radius: 100%; + border-radius: 50%; + } + } + + @media (max-width: 1020px) { + .icon { + display: none; + } + section { + width: 50%; } } ` diff --git a/src/components/mapCard/MapCard.tsx b/src/components/mapCard/MapCard.tsx index f308a4a..a70a738 100644 --- a/src/components/mapCard/MapCard.tsx +++ b/src/components/mapCard/MapCard.tsx @@ -5,7 +5,7 @@ import { MapCardView } from './style' interface MapCardInterface { title: string, subtitle: string, - statistic: string, + statistic?: string, imgSource: string, } @@ -18,8 +18,15 @@ export default function MapCard({ title, subtitle, statistic, imgSource }: MapCa

{title}

{subtitle}
- -

{statistic}

+ { + statistic? + <> + +

{statistic}

+ + : + null + }
diff --git a/src/components/mapCard/style.ts b/src/components/mapCard/style.ts index f33a672..36e3f69 100644 --- a/src/components/mapCard/style.ts +++ b/src/components/mapCard/style.ts @@ -9,6 +9,11 @@ export const MapCardView = styled.figure` margin-right: 25px; + * { + margin: 0; + padding: 0; + } + span { margin-bottom: 25px; } diff --git a/src/components/pageTitle/PageTitle.tsx b/src/components/pageTitle/PageTitle.tsx new file mode 100644 index 0000000..091dd06 --- /dev/null +++ b/src/components/pageTitle/PageTitle.tsx @@ -0,0 +1,16 @@ +import React from 'react' +import { PageTitleView } from './PageTitleView' + +interface PageTitleInterface { + title: string, + subtitle: string +} + +export default function PageTitle({ title, subtitle }: PageTitleInterface) { + return ( + +

{title}

+

{subtitle}

+ + ) +} diff --git a/src/components/pageTitle/PageTitleView.ts b/src/components/pageTitle/PageTitleView.ts new file mode 100644 index 0000000..3013202 --- /dev/null +++ b/src/components/pageTitle/PageTitleView.ts @@ -0,0 +1,27 @@ +import styled from "styled-components"; + +export const PageTitleView = styled.div` +display: flex; +justify-content: center; +align-items: flex-start; + +flex-direction: column; + +width: 100%; + +h1 { + margin: 0; +} + +p { + margin: 0; + + font-family: 'Poppins'; + font-style: normal; + font-weight: 400; + font-size: 99%; + line-height: 27px; + + color: #969BA0; +} +` diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx index 5ac7741..282ce6f 100644 --- a/src/components/sidebar/Sidebar.tsx +++ b/src/components/sidebar/Sidebar.tsx @@ -1,9 +1,9 @@ -import React, { useState } from 'react' -import Image from 'next/image' +import React, { useState, useEffect } from 'react' import { useRouter } from 'next/router' +import Image from 'next/image' +import Link from 'next/link' import { SidebarView } from './SidebarView' -import Link from 'next/link' export default function Sidebar() { const [ economiaDrawer, setEconomiaDrawer ] = useState(false) @@ -12,33 +12,35 @@ export default function Sidebar() { const router = useRouter() - console.log(router.pathname) + useEffect(() => { + setViewModal(false) + }, [router.pathname]) return (
setViewModal(!viewModal)} > - +
    -
  • {'Visão Geral'}
    • -
  • {'Consumo'}
    • -
  • {'Resumo de Op. '}
    • -
  • setEconomiaDrawer(!economiaDrawer)} className={router.pathname=='/grossSavings' || router.pathname=='/accumulatedSavings' || router.pathname=='/estimatedCost' || router.pathname=='/costIndicator' ? 'actualPath' : null } >{'Economia >'}
    • +
  • {'Visão Geral'}
    • +
  • {'Consumo'}
    • +
  • {'Resumo de Op. '}
    • +
  • setEconomiaDrawer(!economiaDrawer)} className={router.pathname=='/grossSavings' || router.pathname=='/accumulatedSavings' || router.pathname=='/estimatedCost' || router.pathname=='/costIndicator' ? 'actualPath' : null } >{'Economia'}
  • Economia Bruta
  • Economia Acumulada
  • Custo Estimado
  • Custo R/MWh
    • -
  • {'Notícias >'}
    • -
  • {'Info Setorial >'}
    • -
  • {'SAQ >'}
    • -
  • {'Sobre Nós >'}
    • -
  • {'Notificação >'}
    • -
  • {'Telemetria >'}
    • +
  • {'Notícias >'}
    • +
  • {'Info Setorial >'}
    • +
  • {'FAQ >'}
    • +
  • {'Sobre Nós >'}
    • +
  • {'Notificação >'}
    • +
  • {'Telemetria >'}