Permalink
Browse files

Implement simple example of video list

  • Loading branch information...
jpetitcolas committed Feb 20, 2017
1 parent 01f05aa commit fc5b077858295e9f192a8d61d29937edd85fa46b
Showing with 117 additions and 65 deletions.
  1. +0 −24 src/App.css
  2. +0 −21 src/App.js
  3. +0 −8 src/App.test.js
  4. +20 −0 src/Video.js
  5. +17 −0 src/VideoList.js
  6. +14 −0 src/VideoMetas.js
  7. +26 −0 src/data.js
  8. +36 −3 src/index.css
  9. +4 −2 src/index.js
  10. +0 −7 src/logo.svg

This file was deleted.

Oops, something went wrong.

This file was deleted.

Oops, something went wrong.

This file was deleted.

Oops, something went wrong.
@@ -0,0 +1,20 @@
import React from 'react';
import VideoMetas from './VideoMetas.js';

export const Video = ({ metas, picture, title }) => (
<div className="video">
<img
src={picture}
alt={title}
/>
<div className="infos">
<h2 className="title">{title}</h2>
<VideoMetas
duration={metas.duration}
views={metas.views}
/>
</div>
</div>
);

export default Video;
@@ -0,0 +1,17 @@
import React from 'react';
import Video from './Video';

export const VideoList = ({ videos }) => (
<div className="videos-list">
{videos.map(video => (
<Video
key={video.title}
title={video.title}
metas={video.metas}
picture={video.picture}
/>
))}
</div>
);

export default VideoList;
@@ -0,0 +1,14 @@
import React from 'react';

const Metas = ({ duration, views }) => (
<div className="video-metas">
<div className="duration">
{duration} minute{duration > 1 ? 's' : ''}
</div>
<div className="views">
{views} vue{views > 1 ? 's' : ''}
</div>
</div>
);

export default Metas;
@@ -0,0 +1,26 @@
export default [
{
title: "Une Nuit à Berlin",
picture: "http://lorempixel.com/800/450/nightlife/7/",
metas: {
views: 11530,
duration: 92,
}
},
{
title: "Touaregs des temps modernes",
picture: "http://lorempixel.com/800/450/people/7/",
metas: {
views: 49520,
duration: 123,
},
},
{
title: "Géologie du Cétacé",
picture: "http://lorempixel.com/800/450/nature/3/",
metas: {
views: 8953,
duration: 24,
},
}
];
@@ -1,5 +1,38 @@
body {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 18px;
padding: 1rem;
font-family: Arial;
}

.videos-list {
max-width: 600px;
}

.video {
display: flex;
align-items: center;
height: 180px;
margin-bottom: 1rem;
}

.video .title {
margin: 0 0 0.5rem 0;
}

.video img {
width: 300px;
float: left;
margin-right: 1rem;
}

.video-metas {
display: flex;
}

.video-metas .duration {
flex: 1 0 0;
}

.video-metas .views {
flex: 1 0 0;
}
@@ -1,9 +1,11 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

import videos from './data';
import VideoList from './VideoList';

ReactDOM.render(
<App />,
<VideoList videos={videos} />,
document.getElementById('root')
);

This file was deleted.

Oops, something went wrong.

0 comments on commit fc5b077

Please sign in to comment.