Youtube in React: trending videos
import React from 'react'; | |
import './Trending.scss'; | |
import {VideoPreview} from '../../components/VideoPreview/VideoPreview'; | |
import {SideBar} from '../SideBar/SideBar'; | |
export class Trending extends React.Component { | |
render() { | |
const previews = this.getVideoPreviews(); | |
return ( | |
<React.Fragment> | |
<SideBar/> | |
<div className='trending'> | |
{previews} | |
</div> | |
</React.Fragment> | |
); | |
} | |
getVideoPreviews() { | |
return this.props.videos.map(video => ( | |
<VideoPreview horizontal={true} expanded={true} video={video} key={video.id} pathname={'/watch'} | |
search={'?v=' + video.id}/>) | |
); | |
} | |
} | |
export default Trending; |
@import '../../styles/shared.scss'; | |
.trending { | |
display: grid; | |
grid: auto / auto; | |
padding-left: 10rem; | |
padding-top: 24px; | |
margin-left: $sidebar-left-width; | |
grid-row-gap: 10px; | |
max-width: 900px; | |
} | |
@media(max-width: 1200px) { | |
.trending { | |
padding-left: 10px; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment