refactored Header component

This commit is contained in:
andres alcocer
2021-10-08 17:54:36 -04:00
parent c38dd6d149
commit d952c89719

View File

@@ -3,42 +3,33 @@ import React from 'react'
import PlayLogo from '../static/images/play-button.svg'
import AddLogo from '../static/images/add.svg'
const Header = ({ movie }) => {
const Header = ({ movie: { backdrop_path, name, overview } }) => {
const backgroundStyle = {
backgroundSize: 'cover',
backgroundImage: `url(https://image.tmdb.org/t/p/original/${movie.backdrop_path})`,
backgroundImage: `url(https://image.tmdb.org/t/p/original/${backdrop_path})`,
backgroundPosition: 'center',
}
return (
movie && (
<header
style={{
backgroundSize: 'cover',
backgroundImage: `url(https://image.tmdb.org/t/p/original/${movie.backdrop_path})`,
backgroundPosition: 'center',
}}
className='header'
>
<div className='header__container'>
<h1 className='header__container-heading'>{movie.name}</h1>
<button
onClick={() => alert('not a movie!')}
className='header__container-btnPlay'
>
<PlayLogo className='header__container-btnMyList-play' />
Play
</button>
<header style={backgroundStyle} className='header'>
<div className='header__container'>
<h1 className='header__container-heading'>{name}</h1>
<button
onClick={() => alert('not a movie!')}
className='header__container-btnPlay'
>
<PlayLogo className='header__container-btnMyList-play' />
Play
</button>
<button className='header__container-btnMyList'>
<AddLogo className='header__container-btnMyList-add' />
My List
</button>
<p className='header__container-overview'>{movie.overview}</p>
</div>
<div className='header--fadeBottom'></div>
</header>
)
<button className='header__container-btnMyList'>
<AddLogo className='header__container-btnMyList-add' />
My List
</button>
<p className='header__container-overview'>{overview}</p>
</div>
<div className='header--fadeBottom'></div>
</header>
)
}