Create Footer component

TheeDouglasAM3 · Jan 25, 2021 · c8dd5f1 · c8dd5f1
1 parent 6dd2e8e
commit c8dd5f1
Showing 1 changed file with 46 additions and 0 deletions.
diff --git a/pokemon-quiz-nextjs/src/components/Footer/index.js b/pokemon-quiz-nextjs/src/components/Footer/index.js
@@ -0,0 +1,46 @@
+import styled from 'styled-components'
+
+// src/components/Footer/index.js
+const FooterWrapper = styled.footer`
+ background-color: #000000CC;
+ padding: 20px;
+ display: flex;
+ align-items: center;
+ border-radius: 4px; 
+ img {
+ width: 58px;
+ margin-right: 23px;
+ }
+ a {
+ color: white;
+ text-decoration: none;
+ transition: .3s;
+ &:hover,
+ &:focus {
+ opacity: .5;
+ }
+ span {
+ text-decoration: underline;
+ }
+ }
+`;
+
+export default function Footer(props) {
+ return (
+ // eslint-disable-next-line react/jsx-props-no-spreading
+ <FooterWrapper {...props}>
+ <a href="https://www.alura.com.br/">
+ <img src="https://www.alura.com.br/assets/img/alura-logo-white.1570550707.svg" alt="Logo Alura" />
+ </a>
+ <p>
+ Orgulhosamente criado durante
+ {' '}
+ a
+ {' '}
+ <a href="https://www.alura.com.br/">
+ <span>Imersão React da Alura</span>
+ </a>
+ </p>
+ </FooterWrapper>
+ );
+}