From a6c335be635b8e1db526f395537811d2bf967f3e Mon Sep 17 00:00:00 2001
From: Rafael Sampaio <rafael.sampa1989@gmail.com>
Date: Thu, 29 Dec 2022 06:58:33 -0300
Subject: [PATCH] refactor: adiciona css modules

---
 src/App.tsx                                   |  4 +--
 .../{styles.scss => header.module.scss}       |  0
 src/components/Header/index.tsx               | 30 +++++++++----------
 src/pages/Institutional/index.tsx             | 12 ++++++++
 4 files changed, 29 insertions(+), 17 deletions(-)
 rename src/components/Header/{styles.scss => header.module.scss} (100%)
 create mode 100644 src/pages/Institutional/index.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 6be6e79..b0b80e5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,10 +1,10 @@
 import React from "react";
-import { Header } from "./components/Header";
+import { Institutional } from "./pages/Institutional";
 
 function App() {
   return (
     <>
-      <Header />
+      <Institutional />
     </>
   );
 }
diff --git a/src/components/Header/styles.scss b/src/components/Header/header.module.scss
similarity index 100%
rename from src/components/Header/styles.scss
rename to src/components/Header/header.module.scss
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index 449a68a..ef36ce6 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import "./styles.scss";
+import styles from "./header.module.scss";
 import logo from "../../assets/images/logo.png";
 import cart from "../../assets/images/header-cart.png";
 import search from "../../assets/images/header-search.png";
@@ -7,36 +7,36 @@ import menuButton from "../../assets/images/menu-button.png";
 
 const Header = () => {
   return (
-    <header className="header">
-      <div className="header__content">
-        <button className="menu-mobile-button">
+    <header className={styles["header"]}>
+      <div className={styles["header__content"]}>
+        <button className={styles["menu-mobile-button"]}>
           <img src={menuButton} alt="Menu mobile" />
         </button>
-        <div className="logo">
+        <div className={styles["logo"]}>
           <a href="/">
             <img src={logo} alt="Logo da M3" />
           </a>
         </div>
-        <div className="search-desktop">
+        <div className={styles["search-desktop"]}>
           <input
-            className="search-desktop__input"
+            className={styles["search-desktop__input"]}
             type="text"
             placeholder="Buscar..."
           />
-          <button className="search-desktop__button" type="button">
+          <button className={styles["search-desktop__button"]} type="button">
             <img src={search} alt="Pesquisar" />
           </button>
         </div>
-        <div className="buttons">
-          <button className="buttons__logIn" type="button">
+        <div className={styles["buttons"]}>
+          <button className={styles["buttons__logIn"]} type="button">
             ENTRAR
           </button>
-          <button className="buttons__cart" type="button">
+          <button className={styles["buttons__cart"]} type="button">
             <img src={cart} alt="Carrinho" />
           </button>
         </div>
       </div>
-      <div className="header__nav">
+      <div className={styles["header__nav"]}>
         <nav>
           <ul>
             <li>
@@ -51,13 +51,13 @@ const Header = () => {
           </ul>
         </nav>
       </div>
-      <div className="search-mobile">
+      <div className={styles["search-mobile"]}>
         <input
-          className="search-mobile__input"
+          className={styles["search-mobile__input"]}
           type="text"
           placeholder="Buscar..."
         />
-        <button className="search-mobile__button" type="button">
+        <button className={styles["search-mobile__button"]} type="button">
           <img src={search} alt="Pesquisar" />
         </button>
       </div>
diff --git a/src/pages/Institutional/index.tsx b/src/pages/Institutional/index.tsx
new file mode 100644
index 0000000..64a2a93
--- /dev/null
+++ b/src/pages/Institutional/index.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import { Header } from "../../components/Header";
+
+const Institutional = () => {
+  return (
+    <>
+      <Header />
+    </>
+  );
+};
+
+export { Institutional };