part 03

Author: rwieruch

src/components/App.css

@@ -0,0 +1,7 @@
+.app {
+  margin: 20px;
+}
+
+.interactions, .error {
+  text-align: center;
+}

src/components/Stories.css

@@ -0,0 +1,17 @@
+.stories {
+  margin: 20px 0;
+}
+
+.stories-header {
+  display: flex;
+  line-height: 24px;
+  font-size: 16px;
+  padding: 0 10px;
+  justify-content: space-between;
+}
+
+.stories-header > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 0 5px;
+}

src/components/Stories.js

@@ -2,14 +2,51 @@ import React from 'react';
 import './Stories.css';
 import Story from './Story';
 
+const COLUMNS = {
+  title: {
+    label: 'Title',
+    width: '40%',
+  },
+  author: {
+    label: 'Author',
+    width: '30%',
+  },
+  comments: {
+    label: 'Comments',
+    width: '10%',
+  },
+  points: {
+    label: 'Points',
+    width: '10%',
+  },
+  archive: {
+    width: '10%',
+  },
+};
+
 const Stories = ({ stories }) =>
   <div className="stories">
+    <StoriesHeader columns={COLUMNS} />
+
     {(stories || []).map(story =>
       <Story
         key={story.objectID}
         story={story}
+        columns={COLUMNS}
       />
     )}
   </div>
 
+const StoriesHeader = ({ columns }) =>
+  <div className="stories-header">
+    {Object.keys(columns).map(key =>
+      <span
+        key={key}
+        style={{ width: columns[key].width }}
+      >
+        {columns[key].label}
+      </span>
+    )}
+  </div>
+
 export default Stories;

src/components/Story.css

@@ -0,0 +1,15 @@
+.story {
+  display: flex;
+  line-height: 24px;
+  white-space: nowrap;
+  margin: 10px 0;
+  padding: 10px;
+  background: #ffffff;
+  border: 1px solid #e3e3e3;
+}
+
+.story > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 0 5px;
+}

src/components/Story.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import './Story.css';
 
-const Story = ({ story }) => {
+const Story = ({ story, columns }) => {
   const {
     title,
     url,
@@ -12,12 +12,20 @@ const Story = ({ story }) => {
 
   return (
     <div className="story">
-      <span>
+      <span style={{ width: columns.title.width }}>
         <a href={url}>{title}</a>
       </span>
-      <span>{author}</span>
-      <span>{num_comments}</span>
-      <span>{points}</span>
+      <span style={{ width: columns.author.width }}>
+        {author}
+      </span>
+      <span style={{ width: columns.comments.width }}>
+        {num_comments}
+      </span>
+      <span style={{ width: columns.points.width }}>
+        {points}
+      </span>
+      <span style={{ width: columns.archive.width }}>
+      </span>
     </div>
   );
 }

src/index.css

@@ -1,5 +1,60 @@
 body {
+  color: #222;
+  background: #f4f4f4;
+  font: 400 14px CoreSans, Arial,sans-serif;
+}
+
+a {
+  color: #222;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+ul, li {
+  list-style: none;
+  padding: 0;
   margin: 0;
+}
+
+input {
+  padding: 10px;
+  border-radius: 5px;
+  outline: none;
+  margin-right: 10px;
+  border: 1px solid #dddddd;
+}
+
+button {
+  padding: 10px;
+  border-radius: 5px;
+  border: 1px solid #dddddd;
+  background: transparent;
+  color: #808080;
+  cursor: pointer;
+}
+
+button:hover {
+  color: #222;
+}
+
+.button-inline {
+  border-width: 0;
+  background: transparent;
+  color: inherit;
+  text-align: inherit;
+  -webkit-font-smoothing: inherit;
   padding: 0;
-  font-family: sans-serif;
+  font-size: inherit;
+  cursor: pointer;
+}
+
+.button-active {
+  border-radius: 0;
+  border-bottom: 1px solid #38BB6C;
 }
+
+*:focus {
+  outline: none;
+}