style: search result date

researchdata-sheffield · Apr 13, 2022 · 4b79ec3 · 4b79ec3
1 parent 158a4e7
commit 4b79ec3
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 6 deletions.
diff --git a/src/components/shared/__tests__/__snapshots__/search.spec.js.snap b/src/components/shared/__tests__/__snapshots__/search.spec.js.snap
@@ -18,7 +18,7 @@ exports[`Search component renders correctly 1`] = `
     }
   >
     <p
-      className="react-reveal text-lg text-gray-800 mb-5 font-extrabold"
+      className="react-reveal text-lg text-gray-800 mb-4 font-bold"
       style={
         Object {
           "opacity": undefined,
@@ -103,7 +103,7 @@ exports[`Search component return search result without error 1`] = `
       style="background-image: url(test-file-stub); background-size: contain; background-position: center; background-repeat: no-repeat; width: 100%; min-height: 600px;"
     >
       <p
-        class="react-reveal text-lg text-gray-800 mb-5 font-extrabold"
+        class="react-reveal text-lg text-gray-800 mb-4 font-bold"
       >
         What are you looking for?
       </p>
@@ -182,7 +182,11 @@ exports[`Search component return search result without error 1`] = `
                 >
                   DOCS
                 </a>
-                <span />
+                <p
+                  style="font-size: .85rem; margin-top: 10px;"
+                >
+                  Invalid Date
+                </p>
               </div>
               <h1
                 style="font-weight: 800; font-size: 1.5rem; margin-bottom: 15px; color: rgb(36, 39, 48);"
@@ -246,7 +250,11 @@ exports[`Search component return search result without error 1`] = `
                 >
                   Interative
                 </a>
-                <span />
+                <p
+                  style="font-size: .85rem; margin-top: 10px;"
+                >
+                  Invalid Date
+                </p>
               </div>
               <h1
                 style="font-weight: 800; font-size: 1.5rem; margin-bottom: 15px; color: rgb(36, 39, 48);"

diff --git a/src/components/shared/search.jsx b/src/components/shared/search.jsx
@@ -89,6 +89,13 @@ class Search extends Component {
 
                 let title = shortenText(item.title, 8);
                 let description = shortenText(item.description, 30);
+                const dateOptions = {
+                  year: "numeric",
+                  month: "long",
+                  day: "numeric"
+                };
+                let itemDate = new Date(item.date);
+                itemDate = itemDate.toLocaleDateString("en-GB", dateOptions);
 
                 return (
                   <a
@@ -151,7 +158,15 @@ class Search extends Component {
                               {currentTag}
                             </TagBtn>
                           ))}
-                        <span>{item.date}</span>
+                        <p
+                          style={{
+                            fontSize: ".85rem",
+                            marginTop: "10px",
+                            color: ""
+                          }}
+                        >
+                          {itemDate}
+                        </p>
                       </div>
                       <h1
                         style={{
@@ -206,7 +221,7 @@ class Search extends Component {
           }}
         >
           <Zoom top duration={1000} cascade>
-            <p className="text-lg text-gray-800 mb-5 font-extrabold">
+            <p className="text-lg text-gray-800 mb-4 font-bold">
               What are you looking for?
             </p>
           </Zoom>