date formatting, category display

package-lock.json

@@ -11838,6 +11838,11 @@
       "resolved": "https://registry.npmjs.org/mock-fs/-/mock-fs-4.8.0.tgz",
       "integrity": "sha512-Gwj4KnJOW15YeTJKO5frFd/WDO5Mc0zxXqL9oHx3+e9rBqW8EVARqQHSaIXznUdljrD6pvbNGW2ZGXKPEfYJfw=="
     },
+    "moment": {
+      "version": "2.24.0",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
+      "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
+    },
     "mout": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/mout/-/mout-0.11.1.tgz",
@@ -16602,6 +16607,11 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
+    "react-moment": {
+      "version": "0.8.4",
+      "resolved": "https://registry.npmjs.org/react-moment/-/react-moment-0.8.4.tgz",
+      "integrity": "sha512-QhI19OcfhiAn60/O6bMR0w8ApXrPFCjv6+eV0I/P9/AswzjgEAx4L7VxMBCpS/jrythLa12Q9v88req+ys4YpA=="
+    },
     "react-router": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz",

package.json

@@ -23,10 +23,12 @@
     "classnames": "^2.2.6",
     "eslint": "^5.6.0",
     "is-url": "^1.2.4",
+    "moment": "^2.24.0",
     "query-string": "^6.2.0",
     "react": "^16.8.1",
     "react-dom": "^16.8.1",
     "react-helmet": "^5.2.0",
+    "react-moment": "^0.8.4",
     "react-router-dom": "^4.3.1",
     "react-transition-group": "^2.5.3",
     "slugify": "^1.3.4",

src/routes/Details/AssetDetails.module.scss

@@ -8,14 +8,14 @@
     color: $brand-grey-light;
     font-size: $font-size-large;
     border-bottom: 1px solid $brand-grey-lighter;
-    margin-bottom: $spacer / 2;
-    padding-bottom: $spacer / 2;
+    margin-bottom: $spacer / $line-height;
+    padding-bottom: $spacer / $line-height;
 }
 
 .metaPrimaryData {
     font-size: $font-size-small;
 
-    span {
+    > * {
         display: block;
         white-space: nowrap;
     }
@@ -25,13 +25,13 @@
         justify-content: space-between;
         flex-wrap: wrap;
 
-        span {
+        > * {
             flex: 0 0 48%;
         }
     }
 
     @media (min-width: $break-point--medium) {
-        span {
+        > * {
             flex: 0;
         }
     }
@@ -46,6 +46,7 @@
     margin-bottom: $spacer;
     list-style: none;
     padding-left: 0;
+    font-size: $font-size-small;
 
     li {
         width: 100%;

src/routes/Details/AssetDetails.tsx

@@ -1,5 +1,7 @@
 import React, { PureComponent } from 'react'
+import { Link } from 'react-router-dom'
 import Button from '../../components/atoms/Button'
+import Moment from 'react-moment'
 import styles from './AssetDetails.module.scss'
 
 interface AssetDetailsProps {
@@ -16,14 +18,28 @@ export default class AssetDetails extends PureComponent<AssetDetailsProps> {
         return (
             <>
                 <aside className={styles.metaPrimary}>
-                    <h2 className={styles.copyrightHolder}>
+                    <h2
+                        className={styles.copyrightHolder}
+                        title="Copyright Holder"
+                    >
                         {base.copyrightHolder}
                     </h2>
                     <div className={styles.metaPrimaryData}>
-                        <span>{base.dateCreated}</span>
-                        <span>json</span>
-                        <span>18.5 MB</span>
-                        {base.categories && <span>{base.categories[0]}</span>}
+                        <span title="Date published">
+                            <Moment
+                                date={base.dateCreated}
+                                format="L"
+                                interval={0}
+                            />
+                        </span>
+                        {base.categories ? (
+                            // TODO: Make this link to search for respective category
+                            <Link to={'search?q='}>{base.categories[0]}</Link>
+                        ) : (
+                            <Link to={'search?q='}>Fake Category</Link>
+                        )}
+                        <span>fake json</span>
+                        <span>fake 18.5 MB</span>
                     </div>
                 </aside>