Smart/smartEnergyView-frontend
2
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

finish

Browse Source
This commit is contained in:
Alex Santos 2022-05-12 09:43:28 -03:00
parent daf9705016
commit 6054e6180e
17 changed files with 195 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
pages/aboutUs.tsx
View File

@ -24,13 +24,13 @@ export default function aboutUs() {
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.</p>
<ul>
<li><Image src='/assets/listIcon.svg' width={25} height={25} />Informação</li>
<li><Image src='/assets/listIcon.svg' width={25} height={25} />Economia</li>
<li><Image src='/assets/listIcon.svg' width={25} height={25} />Gestão de Energia</li>
<li><Image src='/assets/listIcon.svg' width={25} height={25} />Imparcialidade</li>
<li><Image src='/assets/listIcon.svg' width={25} height={25} />Previsão de Custos</li>
<li><Image src='/assets/listIcon.svg' width={25} height={25} />Experiência</li>
<li><Image src='/assets/listIcon.svg' width={25} height={25} />Relacionamento</li>
<li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Informação'}</li>
<li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Economia'}</li>
<li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Gestão de Energia'}</li>
<li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Imparcialidade'}</li>
<li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Previsão de Custos'}</li>
<li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Experiência'}</li>
<li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Relacionamento'}</li>
</ul>
<article>

26
pages/faq.tsx Normal file
View File

@ -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 (
<FaqView>
<Header name='' />
<h1>Perguntas Frequentes</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<section className='CommonQuestionsSection' >
<CommonQuestionsCard />
<hr />
<CommonQuestionsCard />
<hr />
<CommonQuestionsCard />
<hr />
<CommonQuestionsCard />
<hr />
<CommonQuestionsCard />
<hr />
</section>
</FaqView>
)
}

3
public/assets/less-icon.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.4917 16.1553H24.8894" stroke="#254F7F" stroke-width="1.2" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 198 B

4
public/assets/plus-icon.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.49219 16.79H24.8899" stroke="black" stroke-width="1.2" stroke-linecap="round"/>
<path d="M16.6909 8.5918L16.6909 24.9895" stroke="black" stroke-width="1.2" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 296 B

21
src/components/banner/BannerView.ts
View File

@ -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,28 @@ export const BannerView = styled.div`
.text {
position: relative;
margin: 90px 30px;
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%;
}

2
src/components/buttons/basicButton/BasicButtonView.ts
View File

@ -14,7 +14,7 @@ export const BasicButtonView = styled.button`
border-style: none;
font-family: 'Poppins';
font-size: 16px;
font-size: 90%;
/* identical to box height */

23
src/components/faqQuestionsCard/FaqQuestionsCard.tsx Normal file
View File

@ -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<boolean>(false)
return (
<CommonQuestionsCardView>
<FaqQuestionsCardHeader>
<h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit?</h4>
<Image src={showCardBody? '/assets/less-icon.svg' : '/assets/plus-icon.svg' } width={32} height={32} onClick={() => setShowCardBody(!showCardBody)} />
</FaqQuestionsCardHeader>
<FaqQuestionsCardBody showCardBody={showCardBody} >
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Consequat porta faucibus elementum pharetra varius
</p>
</FaqQuestionsCardBody>
</CommonQuestionsCardView>
)
}

45
src/components/faqQuestionsCard/FaqQuestionsCardView.ts Normal file
View File

@ -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<CardBodyInterface>`
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;
}
}
`

2
src/components/header/Header.tsx
View File

