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

Some more improvements

Browse source
This commit is contained in:
“Henry-Hiles” 2022-11-09 11:23:32 -05:00
parent ebf8b8419a
commit 6e35f9023c
3 changed files with 74 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

104
src/pages/Actor.jsx
View file

@ -41,22 +41,24 @@ const Actor = () => {
) )
const data = await response.json() const data = await response.json()
setCredits( setCredits(
data.cast.map((movie) => ({ data.cast
id: movie.id, .filter((movie) => movie.poster_path)
overview: movie.overview, .map((movie) => ({
adult: movie.adult, id: movie.id,
posterUrl: `https://image.tmdb.org/t/p/w342${movie.poster_path}`, overview: movie.overview,
backdropUrl: `https://image.tmdb.org/t/p/original${movie.backdrop_path}`, adult: movie.adult,
genres: movie.genre_ids.map((genreId) => posterUrl: `https://image.tmdb.org/t/p/w342${movie.poster_path}`,
GENRES.find((genre) => genre.id == genreId) backdropUrl: `https://image.tmdb.org/t/p/original${movie.backdrop_path}`,
), genres: movie.genre_ids.map((genreId) =>
title: movie.title, GENRES.find((genre) => genre.id == genreId)
releaseDate: movie.release_date, ),
year: movie.release_date.split("-")[0], title: movie.title,
averageVote: movie.vote_average, releaseDate: movie.release_date,
voteCount: movie.vote_count, year: movie.release_date.split("-")[0],
popularity: movie.popularity, averageVote: movie.vote_average,
})) voteCount: movie.vote_count,
popularity: movie.popularity,
}))
) )
} }
run() run()
@ -67,39 +69,51 @@ const Actor = () => {
<TopBar /> <TopBar />
<div className={styles.Container}> <div className={styles.Container}>
<div className={styles.Top}> <div className={styles.Top}>
<h1 className={styles.Name}>{actor?.name}</h1> <img
<div className={styles.Section}> src={`https://image.tmdb.org/t/p/w300${images?.profiles[0]?.file_path}`}
<h2>Biography</h2> alt={`Image of ${actor?.name}`}
<div> className={styles.Thumb}
{actor?.biography ? ( />
<a <div className={styles.Right}>
href="#" <h1 className={styles.Name}>{actor?.name}</h1>
className={styles.Collapse} <div className={styles.Section}>
onClick={() => <h1>Biography</h1>
setCollapsed((collapsed) => !collapsed) <div>
} {actor?.biography ? (
> <a
<p href="#"
className={`${ className={styles.Collapse}
collapsed ? styles.Collapsed : "" onClick={() =>
} ${styles.Biography}`} setCollapsed(
(collapsed) => !collapsed
)
}
> >
{actor.biography} <p
</p> className={`${
collapsed
? styles.Collapsed
: ""
} ${styles.Biography}`}
>
{actor.biography}
</p>
<p className={styles.ReadMore}> <p className={styles.ReadMore}>
{collapsed ? "Read More" : "Read Less"} {collapsed
</p> ? "Read More"
</a> : "Read Less"}
) : ( </p>
<p>No biography available.</p> </a>
)} ) : (
<p>No biography available.</p>
)}
</div>
</div> </div>
</div> </div>
</div> </div>
<div className={styles.Section}> <div className={styles.Section}>
<h2>Movies</h2> <h1>Movies</h1>
<div className={styles.Credits}> <div className={styles.Credits}>
{credits?.map((movie) => ( {credits?.map((movie) => (
<Link <Link
@ -108,13 +122,13 @@ const Actor = () => {
className={styles.Movie} className={styles.Movie}
> >
<img src={movie.posterUrl} /> <img src={movie.posterUrl} />
<span>{movie.title}</span> <h3>{movie.title}</h3>
</Link> </Link>
))} ))}
</div> </div>
</div> </div>
<div className={styles.Section}> <div className={styles.Section}>
<h2>Images</h2> <h1>Images</h1>
<div className={styles.Images}> <div className={styles.Images}>
{images?.profiles.map((image) => ( {images?.profiles.map((image) => (
<img <img

3
src/pages/Movie.jsx
View file

@ -79,11 +79,10 @@ const Movie = () => {
width="30" width="30"
height="30" height="30"
fill="currentColor" fill="currentColor"
class="bi bi-chevron-down"
viewBox="0 0 16 16" viewBox="0 0 16 16"
> >
<path <path
fill-rule="evenodd" 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" 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>

16
src/styles/Actor.module.css
View file

@ -5,8 +5,18 @@
color: white; color: white;
} }
.Top {
display: flex;
gap: 20px;
}
.Thumb {
height: 450px;
}
.Name { .Name {
margin-top: 10px; margin-top: 10px;
font-size: 3em;
} }
.Biography { .Biography {
@ -29,8 +39,10 @@
height: 100%; height: 100%;
} }
.Section div { .Right {
margin-left: 10px; display: flex;
flex-direction: column;
gap: 10px;
} }
.Collapsed { .Collapsed {