Fix anchors

This commit is contained in:
Henry Hiles 2022-12-05 12:03:09 -05:00
parent 36a099db5f
commit 4911626e20
3 changed files with 5 additions and 3 deletions

BIN
bun.lockb Executable file

Binary file not shown.

View file

@ -11,7 +11,8 @@
"dependencies": { "dependencies": {
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-router-dom": "^6.4.2" "react-router-dom": "^6.4.2",
"react-router-hash-link": "^2.4.3"
}, },
"devDependencies": { "devDependencies": {
"@types/react": "^18.0.17", "@types/react": "^18.0.17",

View file

@ -4,6 +4,7 @@ import styles from "styles/Movie.module.css"
import useLocalStorage from "hooks/useLocalStorage" import useLocalStorage from "hooks/useLocalStorage"
import Rate from "components/Rate" import Rate from "components/Rate"
import TopBar from "components/TopBar" import TopBar from "components/TopBar"
import { HashLink } from "react-router-hash-link"
const Movie = () => { const Movie = () => {
const { movieId } = useParams() const { movieId } = useParams()
@ -77,7 +78,7 @@ const Movie = () => {
{movie?.tagline && ( {movie?.tagline && (
<p className={styles.Tagline}>{movie?.tagline}</p> <p className={styles.Tagline}>{movie?.tagline}</p>
)} )}
<a href="#bottom" className={styles.More}> <HashLink to="#bottom" className={styles.More}>
<p>More info</p> <p>More info</p>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -91,7 +92,7 @@ const Movie = () => {
d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"
/> />
</svg> </svg>
</a> </HashLink>
</div> </div>
</div> </div>
<div className={styles.Bottom} id="bottom"> <div className={styles.Bottom} id="bottom">