diff --git a/pages/_document.tsx b/pages/_document.tsx index afe7522..a05c9c1 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -35,8 +35,11 @@ export default class MyDocument extends Document { - + + + +
diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx new file mode 100644 index 0000000..4e00424 --- /dev/null +++ b/pages/dashboard.tsx @@ -0,0 +1,124 @@ +import React from 'react' +import Image from 'next/image' +import Link from 'next/link' + +import { DashboardView } from '../styles/layouts/Dashboard/DashboardView' + +export default function Dashboard() { + return ( +
+
+ +
+ +
+ +
+
+
+
+
+

Visão Geral

+ Bem Vindo a Smart Energia +
+
+ +
+

R$/MWh

+ abril / 22 +
+
+
+ +
+

SE/CO

+ Sudeste +
+ +

R$ 273,54

+
+
+
+
+ +
+

SE/CO

+ Sudeste +
+ +

R$ 273,54

+
+
+
+
+ +
+

SE/CO

+ Sudeste +
+ +

R$ 273,54

+
+
+
+
+ +
+

SE/CO

+ Sudeste +
+ +

R$ 273,54

+
+
+
+
+ +
+
+
+

Consumo

+ Gráfico de Consumo + <> +
+ +
+
+ +
+
+

Indicador de custo

+ Valores em R$/ MWh + <> +
+
+
+ +
+
+

Consumo

+ Gráfico de Consumo + <> +
+
+
+
+ +
+ ) +} diff --git a/pages/index.tsx b/pages/index.tsx index 7d2c3ab..9ecc665 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,13 +1,9 @@ import React from 'react' -import Head from 'next/head' -import Image from 'next/image' -import styles from '../styles/Home.module.css' - export default function Home() { return (
-

Index.js

+

Index.ts

) } diff --git a/public/copel.svg b/public/copel.svg new file mode 100644 index 0000000..d95856e --- /dev/null +++ b/public/copel.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/graphLineIcon.svg b/public/graphLineIcon.svg new file mode 100644 index 0000000..25ecb93 --- /dev/null +++ b/public/graphLineIcon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/mapSample.svg b/public/mapSample.svg new file mode 100644 index 0000000..804924b --- /dev/null +++ b/public/mapSample.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/moneyIcon.svg b/public/moneyIcon.svg new file mode 100644 index 0000000..6ffff61 --- /dev/null +++ b/public/moneyIcon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/styles/layouts/Dashboard/DashboardView.ts b/styles/layouts/Dashboard/DashboardView.ts new file mode 100644 index 0000000..0a251bf --- /dev/null +++ b/styles/layouts/Dashboard/DashboardView.ts @@ -0,0 +1,198 @@ +import styled from 'styled-components' + +export const DashboardView = styled.main` + * { + margin: 0; + } + display: flex; + justify-content: center; + align-items: flex-start; + flex-direction: column; + + margin: 60px; + + span { + font-family: 'Poppins'; + font-style: normal; + font-weight: 500; + font-size: 16px; + line-height: 24px; + } + + h4 { + font-family: 'Poppins'; + font-style: normal; + font-weight: 600; + font-size: 21px; + line-height: 32px; + } + + h1 { + font-family: 'Poppins'; + font-style: normal; + font-weight: 600; + font-size: 28px; + line-height: 42px; + } + + p { + font-family: 'Poppins'; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 24px; + } + + .graph { + width: 42rem; + height: 310px; + + background-color: grey + } + + .graphBig { + width: 90rem; + height: 310px; + + background-color: grey + } + + .cardSection { + display: flex; + justify-content: space-evenly; + align-items: center; + 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; + + span { + margin-bottom: 25px; + } + + figure { + display: flex; + justify-content: center; + align-items: center; + + flex-direction: row; + + margin-right: 25px; + + + + :first-child { + margin-right: 95px; + } + + div { + display: flex; + justify-content: center; + align-items: center; + + flex-direction: column; + + figure { + margin: 0; + align-items: flex-start; + } + } + } + } + + .dashboard { + display: flex; + justify-content: space-between; + + flex-wrap: wrap; + + article { + display: flex; + align-items: flex-start; + justify-content: space-between; + + flex-direction: column; + + max-width: 120rem; + min-width: fit-content; + + min-height: 30rem; + + margin-bottom: 30px; + + padding: 30px; + + /* border: solid black 1px; */ + box-shadow: 0px 0px 15px -3px rgba(0,0,0,0.1); + border-radius: 10px; + } + + .asideConsumo { + display: flex; + justify-content: space-between; + align-items: center; + + flex-direction: row; + + width: 32rem; + height: 4rem; + + margin: 30px 0 30px 0; + + border-radius: 12px; + + padding: 0 12px 0 12px; + + background-color: #E9FFEF; + + a { + font-family: 'Poppins'; + font-style: normal; + font-weight: 500; + font-size: 16px; + line-height: 24px; + /* identical to box height */ + + + color: #2F4CDD; + } + + .asideConsumoContent { + display: flex; + align-items: center; + justify-content: space-between; + + width: 40%; + + .count { + display: flex; + align-items: center; + justify-content: center; + + width: 87px; + height: 44px; + + border-radius: 12px; + + background-color: #2BC155; + color: white; + } + } + } + .statusDot { + max-width: 11px; + max-height: 11px; + min-width: 11px; + min-height: 11px; + + border-radius: 100%; + + background-color: #2BC155; + } + } +`