From aecf7c9da6cb6f41d76c010e649ec394b68405bb Mon Sep 17 00:00:00 2001
From: Tuan Cao <caomanhtuanbsb@gmail.com>
Date: Fri, 8 Apr 2022 11:56:09 +0700
Subject: [PATCH] WIP styling backlink section

---
 components/MDContent.js | 37 ++++++++++++++----------
 styles/style.css        | 63 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 85 insertions(+), 15 deletions(-)

diff --git a/components/MDContent.js b/components/MDContent.js
index 3caeba7..274a4ce 100644
--- a/components/MDContent.js
+++ b/components/MDContent.js
@@ -6,22 +6,29 @@ import Link from 'next/link'
 
 function BackLinks({linkList}) {
 
-    return (<ul>
-        {
-            (linkList != null && linkList.length > 0)
+    return (<div className="note-footer">
+            {(linkList != null && linkList.length > 0)
                 ?
-                linkList.map(aLink =>
-                    <li>
-                     <Link href={aLink.slug}>
-                         <a>
-                             {aLink.title}
-                         </a>
-                     </Link>
-                    </li>
-                )
-                : <h1>No Back link found</h1>
-        }
-    </ul>);
+                <>
+                    <h3 className="backlink-heading">Link to this note</h3>
+
+                    <div className="backlink-container">
+                    {linkList.map(aLink =>
+                    <div className="backlink">
+                        <Link href={aLink.slug}>
+                            <a >
+                                    <p className="backlink-title">{aLink.title}</p>
+                                    <p className="backlink-preview">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsumLorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum  </p>
+                            </a>
+                        </Link>
+
+                    </div>
+                    )}
+                    </div>
+                </>
+
+                : <></>}
+    </div>);
 }
 
 function MDContent({content, fileNames, backLinks, handleOpenNewContent}) {
diff --git a/styles/style.css b/styles/style.css
index b3e9f81..0c206f4 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -16,6 +16,69 @@ a:hover {
     flex-direction: row;
     justify-content: center;
 }
+/* Foooter section BEGIN */
+.note-footer {
+    display: block;
+    background-color: rgba(238, 238, 238, 0.8);
+    border-radius: 16px;
+    margin-top: 24px;
+    padding: 16px;
+}
+
+.backlink-container {
+    flex-wrap: wrap;
+    justify-content: space-between;
+    position: relative;
+    /*background-color: #f8bbbb;*/
+    flex-direction: row;
+    display: flex;
+}
+
+.note-footer .backlink-heading {
+    display: block;
+    font-size: 18px;
+    line-height: 24px;
+    font-weight: 600;
+    color: var(--text-muted);
+}
+
+.backlink-container .backlink {
+    /*background-color: #f8f2f2;*/
+    margin: 8px;
+    height: 118px;
+    width: 318px;
+    text-decoration: none;
+    display: block;
+    overflow: hidden;
+    border-radius: 8px;
+    /*padding-bottom: 8px;*/
+}
+
+.backlink-container .backlink:hover {
+    background-color: rgba(180, 177, 177, 0.3);
+}
+
+.backlink-container  .backlink-title {
+    font-size: 12px;
+    line-height: 16px;
+    font-weight: 600;
+    text-decoration: none;
+}
+
+.backlink-container a{
+    text-decoration: none;
+    color: var(--text-muted);
+}
+
+.backlink-container  .backlink-preview {
+    font-size: 12px;
+    line-height: 16px;
+    overflow: hidden;
+}
+.backlink-container p {
+    margin: 12px 0px;
+}
+/* Foooter section END */
 
 .markdown-rendered {
     font-size: 18px;