Implement simple example of video list

Author: jpetitcolas

src/App.css

@@ -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;

src/App.js

@@ -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;

src/App.test.js

@@ -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;

src/Video.js

@@ -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,
+        },
+    }
+];

src/VideoList.js

@@ -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;
 }

src/VideoMetas.js

@@ -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')
 );