marlonpassos/m3ACR
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(subject): Adiciona o conteudo da pagina

Browse Source
This commit is contained in:
amanda almeida 2022-12-31 14:20:11 -03:00
parent 46fc949038
commit 1ecf1eba9a
10 changed files with 162 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package-lock.json generated
View File

@ -28744,4 +28744,4 @@
"integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="
}
}
}
}

2
package.json
View File

@ -41,4 +41,4 @@
"last 1 safari version"
]
}
}
}

10
src/components/Button.tsx
View File

@ -1,12 +1,20 @@
import styles from "../styles/subject.module.scss";
interface ButtonProps {
link: string;
text: string;
onClick: React.MouseEventHandler;
}
const Button = (props: ButtonProps) => {
return (
<a href={props.link}>
<button className="page-subject__button">{props.text}</button>
<button
onClick={props.onClick}
className={styles["page-subject__button"]}
>
{props.text}
</button>
</a>
);
};

14
src/components/Main.tsx
View File

@ -2,15 +2,17 @@ import iconHome from "../assets/img/iconHome.png";
import arrow from "../assets/img/arrow.png";
import SubjectMain from "./SubjectMain";
import styles from "../styles/main.module.scss";
const Main = () => {
return (
<main className="page-main">
<div className="page-main__menu">
<img className="page-main__img-Home" src={iconHome} alt="" />
<img className="page-main__img-arrow" src={arrow} alt="" />
<strong className="page-main__text">INSTITUCIONAL</strong>
<main className={styles["page-main"]}>
<div className={styles["page-main__menu"]}>
<img className={styles["page-main__img-Home"]} src={iconHome} alt="" />
<img className={styles["page-main__img-arrow"]} src={arrow} alt="" />
<strong className={styles["page-main__text"]}>INSTITUCIONAL</strong>
</div>
<h1 className="page-main__title">INSTITUCIONAL</h1>
<h1 className={styles["page-main__title"]}>INSTITUCIONAL</h1>
<SubjectMain />
</main>
);

55
src/components/SubjectMain.tsx
View File

@ -1,19 +1,54 @@
import Button from "./Button";
import SubjectText from "./SubjectText";
import styles from "../styles/subject.module.scss";
import { useState } from "react";
const SubjectMain = () => {
const [isActive, setIsActive] = useState(false);
const activeText = () => {
setIsActive(!isActive);
};
return (
<section className="page-subject">
<div className="page-subject__menu">
<Button link="/" text="Sobre" />
<Button link="/" text="Forma de Pagamento" />
<Button link="/" text="Entrega" />
<Button link="/" text="Troca e Devolução" />
<Button link="/" text="Segurança e Privacidade" />
<Button link="/" text="Contato" />
<section className={styles["page-subject"]}>
<div className={styles["page-subject__menu"]}>
<Button onClick={activeText} link="#Sobre" text="Sobre" />
<Button
onClick={activeText}
link="#FormadePagamento"
text="Forma de Pagamento"
/>
<Button onClick={activeText} link="#Entrega" text="Entrega" />
<Button
onClick={activeText}
link="#TrocaeDevolucao"
text="Troca e Devolução"
/>
<Button
onClick={activeText}
link="#SegurancaePrivacidade"
text="Segurança e Privacidade"
/>
<Button onClick={activeText} link="#Contao" text="Contato" />
</div>
<div className="page-subject__text">
<SubjectText title="Sobre" />
<div className={styles["page-subject__text"]}>
<SubjectText
className={
isActive
? styles["page-subject__container active"]
: styles["page-subject__container"]
}
title="Sobre"
/>
<SubjectText
className={
isActive
? styles["page-subject__container active"]
: styles["page-subject__container"]
}
title="Forma de Pagamento"
/>
</div>
</section>
);

12
src/components/SubjectText.tsx
View File

@ -1,12 +1,14 @@
import styles from "../styles/subject.module.scss";
interface SubjectTextProps {
title: string;
className: string;
}
const SubjectText = (props: SubjectTextProps) => {
return (
<>
<h2 className="page-subject__title">{props.title}</h2>
<p>
<div className={props.className}>
<h2 className={styles["page-subject__title"]}>{props.title}</h2>
<p className={styles["page-subject__paragraph"]}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
@ -31,7 +33,7 @@ const SubjectText = (props: SubjectTextProps) => {
nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
voluptas nulla pariatur?
</p>
</>
</div>
);
};

3
src/global.scss
View File

@ -1,4 +1,3 @@
@import './styles/variables.scss';
@import './styles/reset.scss';
@import './styles/header.scss';
@import './styles/main.scss'
@import './styles/header.scss';

29
src/styles/main.module.scss Normal file
View File

@ -0,0 +1,29 @@
@import "variables.scss";
.page-main {
padding: 0 100px;
&__menu {
display: flex;
align-items: center;
gap: 10px;
margin-top: 30px;
}
&__text {
font-weight: 400;
font-size: 12px;
line-height: 14px;
color: $gray-700;
}
&__title {
margin-top: 80px;
text-align: center;
font-weight: 400;
font-size: 24px;
line-height: 28px;
letter-spacing: 0.1em;
color: $gray;
}
}

82
src/styles/main.scss
View File

@ -1,82 +0,0 @@
.page-main {
padding: 0 100px;
&__menu {
display: flex;
align-items: center;
gap: 10px;
margin-top: 30px;
}
&__text {
font-weight: 400;
font-size: 12px;
line-height: 14px;
color: $gray-700;
}
&__title {
margin-top: 80px;
text-align: center;
font-weight: 400;
font-size: 24px;
line-height: 28px;
letter-spacing: 0.1em;
color: $gray;
}
.page-subject {
display: flex;
margin-top: 80px;
gap: 30px;
&__menu {
width: 302px;
border-right: 1px solid $black ;
}
&__button {
border: 0;
outline: 0;
background: transparent;
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: $gray-400;
width: 302px;
height: 39px;
text-align: start;
padding-left: 16px;
&:hover,
&:active {
background: $black;
font-weight: 700;
color: $white;
}
}
&__text {
display: flex;
flex-direction: column;
gap: 12px;
justify-content: center;
margin-top: 10px;
h2 {
font-weight: 700;
font-size: 24px;
line-height: 28px;
color: $gray;
}
p {
font-weight: 400;
font-size: 13px;
line-height: 15px;
color: $gray-400;
}
}
}
}

61
src/styles/subject.module.scss Normal file
View File

@ -0,0 +1,61 @@
@import "variables.scss";
.page-subject {
display: flex;
margin-top: 80px;
gap: 30px;
&__menu {
width: 302px;
border-right: 1px solid $black ;
}
&__button {
border: 0;
outline: 0;
background: transparent;
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: $gray-400;
width: 302px;
height: 39px;
text-align: start;
padding-left: 16px;
&:hover,
&:active {
background: $black;
font-weight: 700;
color: $white;
}
}
&__container {
display: none;
}
.active {
display: flex;
flex-direction: column;
gap: 12px;
justify-content: center;
margin-top: 10px;
}
&__title {
font-weight: 700;
font-size: 24px;
line-height: 28px;
color: $gray;
}
&__paragraph {
font-weight: 400;
font-size: 13px;
line-height: 15px;
color: $gray-400;
}
}