feat(subject): Adiciona o conteudo da pagina

package-lock.json

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

package.json

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

src/components/Button.tsx

@@ -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>
   );
 };

src/components/Main.tsx

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

src/components/SubjectMain.tsx

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

src/components/SubjectText.tsx

@@ -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>
   );
 };
 

src/global.scss

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

src/styles/main.module.scss

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

src/styles/main.scss

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

src/styles/subject.module.scss

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