diff --git a/src/App.js b/src/App.js index 7e261ca..1e98e02 100644 --- a/src/App.js +++ b/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>; } } diff --git a/src/components/WeeklySongListItem.css b/src/components/WeeklySongListItem.css new file mode 100644 index 0000000..c5b2081 --- /dev/null +++ b/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; +} diff --git a/src/components/WeeklySongListItem.js b/src/components/WeeklySongListItem.js new file mode 100644 index 0000000..084b105 --- /dev/null +++ b/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;