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

Some small improvements

Browse source
This commit is contained in:
“Henry-Hiles” 2022-11-08 15:43:47 -05:00
parent bac3b7e700
commit ebf8b8419a
6 changed files with 112 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

78
src/pages/Actor.jsx
View file

@ -66,50 +66,38 @@ const Actor = () => {
<>
<TopBar />
<div className={styles.Container}>
<hr />
<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 : ""
<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)
}
>
{actor.biography}
</p>
<p
className={`${
collapsed ? styles.Collapsed : ""
} ${styles.Biography}`}
>
{actor.biography}
</p>
<p className={styles.ReadMore}>
{collapsed ? "Read More" : "Read Less"}
</p>
<p>{collapsed}</p>
</a>
) : (
<p>No biography available.</p>
)}
</div>
</div>
<div className={styles.Section}>
<h2>Images</h2>
<div className={styles.Images}>
{images?.profiles.map((image) => (
<img
key={image.file_path}
className={styles.Image}
src={`https://image.tmdb.org/t/p/w300${image.file_path}`}
/>
))}
<p className={styles.ReadMore}>
{collapsed ? "Read More" : "Read Less"}
</p>
</a>
) : (
<p>No biography available.</p>
)}
</div>
</div>
</div>
<div className={styles.Section}>
<h2>Movies</h2>
<div className={styles.Credits}>
@ -125,6 +113,18 @@ const Actor = () => {
))}
</div>
</div>
<div className={styles.Section}>
<h2>Images</h2>
<div className={styles.Images}>
{images?.profiles.map((image) => (
<img
key={image.file_path}
className={styles.Image}
src={`https://image.tmdb.org/t/p/w300${image.file_path}`}
/>
))}
</div>
</div>
</div>
</>
)

31
src/pages/Movie.jsx
View file

@ -65,15 +65,32 @@ const Movie = () => {
backgroundImage: `url(${movie?.backdropUrl})`,
}}
>
<img className={styles.Thumb} src={movie?.posterUrl} />
<div className={styles.Summary}>
<h2 className={styles.Title}>
<h1 className={styles.Title}>
{movie?.title} - {movie?.year}
</h2>
<p>{movie?.tagline}</p>
<p className={styles.Overview}>{movie?.overview}</p>
</h1>
<p className={styles.Tagline}>{movie?.tagline}</p>
<a href="#bottom" className={styles.More}>
<p>More info</p>
<svg
xmlns="http://www.w3.org/2000/svg"
width="30"
height="30"
fill="currentColor"
class="bi bi-chevron-down"
viewBox="0 0 16 16"
>
<path
fill-rule="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>
</a>
</div>
</div>
<div className={styles.Bottom}>
<div className={styles.Bottom} id="bottom">
<div className={styles.Tags}>
{movie?.genres.map((genre) => (
<p key={genre}>{genre}</p>
@ -93,6 +110,10 @@ const Movie = () => {
</svg>
</p>
</div>
<div className={styles.Section}>
<h1 className={styles.Header}>Overview</h1>
<p className={styles.Overview}>{movie?.overview}</p>
</div>
<div className={styles.Section}>
<h1 className={styles.Header}>Your Rating</h1>
<Rate rating={rating} setRating={setRating} />