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

3
src/pages/Movie.jsx
View file

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

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

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