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>
</>
)