Henry-Hiles/movie-react-app
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Switch to react-icons

Browse source
This commit is contained in:
Henry Hiles 2022-12-05 12:15:17 -05:00
parent 4911626e20
commit a8b28b0b22
5 changed files with 7 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
bun.lockb
View file

Binary file not shown.

1
package.json
View file

@ -11,6 +11,7 @@
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.7.1",
"react-router-dom": "^6.4.2",
"react-router-hash-link": "^2.4.3"
},

5
src/components/Jumbotron.jsx
View file

@ -1,5 +0,0 @@
// const Jumbotron = ({ movie }) => (
// )
// export default Jumbotron

11
src/components/Rate.jsx
View file

@ -1,4 +1,5 @@
import { useState } from "react"
import { AiFillStar } from "react-icons/ai"
import styles from "styles/Rate.module.css"
const Rate = ({ rating, setRating }) => {
@ -21,15 +22,7 @@ const Rate = ({ rating, setRating }) => {
onMouseEnter={() => setHover(index)}
onMouseLeave={() => setHover()}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="30"
height="30"
fill="currentColor"
viewBox="0 0 16 16"
>
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
<AiFillStar size={30} />
</button>
)
})}

26
src/pages/Movie.jsx
View file

@ -5,6 +5,7 @@ import useLocalStorage from "hooks/useLocalStorage"
import Rate from "components/Rate"
import TopBar from "components/TopBar"
import { HashLink } from "react-router-hash-link"
import { AiOutlineArrowDown, AiFillStar } from "react-icons/ai"
const Movie = () => {
const { movieId } = useParams()
@ -80,18 +81,7 @@ const Movie = () => {
)}
<HashLink to="#bottom" className={styles.More}>
<p>More info</p>
<svg
xmlns="http://www.w3.org/2000/svg"
width="30"
height="30"
fill="currentColor"
viewBox="0 0 16 16"
>
<path
fillRule="evenodd"
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>
<AiOutlineArrowDown />
</HashLink>
</div>
</div>
@ -104,15 +94,7 @@ const Movie = () => {
<span>
Average Rating: {movie?.averageVote.toFixed(1)}
</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
viewBox="0 0 16 16"
>
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
<AiFillStar />
</p>
</div>
<div className={styles.Section}>
@ -140,7 +122,7 @@ const Movie = () => {
src={
actor.profile_path
? `https://image.tmdb.org/t/p/w200${actor.profile_path}`
: "../placeholder.svg" //`https://ui-avatars.com/api/?name=${encodeURIComponent(actor.name)}&size=300`
: "../placeholder.svg"
}
alt={actor.name}
/>