Add WeeklySongListItem component

src/App.js

@@ -1,27 +1,15 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
-import './App.css';
+import WeeklySongListItem from './components/WeeklySongListItem';
 
 class App extends Component {
   render() {
-    return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-          </p>
-          <a
-            className="App-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a>
-        </header>
-      </div>
-    );
+    return <div className="App">
+      <WeeklySongListItem
+        order="01"
+        title="Em Không Thể"
+        singer="Tiên Tiên, Touliver"
+        viewCount={3000} />
+    </div>;
   }
 }
 

src/components/WeeklySongListItem.css

@@ -0,0 +1,32 @@
+.WeeklySongListItem {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 16px 10px;
+  box-sizing: border-box;
+  border-bottom: 1px solid #DDD;
+  font-family: Arial, sans-serif;
+}
+
+.WeeklySongListItem .order {
+  font-size: 20px;
+  width: 35px;
+  text-align: center;
+}
+
+.WeeklySongListItem .info {
+  flex: 1;
+}
+
+.WeeklySongListItem .title {
+  font-size: 14px;
+  margin-bottom: 6px;
+  margin-top: 0;
+}
+
+.WeeklySongListItem .singer,
+.WeeklySongListItem .view-count {
+  font-size: 12px;
+  color: #888;
+  margin: 0;
+}

src/components/WeeklySongListItem.js

@@ -0,0 +1,32 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import './WeeklySongListItem.css';
+
+class WeeklySongListItem extends Component {
+  render() {
+    const { order, title, singer, viewCount } = this.props;
+    return <div className="WeeklySongListItem">
+      <div className="order">{order}</div>
+      <div className="info">
+        <p className="title">{title}</p>
+        <p className="singer">{singer}</p>
+      </div>
+      <div className="view-count">{viewCount.toLocaleString()}</div>
+    </div>
+  }
+}
+
+WeeklySongListItem.defaultProps = {
+  viewCount: 0
+};
+
+WeeklySongListItem.propTypes = {
+  order: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  singer: PropTypes.string.isRequired,
+  /** View count */
+  viewCount: PropTypes.number
+};
+
+export default WeeklySongListItem;