Refactor thoughts list to display date, style and sort by date

Author: PRbsas

components/Thoughts.js

@@ -8,32 +8,51 @@ import { thoughts } from '../data/thoughts.json'
 const Title = styled.h3`
   cursor: pointer;
   margin: 0 auto;
-  font-size: 32px;
-  font-weight: 400;
-
-  &:hover {
-    font-weight: 800;
-  }
-
+  font-size: 48px;
+  font-weight: 700;
+  line-height: 1.25;
+  margin-top: 32px;
+  margin-bottom: 16px;
   ${media.phone`
       padding-left: 50px;
     `}
 `
 
+const Date = styled.p`
+  font-family: "SF Mono","Roboto Mono",Menlo,monospace;
+  color: inherit;
+  margin-right: 20px;
+  ${media.phone`
+      margin-top: 10px;
+      display: flex;
+      float: right;
+    `}
+`
+
+const Container = styled.div`
+  margin-bottom: 64px;
+`
+
+const thoughtsByDate = thoughts.reverse()
+
 export default () => (
   <Wrapper>
     {
-      thoughts.map(({ id, title }) => (
+      thoughtsByDate.map(({ id, title, date }) => (
         <Thoughts
           id={id}
           key={id}
           title={title}
+          date={date}
         />
       ))
     }
   </Wrapper>
 )
 
-const Thoughts = ({ id, title }) => (
-  <Link prefetch href={`/thoughts/${id}`}><Title>{ title }</Title></Link>
+const Thoughts = ({ id, title, date }) => (
+  <Container>
+    <Link prefetch href={`/thoughts/${id}`}><Title>{ title }</Title></Link>
+    <Date>{date}</Date>
+  </Container>
 )

data/thoughts.json

@@ -1,40 +1,49 @@
 {
   "thoughts": [
-    {
-      "id": "why-programming",
-      "title": "Why Programming"
-    },
     {
       "id": "how-to-start-a-project",
-      "title": "How to Start a Project"
+      "title": "How to Start a Project",
+      "date": "Nov 09 2017"
     },
     {
       "id": "behind-the-scenes-a-sinatra-application",
-      "title": "Behind the Scenes, a Sinatra Application"
+      "title": "Behind the Scenes, a Sinatra Application",
+      "date": "Dec 20 2017"
+    },
+    {
+      "id": "why-programming",
+      "title": "Why Programming",
+      "date": "Feb 15 2018"
     },
     {
       "id": "friendly-urls-for-your-rails-app-with-friendlyId",
-      "title": "Friendly URLs for your Rails App with FriendlyId"
+      "title": "Friendly URLs for your Rails App with FriendlyId",
+      "date": "Feb 23 2018"
     },
     {
       "id": "acts-as-votable-gem-for-rails-apps",
-      "title": "Acts As Votable gem for Rails Apps"
+      "title": "Acts As Votable gem for Rails Apps",
+      "date": "Feb 23 2018"
     },
     {
       "id": "devise-and-omniauth-authentication-with-rails",
-      "title": "Devise and OmniAuth Authentication with Rails"
+      "title": "Devise and OmniAuth Authentication with Rails",
+      "date": "Feb 23 2018"
     },
     {
       "id": "devit-on-rails",
-      "title": "Devit on Rails"
+      "title": "Devit on Rails",
+      "date": "Feb 24 2018"
     },
     {
       "id": "rails-api-and-javascript",
-      "title": "Rails API and JavaScript"
+      "title": "Rails API and JavaScript",
+      "date": "Mar 10 2018"
     },
     {
       "id": "react-redux-and-rails-api",
-      "title": "React, Redux and Rails API"
+      "title": "React, Redux and Rails API",
+      "date": "May 07 2018"
     }
   ]
 }