@ -53,7 +53,7 @@ export default function Header({ name }: headerInterface) {
/>
</section>
<section>
<Image src='/assets/png/copel.png' width={150} height={50} />
<Image src='/assets/png/copel.png' width={170} height={50} />
<div className='icon' >
olá, {'josé'}
</div>

2
src/components/header/HeaderView.ts
View File

@ -14,7 +14,7 @@ export const HeaderView = styled.header`
:last-child {
display: flex;
justify-content: center;
justify-content: flex-end;
align-items: flex-start;
height: fit-content;

2
src/components/pageTitle/PageTitleView.ts
View File

@ -19,7 +19,7 @@ p {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 18px;
font-size: 99%;
line-height: 27px;
color: #969BA0;

6
src/components/sidebar/Sidebar.tsx
View File

@ -19,7 +19,7 @@ export default function Sidebar() {
return (
<SidebarView economiaDrawer={economiaDrawer} modalOpen={viewModal} >
<div className='hamburger' onClick={() => setViewModal(!viewModal)} >
<Image src='/assets/hamburgerModal.svg' width={25} height={25} />
<Image src='/assets/hamburgerModal.svg' width={60} height={60} />
</div>
<div className='imageNext'>
<Image src='/assets/logo.svg' width={100} height={100} />
@ -28,7 +28,7 @@ export default function Sidebar() {
<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>
<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>
<Link href='/accumulatedSavings'><li>Economia Acumulada</li></Link>
@ -37,7 +37,7 @@ export default function Sidebar() {
</div>
<Link href='#'><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='#'><li className={router.pathname=='/saq'? 'actualPath' : null}><Image src='/assets/sidebar/saqIcon.svg' width={25} height={25} />{'SAQ >'}</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='/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>

22
src/components/sidebar/SidebarView.ts
View File

@ -15,6 +15,7 @@ export const SidebarView = styled.nav<SidebarViewInterface>`
flex-direction: column;
width: 20%;
min-width: 15rem;
margin: 0;
padding: 0;
@ -27,16 +28,7 @@ export const SidebarView = styled.nav<SidebarViewInterface>`
border-left: #254F7F solid 8px;
background-color: #FAFBFF;
font-weight: 600;
font-size: 18px;
line-height: 27px;
color: #254F7F;
stop-color: #254F7F;
.svg {
background-color: red;
}
}
ul {
@ -64,7 +56,6 @@ export const SidebarView = styled.nav<SidebarViewInterface>`
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 27px;
color: #969BA0;
@ -131,7 +122,7 @@ export const SidebarView = styled.nav<SidebarViewInterface>`
display: none;
}
@media (max-width: 1548px) {
@media (max-width: 1008px) {
align-items: flex-start;
width: 100%;
@ -150,15 +141,22 @@ export const SidebarView = styled.nav<SidebarViewInterface>`
cursor: pointer;
z-index: 2;
height: 5rem;
}
.imageNext {
display: none;
}
ul {
display: ${props => props.modalOpen? 'block' : 'none'};
min-height: 100vh;
min-height: 85vh;
background-color: #FFF;
li {
height: 7rem;
font-size: 170%;
}
}
aside {
display: none;

0
src/txt.txt Normal file
View File

2
styles/app/AppView.ts
View File

@ -6,7 +6,7 @@ export const AppView = styled.main`
margin: 0 0 10rem 0;
padding: 0;
@media (max-width: 1548px) {
@media (max-width: 1008px) {
flex-direction: column;
margin: 0;
}

14
styles/layouts/aboutUs/AboutUsView.ts
View File

@ -7,7 +7,7 @@ export const AboutUsView = styled.main`
font-family: 'Poppins';
font-style: normal;
font-weight: 300;
font-size: 17px;
font-size: 80%;
line-height: 26px;
}
@ -17,6 +17,8 @@ export const AboutUsView = styled.main`
li {
display: flex;
margin-bottom: 8px;
font-size: 98.98%;
}
}
@ -37,4 +39,14 @@ export const AboutUsView = styled.main`
}
}
}
@media (max-width: 1008px) {
li {
font-size: 170%!important;
}
img {
width: 200px;
}
}
`

36
styles/layouts/commonQuestions/FaqView.ts Normal file
View File

@ -0,0 +1,36 @@
import styled from "styled-components";
export const FaqView = styled.main`
display: flex;
align-items: center;
flex-direction: column;
width: 100%;
h1 {
font-weight: 700;
font-size: calc(90% + 2rem);
line-height: 72px;
text-align: center;
letter-spacing: 0.5px;
}
p {
font-weight: 400;
font-size: 99.98%;
line-height: 21px;
text-align: center;
letter-spacing: 0.5px;
color: #AAAAAA;
}
.CommonQuestionsSection {
width: 80%;
}
hr {
border: 1px solid #DDDDDD;
}
`