✨ add faq page

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 (
+    <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>
+  )
+}

public/assets/less-icon.svg

@@ -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>

public/assets/plus-icon.svg

@@ -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>

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<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>
+  )
+}

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

src/components/sidebar/Sidebar.tsx

@@ -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>

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;
+  }
+`