forked from M3-Academy/desafio-react-e-typescript
feature(BackToTopButton): Adiciona um botão para voltar ao topo da página
This commit is contained in:
parent
7328954de7
commit
8611cd75c2
@ -8,36 +8,16 @@
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta name="description" content="Web site created using create-react-app" />
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
|
||||
<title>Institucional</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
|
||||
</html>
|
BIN
src/assets/imgs/whatsapp.png
Normal file
BIN
src/assets/imgs/whatsapp.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.0 KiB |
26
src/components/BackToTop/BackToTopButton.module.scss
Normal file
26
src/components/BackToTop/BackToTopButton.module.scss
Normal file
@ -0,0 +1,26 @@
|
||||
.button__container {
|
||||
position: fixed;
|
||||
bottom: 190px;
|
||||
right: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
bottom: 28px;
|
||||
}
|
||||
|
||||
& button {
|
||||
margin-top: 5px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background: #c4c4c4;
|
||||
color: white;
|
||||
|
||||
& img {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
}
|
||||
}
|
23
src/components/BackToTop/BackToTopButton.tsx
Normal file
23
src/components/BackToTop/BackToTopButton.tsx
Normal file
@ -0,0 +1,23 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import whatsapp from "../../assets/imgs/whatsapp.png";
|
||||
import arrow from "../../assets/svgs/arrowTop.svg";
|
||||
import style from "./BackToTopButton.module.scss";
|
||||
|
||||
function BackToTopButton() {
|
||||
const scrollToTop = () => {
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={style.button__container}>
|
||||
<a href="https://web.whatsapp.com/">
|
||||
<img src={whatsapp} alt="" />
|
||||
</a>
|
||||
<button onClick={scrollToTop}>
|
||||
<img src={arrow} alt="" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default BackToTopButton;
|
@ -2,6 +2,7 @@ import React from "react";
|
||||
import { Header } from "../components/header/Header";
|
||||
import { Main } from "../components/main/Main";
|
||||
import { Footer } from "../components/footer/Footer";
|
||||
import BackToTopButton from "../components/BackToTop/BackToTopButton";
|
||||
|
||||
const FaleConosco = () => {
|
||||
return (
|
||||
@ -9,6 +10,7 @@ const FaleConosco = () => {
|
||||
<Header />
|
||||
<Main />
|
||||
<Footer />
|
||||
<BackToTopButton />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user