From 829b86c3c66a39772529f7707d9a88d9d87c51ad Mon Sep 17 00:00:00 2001
From: WillSimao <williamsimaocavalcante75@gmail.com>
Date: Tue, 10 Jan 2023 14:59:30 -0300
Subject: [PATCH] feat(Footer): Estiliza FooterMobile

---
 react-ts/src/Pages/Home/Home.tsx              |  2 +
 .../BreadCrumb/BreadCrumb.module.scss         |  6 ++
 react-ts/src/components/Footer/Footer.tsx     |  2 +-
 .../FooterLinks/FooterLinks.module.scss       | 35 ++-------
 .../components/FooterLinks/FooterLinks.tsx    | 22 +-----
 .../FooterLinksAccordion.module.scss          | 28 ++++++++
 .../FooterLinksAccordion.tsx                  | 24 +++++++
 .../FooterLinksMobile.module.scss             | 34 +++++++++
 .../FooterLinksMobile/FooterLinksMobile.tsx   | 71 +++++++++++++++++++
 .../components/MenuMobile/ComponentMobile.tsx |  2 -
 .../src/components/MenuMobile/MenuMobile.tsx  |  5 +-
 .../NewsLetter/NewsLetter.module.scss         |  3 +-
 .../SocialMedia/SocialMedia.module.scss       | 36 ++++++++++
 .../components/SocialMedia/SocialMedia.tsx    | 28 ++++++++
 .../WhatsApp.module.scss                      |  0
 .../{Whatsap => Whatsapp}/WhatsApp.tsx        |  0
 16 files changed, 243 insertions(+), 55 deletions(-)
 create mode 100644 react-ts/src/components/FooterLinksMobile/FooterLinksAccordion.module.scss
 create mode 100644 react-ts/src/components/FooterLinksMobile/FooterLinksAccordion.tsx
 create mode 100644 react-ts/src/components/FooterLinksMobile/FooterLinksMobile.module.scss
 create mode 100644 react-ts/src/components/FooterLinksMobile/FooterLinksMobile.tsx
 create mode 100644 react-ts/src/components/SocialMedia/SocialMedia.module.scss
 create mode 100644 react-ts/src/components/SocialMedia/SocialMedia.tsx
 rename react-ts/src/components/{Whatsap => Whatsapp}/WhatsApp.module.scss (100%)
 rename react-ts/src/components/{Whatsap => Whatsapp}/WhatsApp.tsx (100%)

diff --git a/react-ts/src/Pages/Home/Home.tsx b/react-ts/src/Pages/Home/Home.tsx
index b2cfb3f..6ecd501 100644
--- a/react-ts/src/Pages/Home/Home.tsx
+++ b/react-ts/src/Pages/Home/Home.tsx
@@ -3,6 +3,7 @@ import HeaderMobile from '../../components/HeaderMobile/HeaderMobile'
 import BreadCrumb from '../../components/BreadCrumb/BreadCrumb'
 import NewsLetter from '../../components/NewsLetter/NewsLetter'
 import FooterLinks from '../../components/FooterLinks/FooterLinks'
+import FooterLinksMobile from '../../components/FooterLinksMobile/FooterLinksMobile'
 import Footer from '../../components/Footer/Footer'
 
 const Home = () => {
@@ -13,6 +14,7 @@ const Home = () => {
       <BreadCrumb/>
       <NewsLetter/>
       <FooterLinks/>
+      <FooterLinksMobile/>
       <Footer/>
     </>
   )
diff --git a/react-ts/src/components/BreadCrumb/BreadCrumb.module.scss b/react-ts/src/components/BreadCrumb/BreadCrumb.module.scss
index 678ec45..ce193bb 100644
--- a/react-ts/src/components/BreadCrumb/BreadCrumb.module.scss
+++ b/react-ts/src/components/BreadCrumb/BreadCrumb.module.scss
@@ -17,6 +17,12 @@
     }
 }
 
+@media only screen and (max-width: 1280px) {
+    .container-breadCrumb {
+        padding: 29px 16px 0;
+    }
+}
+
 @media only screen and (min-width: 2500px) {
     .container-breadCrumb {
         &__house {
diff --git a/react-ts/src/components/Footer/Footer.tsx b/react-ts/src/components/Footer/Footer.tsx
index 755642f..544ba7a 100644
--- a/react-ts/src/components/Footer/Footer.tsx
+++ b/react-ts/src/components/Footer/Footer.tsx
@@ -1,7 +1,7 @@
 import styles from './Footer.module.scss';
 
 import ScrollTop from '../ScrollTop/ScrollTop';
-import Whatsap from '../Whatsap/WhatsApp';
+import Whatsap from '../Whatsapp/WhatsApp';
 import FooterCardsMobile from './FooterCardsMobile';
 
 import MasterCard from '../../assets/images/MasterCard.svg';
diff --git a/react-ts/src/components/FooterLinks/FooterLinks.module.scss b/react-ts/src/components/FooterLinks/FooterLinks.module.scss
index 0edcc4d..31dc2fb 100644
--- a/react-ts/src/components/FooterLinks/FooterLinks.module.scss
+++ b/react-ts/src/components/FooterLinks/FooterLinks.module.scss
@@ -44,23 +44,6 @@
             }
         }
     }
