Merge pull request #24 from untalsanders/develop

- chore: made-in in footer - fix: fixed flexibility
untalsanders · Apr 1, 2024 · 9f84d2e · 9f84d2e
2 parents a2c7ad2 + fe391b8
commit 9f84d2e
Show file tree

Hide file tree

Showing 3 changed files with 119 additions and 3 deletions.
diff --git a/public/images/flag-argentina.svg b/public/images/flag-argentina.svg
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -2,12 +2,22 @@
 
 import styles from '@styles/Footer.module.css'
 
+const Copyright = () => <div>Copyright &copy; 2024 Sanders Gutiérrez. All rights reserved.</div>
+
+const MadeIn = () => (
+    <div className={styles.Footer__Content_MadeIn}>
+        <span>Made in Argentina</span>
+        <img src="/images/flag-argentina.svg" alt="flag-argentina" width={28} height={20} />
+    </div>
+)
+
 export function Footer() {
     return (
         <footer className={styles.footer}>
-            <div className="container">
-                <div>Copyright &copy; 2024 Sanders Gutiérrez. All rights reserved.</div>
+            <div className={`container ${styles.Footer__Content}`}>
+                <Copyright />
+                <MadeIn />
             </div>
         </footer>
     )
-}
+}
diff --git a/src/styles/Footer.module.css b/src/styles/Footer.module.css
@@ -2,4 +2,31 @@
     background-color: #1e1e1e;
     color: white;
     padding: 1rem;
+    text-align: center;
+}
+
+.Footer__Content {
+    display: flex;
+    flex-direction: column;
+    gap: .5rem;
+    align-items: center;
+    /* flex-wrap: wrap;
+    justify-content: space-between; */
+
+    @media (width > 50rem) {
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: space-between;
+    }
+}
+
+.Footer__Content_MadeIn {
+    display: flex;
+    align-items: center;
+    gap: .75rem;
+
+    img {
+        width: 20;
+        height: 15;
+    }
 }