inserindo react icons no footer

Co-authored-by: Giovannabbottino <[email protected]> Co-authored-by: KessJhones <[email protected]>
UnBArqDsw2021-1 · Oct 12, 2021 · e1672dc · e1672dc
1 parent bb00555
commit e1672dc
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 19 deletions.
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
@@ -1,5 +1,7 @@
 import Image from 'next/image';
 import Link from 'next/link';
+import { AiFillGithub } from 'react-icons/ai';
+import { IoGlobeOutline } from 'react-icons/io5';
 
 import Logo from '@public/img/logo.svg';
 
@@ -8,28 +10,56 @@ import * as S from './styles';
 const Footer = () => {
   return (
     <S.Footer>
-      <S.Logo>
-        <Image
-          src={Logo}
-          width={50}
-          height={50}
-          objectFit="contain"
-          alt="logo"
-        />
-        <h3>MYCHINE</h3>
-      </S.Logo>
+      <Link href="/" passHref>
+        <S.Logo>
+          <Image
+            src={Logo}
+            width={50}
+            height={50}
+            objectFit="contain"
+            alt="logo"
+          />
+          <h3>MYCHINE</h3>
+        </S.Logo>
+      </Link>
       <S.Links>
         <Link href="/" passHref>
-          Termos de uso
+          <S.CustomLink> Termos de uso </S.CustomLink>
         </Link>
-        <Link href="/" passHref>
-          Documentação
+        <Link
+          href="https://unbarqdsw2021-1.github.io/2021.1_G7_Mychine_docs/"
+          passHref
+        >
+          <S.CustomLink> Documentação </S.CustomLink>
         </Link>
-        <Link href="/" passHref>
-          Repositório
+        <Link
+          href="https://github.com/UnBArqDsw2021-1/2021.1_G7_Mychine_App"
+          passHref
+        >
+          <S.CustomLink> Repositório</S.CustomLink>
         </Link>
         <Link href="/" passHref>
-          Sobre
+          <S.CustomLink> Sobre </S.CustomLink>
+        </Link>
+      </S.Links>
+      <S.Links>
+        <Link
+          href="https://github.com/UnBArqDsw2021-1/2021.1_G7_Mychine_App"
+          passHref
+        >
+          <S.CustomLink>
+            {' '}
+            <AiFillGithub color="black" size={30} />{' '}
+          </S.CustomLink>
+        </Link>
+        <Link
+          href="https://unbarqdsw2021-1.github.io/2021.1_G7_Mychine_docs/"
+          passHref
+        >
+          <S.CustomLink>
+            {' '}
+            <IoGlobeOutline color="black" size={30} />{' '}
+          </S.CustomLink>
         </Link>
       </S.Links>
     </S.Footer>

diff --git a/src/components/Footer/styles.tsx b/src/components/Footer/styles.tsx
@@ -4,6 +4,12 @@ import styled, { css } from 'styled-components';
 export const Footer = styled.footer`
   grid-area: footer;
   grid-column: 1/-1;
+  justify-self: center;
+  top: 8px;
+  display: block;
+  z-index: 1;
+  background: #00000050;
+
   align-items: center;
 `;
 
@@ -37,14 +43,28 @@ export const Links = styled.div`
   ${({ theme }) => css`
     display: flex;
     align-items: center;
+    text-align: center;
+
     gap: ${theme.spacings.large};
 
     @media (max-width: 600px) {
       gap: calc(${theme.spacings.large} / 2);
     }
+  `}
+`;
 
-    svg {
-      color: white;
-    }
+export const CustomLink = styled.a`
+  ${({ theme }) => css`
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: ${theme.spacings.small};
+    padding: 1rem;
+    color: black;
+    font-weight: ${theme.font.weight.light};
+    font-size: ${theme.font.sizes.medium};
+    text-decoration: none;
+    text-shadow: 1px 1px 1px #333;
+    cursor: pointer;
   `}
 `;