-    &__social {
-        display: flex;
-        flex-direction: column;
-        row-gap: 12px;
-        &__picture {
-            display: flex;
-            column-gap: 10px;
-        }
-        a {
-            font-family: $font-family;
-            font-style: normal;
-            font-weight: 400;
-            font-size: 14px;
-            line-height: 16px;
-            color: $color-black2;
-        }
-    }
     &__contact {
         position: absolute;
         right: 0;
@@ -68,6 +51,12 @@
     }
 }
 
+@media only screen and (max-width: 1024px) {
+    .container {
+        display: none;
+    }
+}
+
 @media only screen and (min-width: 2500px) {
     .container {
         &__wrapper-links {
@@ -91,17 +80,5 @@
                 }
             }
         }
-        &__social {
-            &__picture {
-                img {
-                    width: 70px;
-                    height: 70px;
-                }
-            }
-            a {
-                font-size: 28px;
-                line-height: 33px;
-            }
-        }
     }
 }
\ No newline at end of file
diff --git a/react-ts/src/components/FooterLinks/FooterLinks.tsx b/react-ts/src/components/FooterLinks/FooterLinks.tsx
index 7ed0a40..b6247ab 100644
--- a/react-ts/src/components/FooterLinks/FooterLinks.tsx
+++ b/react-ts/src/components/FooterLinks/FooterLinks.tsx
@@ -1,13 +1,8 @@
 import styles from './FooterLinks.module.scss';
 
+import SocialMedia from '../SocialMedia/SocialMedia';
 import ScrollTop from '../ScrollTop/ScrollTop';
