diff --git a/pages/faq.tsx b/pages/faq.tsx new file mode 100644 index 0000000..a81e156 --- /dev/null +++ b/pages/faq.tsx @@ -0,0 +1,26 @@ +import React from 'react' +import CommonQuestionsCard from '../src/components/commonQuestionsCard/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/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/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/src/components/commonQuestionsCard/FaqQuestionsCard.tsx b/src/components/commonQuestionsCard/FaqQuestionsCard.tsx new file mode 100644 index 0000000..343e749 --- /dev/null +++ b/src/components/commonQuestionsCard/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/commonQuestionsCard/FaqQuestionsCardView.ts b/src/components/commonQuestionsCard/FaqQuestionsCardView.ts new file mode 100644 index 0000000..396f619 --- /dev/null +++ b/src/components/commonQuestionsCard/FaqQuestionsCardView.ts @@ -0,0 +1,38 @@ +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: 14px; + line-height: 12px; + + letter-spacing: 0.5px; + + color: rgba(0, 0, 0, 0.6); + } +` diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx index 78cc0ca..629035e 100644 --- a/src/components/sidebar/Sidebar.tsx +++ b/src/components/sidebar/Sidebar.tsx @@ -37,7 +37,7 @@ export default function Sidebar() {
  • {'Notícias >'}
  • {'Info Setorial >'}
    • -
  • {'SAQ >'}
    • +
  • {'FAQ >'}
  • {'Sobre Nós >'}
  • {'Notificação >'}
  • {'Telemetria >'}
    • diff --git a/styles/layouts/commonQuestions/FaqView.ts b/styles/layouts/commonQuestions/FaqView.ts new file mode 100644 index 0000000..37b4a7b --- /dev/null +++ b/styles/layouts/commonQuestions/FaqView.ts @@ -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: 48px; + line-height: 72px; + text-align: center; + letter-spacing: 0.5px; + } + + p { + font-weight: 400; + font-size: 14px; + line-height: 21px; + text-align: center; + letter-spacing: 0.5px; + + color: #AAAAAA; + } + + .CommonQuestionsSection { + width: 80%; + } + + hr { + border: 1px solid #DDDDDD; + } +`