feat(module): Adiciona css module

src/components/Header.tsx

@@ -7,6 +7,8 @@ import Link from "./Link";
 import HeaderLinks from "./HeaderLinks";
 import MenuMobile from "./menuMobile";
 
+import styles from "../styles/header.module.scss";
+
 const Header = () => {
   const [isActive, setIsActive] = useState(false);
   const activeMenuMobile = () => {
@@ -14,12 +16,12 @@ const Header = () => {
   };
 
   return (
-    <header className="page-header">
+    <header className={styles["page-header"]}>
-      <div className="page-header__container">
+      <div className={styles["page-header__container"]}>
-        <section className="page-header__container-top">
+        <section className={styles["page-header__container-top"]}>
-          <div className="page-header__menu">
+          <div className={styles["page-header__menu"]}>
             <button
-              className="page-header__menu-button"
+              className={styles["page-header__menu-button"]}
               aria-label="Menu"
               onClick={activeMenuMobile}
             >
@@ -27,28 +29,34 @@ const Header = () => {
             </button>
             <MenuMobile
               className={
-                isActive
+                isActive ? styles["active"] : styles["page-header__menu-mobile"]
-                  ? "page-header__menu-mobile active"
-                  : "page-header__menu-mobile"
               }
               onClick={activeMenuMobile}
             />
           </div>
-          <a className="page-header__logo" href="/">
+          <a className={styles["page-header__logo"]} href="/">
             <img src={Logo} alt="" />
           </a>
           <SearchBar />
-          <div className="page-header__container-login">
+          <div className={styles["page-header__container-login"]}>
             <Link link="/" text="ENTRAR" />
-            <a href="/" aria-label="Carrinho" className="page-header__cart">
+            <a
-              <img src={Cart} alt="" className="page-header__cart-image" />
+              href="/"
+              aria-label="Carrinho"
+              className={styles["page-header__cart"]}
+            >
+              <img
+                src={Cart}
+                alt=""
+                className={styles["page-header__cart-image"]}
+              />
             </a>
           </div>
         </section>
-        <section className="page-header__container-bottom-mobile">
+        <section className={styles["page-header__container-bottom-mobile"]}>
           <SearchBar />
         </section>
-        <section className="page-header__container-bottom">
+        <section className={styles["page-header__container-bottom"]}>
           <HeaderLinks />
         </section>
       </div>

src/components/Link.tsx

@@ -1,3 +1,5 @@
+import styles from "../styles/header.module.scss";
+
 export interface LinkProps {
   link: string;
   text: string;
@@ -5,7 +7,7 @@ export interface LinkProps {
 
 const Link = (props: LinkProps) => {
   return (
-    <a href={props.link} className="link">
+    <a href={props.link} className={styles["link"]}>
       {props.text}
     </a>
   );

src/components/SearchBar.tsx

@@ -1,14 +1,20 @@
 import iconBusca from "../assets/img/IconBusca.png";
 
+import styles from "../styles/header.module.scss";
+
 const SearchBar = () => {
   return (
-    <div className="page-header__busca">
+    <div className={styles["page-header__busca"]}>
       <input
-        className="page-header__busca-input"
+        className={styles["page-header__busca-input"]}
         type="text"
         placeholder="Buscar..."
       />
-      <img src={iconBusca} alt="logo M3" className="page-header__busca-icon" />
+      <img
+        src={iconBusca}
+        alt="logo M3"
+        className={styles["page-header__busca-icon"]}
+      />
     </div>
   );
 };

src/components/menuMobile.tsx

@@ -2,6 +2,8 @@ import iconExit from "../assets/img/iconExit.png";
 import Link from "./Link";
 import HeaderLinks from "./HeaderLinks";
 
+import styles from "../styles/menuMobile.module.scss";
+
 interface MenuMobileProps {
   className: string;
   onClick: React.MouseEventHandler;
@@ -10,11 +12,11 @@ interface MenuMobileProps {
 const MenuMobile = (props: MenuMobileProps) => {
   return (
     <div className={props.className}>
-      <div className="page-header__menu-mobile--container">
+      <div className={styles["page-header__menu-mobile--container"]}>
-        <div className="page-header__menu-mobile--header">
+        <div className={styles["page-header__menu-mobile--header"]}>
           <Link link="/" text="ENTRAR" />
           <button
-            className="page-header__menu-mobile--button-exit"
+            className={styles["page-header__menu-mobile--button-exit"]}
             aria-label="exit"
             type="submit"
             onClick={props.onClick}
@@ -22,7 +24,7 @@ const MenuMobile = (props: MenuMobileProps) => {
             <img src={iconExit} alt="" />
           </button>
         </div>
-        <div className="page-header__menu-mobile--links">
+        <div className={styles["page-header__menu-mobile--links"]}>
           <HeaderLinks />
         </div>
       </div>

src/global.scss

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

src/index.tsx

@@ -1,5 +1,5 @@
 import ReactDOM from "react-dom";
-import "./global.scss";
+import "./styles/global.scss";
 import Home from "./pages/Home";
 
 const App = () => {

src/styles/global.scss

@@ -1,3 +1,5 @@
+@import './variables.scss';
+
 * {
     padding: 0;
     margin: 0;

src/styles/header.module.scss

@@ -1,3 +1,5 @@
+@import './variables.scss';
+
 .page-header {
     display: flex;
     flex-direction: column;
@@ -94,57 +96,28 @@
         cursor: pointer;
     }
 
-    &__menu-mobile {
-        position: absolute;
-        top: 0;
-        left: 0;
-        background: rgba(69, 69, 69, 0.7);
-        width: 100%;
-        height: 100%;
-        z-index: 50;
-        display: none;
-
-        &--container {
-            height: 585px;
-            background: $white;
-            width: 96.5%;
-        }
-
-        &--header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            background: $black;
-            padding: 31px 16px;
-        }
-
-        &--button-exit {
-            background: transparent;
-            border: 0;
-            outline: 0;
-            cursor: pointer;
-        }
-
-        &--links {
-            display: flex;
-            flex-direction: column;
-            align-self: start;
-            gap: 12px;
-            padding: 31px 0 0 16px;
-
-            .link {
-                color: #C4C4C4;
-            }
-        }
-
-    }
-
     &__container-bottom-mobile {
         padding: 0 16px 25px;
     }
 
+    &__menu-mobile {
+        display: none;
+    }
+
     .active {
+        position: absolute;
+        top: 0;
+        left: 0;
+        background: rgba($gray, 0.702);
+        width: 100%;
+        height: 100%;
+        z-index: 50;
         display: block;
+
+
+        .link {
+            color: $gray-600;
+        }
     }
 
     @media screen and (min-width: 2500px) {

src/styles/menuMobile.module.scss

@@ -0,0 +1,35 @@
+@import './variables.scss';
+
+.page-header {
+    &__menu-mobile {
+        &--container {
+            height: 585px;
+            background: $white;
+            width: 96.5%;
+        }
+
+        &--header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background: $black;
+            padding: 31px 16px;
+        }
+
+        &--button-exit {
+            background: transparent;
+            border: 0;
+            outline: 0;
+            cursor: pointer;
+        }
+
+        &--links {
+            display: flex;
+            flex-direction: column;
+            align-self: start;
+            gap: 12px;
+            padding: 31px 0 0 16px;
+        }
+
+    }
+}