-import Whatsap from '../Whatsap/WhatsApp';
-
-import Facebook from '../../assets/images/Facebook.svg';
-import Instagram from '../../assets/images/Instagram.svg';
-import Twitter from '../../assets/images/Twitter.svg';
-import YouTube from '../../assets/images/YouTube.svg';
-import Linkedin from '../../assets/images/Linkedin.svg';
+import Whatsap from '../Whatsapp/WhatsApp';
 
 const FooterLinks = () => {
     return (
@@ -71,18 +66,7 @@ const FooterLinks = () => {
                     </li>
                 </ul>
             </div>
-            <div className={styles['container__social']}>
-                <picture className={styles['container__social__picture']}>
-                    <img src={Facebook} alt="Facebook" />
-                    <img src={Instagram} alt="Instagram" />
-                    <img src={Twitter} alt="Twitter" />
-                    <img src={YouTube} alt="YouTube" />
-                    <img src={Linkedin} alt="Linkedin" />
-                </picture>
-                <a href="/">
-                    www.loremipsum.com
-                </a>
-            </div>
+            <SocialMedia/>
             <div className={styles['container__contact']}>
                 <Whatsap/>
                 <ScrollTop/>
diff --git a/react-ts/src/components/FooterLinksMobile/FooterLinksAccordion.module.scss b/react-ts/src/components/FooterLinksMobile/FooterLinksAccordion.module.scss
new file mode 100644
index 0000000..6040ffc
--- /dev/null
+++ b/react-ts/src/components/FooterLinksMobile/FooterLinksAccordion.module.scss
@@ -0,0 +1,28 @@
+@import '../../styles/utils/Variables.scss'; 
+
+.container {
+    &__title {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        h1 {
+            font-family: $font-family;
+            font-style: normal;
+            font-weight: 500;
+            font-size: 14px;
+            line-height: 16px;
+            color: $color-black2;
+        }
+        span {
+            font-family: $font-family;
+            font-weight: 500;
+            color: $color-black2;
+        }
+    }
+}
+
+@media only screen and (min-width: 1025px) {
+    .container {
+        display: none;
+    }
+}
\ No newline at end of file
diff --git a/react-ts/src/components/FooterLinksMobile/FooterLinksAccordion.tsx b/react-ts/src/components/FooterLinksMobile/FooterLinksAccordion.tsx
new file mode 100644
index 0000000..77bb8e9
--- /dev/null
+++ b/react-ts/src/components/FooterLinksMobile/FooterLinksAccordion.tsx
@@ -0,0 +1,24 @@
+import { useState } from "react";
+
+import styles from './FooterLinksAccordion.module.scss';
+
+interface Title {
+    title: any,
+    content: any,
+}
+
+const FooterLinksAccordion = ({ title, content }: Title) => {
+  const [isActive, setIsActive] = useState(false);
+
+  return (
+    <div className={styles['container']}>
+      <div className={styles['container__title']} onClick={() => setIsActive(!isActive)}>
+        <h1>{title}</h1>
+        {isActive ? <span>-</span> : <span>+</span>}
+      </div>
+      {isActive && <>{content}</>}
+    </div>
+  );
+};
+
+export default FooterLinksAccordion;
\ No newline at end of file
diff --git a/react-ts/src/components/FooterLinksMobile/FooterLinksMobile.module.scss b/react-ts/src/components/FooterLinksMobile/FooterLinksMobile.module.scss
new file mode 100644
index 0000000..130928d
--- /dev/null
+++ b/react-ts/src/components/FooterLinksMobile/FooterLinksMobile.module.scss
@@ -0,0 +1,34 @@
+@import '../../styles/utils/Variables.scss'; 
+
+.container {
+    padding: 24px 16px;
+    display: flex;
+    flex-direction: column;
+    row-gap: 12px;
+    border-top: 1px solid $color-black1;
+    ul {
+        display: flex;
+        flex-direction: column;
+        row-gap: 5px;
+        b {
+            font-family: $font-family;
+            font-style: normal;
+            font-weight: 500;
+            font-size: 12px;
+            line-height: 14px;
+            text-transform: capitalize;
+            color: $color-black2;
+        }
+        li {
+            a {
+                font-family: $font-family;
+                font-style: normal;
+                font-weight: 400;
+                font-size: 12px;
+                line-height: 14px;
+                text-transform: capitalize;
+                color: $color-black2;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/react-ts/src/components/FooterLinksMobile/FooterLinksMobile.tsx b/react-ts/src/components/FooterLinksMobile/FooterLinksMobile.tsx
new file mode 100644
index 0000000..b7c11d3
--- /dev/null
+++ b/react-ts/src/components/FooterLinksMobile/FooterLinksMobile.tsx
@@ -0,0 +1,71 @@
+import styles from './FooterLinksMobile.module.scss';
+
+import FooterLinksAccordion from './FooterLinksAccordion';
+import SocialMedia from '../SocialMedia/SocialMedia';
+
+
+const FooterLinksMobile = () => {
+
+    const text = [
+        {
+            title: 'Institucional',
+            subTitle: <ul>
+                <li>
+                    <a href="/">Quem Somos</a>
+                </li>
+                <li>
+                    <a href="/">Política de Privacidade</a>
+                </li>
+                <li>
+                    <a href="/">Segurança</a>
+                </li>
+                <li>
+                    <a href="/">Seja um Revendedor</a>
+                </li>
+            </ul>
+        },
+    {
+        title: 'Dúvidas',
+        subTitle: <ul>
+            <li>
+                <a href="/">Entrega</a>
+            </li>
+            <li>
+                <a href="/">Pagamento</a>
+            </li>
+            <li>
+                <a href="/">Troca e Devoluções</a>
+            </li>
+            <li>
+                <a href="/">Dúvidas Frequentes</a>
+            </li>
+        </ul>
+    },
+    {
+        title: 'Fale Conosco',
+        subTitle: <ul>
+                    <b>Atendimento Ao Consumidor</b>
+                    <li>
+                        <a href="(11) 4159 9504">(11) 4159 9504</a>
+                    </li>
+                    <b>Atendmento Online</b>
+                    <li>
+                        <a href="(11) 99433-8825">(11) 99433-8825</a>
+                    </li>
+                </ul>
+    },
+    ]
+
+    return (
+        <>
+            <div className={styles['container']}>
+                {text.map(({title, subTitle}) => (
+                    <FooterLinksAccordion title={title} content={subTitle}/>
+                ))}
+            </div>
+        </>
+    )
+}
+
+
+export default FooterLinksMobile;
\ No newline at end of file
diff --git a/react-ts/src/components/MenuMobile/ComponentMobile.tsx b/react-ts/src/components/MenuMobile/ComponentMobile.tsx
index c63f7b6..b18802a 100644
--- a/react-ts/src/components/MenuMobile/ComponentMobile.tsx
+++ b/react-ts/src/components/MenuMobile/ComponentMobile.tsx
@@ -1,11 +1,9 @@
-import { useState } from 'react';
 
 import styles from './Component.module.scss';
 
 import UserAccount from '../UserAccount/UseAccount';
 import CloseMobile from '../../assets/images/CloseMobile.svg';
 
-
 const MenuComponent = () => {
         
     return (
diff --git a/react-ts/src/components/MenuMobile/MenuMobile.tsx b/react-ts/src/components/MenuMobile/MenuMobile.tsx
index 41ef38d..cd2f281 100644
--- a/react-ts/src/components/MenuMobile/MenuMobile.tsx
+++ b/react-ts/src/components/MenuMobile/MenuMobile.tsx
@@ -6,10 +6,11 @@ import MenuComponent from './ComponentMobile';
 import OpenMobile from '../../assets/images/OpenMobile.svg';
 
 const MenuMobile = () => {
+
     const  [IsOpen, setIsOpen] = useState(false);
 
-    function openModal (): void {
-        setIsOpen(true);
+   const openModal = () => {
+        setIsOpen(true)
     }
     
     return (
diff --git a/react-ts/src/components/NewsLetter/NewsLetter.module.scss b/react-ts/src/components/NewsLetter/NewsLetter.module.scss
index a3438ab..08df6bb 100644
--- a/react-ts/src/components/NewsLetter/NewsLetter.module.scss
+++ b/react-ts/src/components/NewsLetter/NewsLetter.module.scss
@@ -75,8 +75,7 @@
                 line-height: 16px;
             }
             &__input-button {
-                display: flex;
-                align-items: center;
+                flex-direction: column;
                 row-gap: 16px;
                 input {
                     max-width: 992px;
diff --git a/react-ts/src/components/SocialMedia/SocialMedia.module.scss b/react-ts/src/components/SocialMedia/SocialMedia.module.scss
new file mode 100644
index 0000000..e5b5b8d
--- /dev/null
+++ b/react-ts/src/components/SocialMedia/SocialMedia.module.scss
@@ -0,0 +1,36 @@
+@import '../../styles/utils/Variables.scss'; 
+
+
+.container {
+    display: flex;
+    flex-direction: column;
+    row-gap: 12px;
+    &__picture {
+        display: flex;
+        column-gap: 10px;
+    }
+    a {
+        font-family: $font-family;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 16px;
+        color: $color-black2;
+    }
+}
+
+
+@media only screen and (min-width: 2500px) {
+    .container {
+        &__picture {
+            img {
+                width: 70px;
+                height: 70px;
+            }
+        }
+        a {
+            font-size: 28px;
+            line-height: 33px;
+        }
+    }
+}
\ No newline at end of file
diff --git a/react-ts/src/components/SocialMedia/SocialMedia.tsx b/react-ts/src/components/SocialMedia/SocialMedia.tsx
new file mode 100644
index 0000000..29824a4
--- /dev/null
+++ b/react-ts/src/components/SocialMedia/SocialMedia.tsx
@@ -0,0 +1,28 @@
+import styles from './SocialMedia.module.scss';
+
+import Facebook from '../../assets/images/Facebook.svg';
+import Instagram from '../../assets/images/Instagram.svg';
+import Twitter from '../../assets/images/Twitter.svg';
+import YouTube from '../../assets/images/YouTube.svg';
+import Linkedin from '../../assets/images/Linkedin.svg';
+
+
+const SocialMedia = () => {
+    return (
+        <div className={styles['container']}>
+            <picture className={styles['container__picture']}>
+                <img src={Facebook} alt="Facebook" />
+                <img src={Instagram} alt="Instagram" />
+                <img src={Twitter} alt="Twitter" />
+                <img src={YouTube} alt="YouTube" />
+                <img src={Linkedin} alt="Linkedin" />
+            </picture>
+            <a href="/">
+                www.loremipsum.com
+            </a>
+        </div>
+    )
+}
+
+
+export default SocialMedia;
\ No newline at end of file
diff --git a/react-ts/src/components/Whatsap/WhatsApp.module.scss b/react-ts/src/components/Whatsapp/WhatsApp.module.scss
similarity index 100%
rename from react-ts/src/components/Whatsap/WhatsApp.module.scss
rename to react-ts/src/components/Whatsapp/WhatsApp.module.scss
diff --git a/react-ts/src/components/Whatsap/WhatsApp.tsx b/react-ts/src/components/Whatsapp/WhatsApp.tsx
similarity index 100%
rename from react-ts/src/components/Whatsap/WhatsApp.tsx
rename to react-ts/src/components/Whatsapp/WhatsApp.tsx