Added Post Info back to Sidebar

Author: Ben-Brady

src/components/sidebar/index.js

@@ -7,6 +7,7 @@ function SideBar(props) {
     let post = props.post;
     return (
         <div id="post-sidebar">
+            <PostInfo post={post} />
             <TagList tags={post.tags} />
         </div>
     );

src/components/sidebar/post_data.js

@@ -14,9 +14,14 @@ function Entry(props) {
 function PostInfo(props) {
     let post = props.post;
     if (post.created_at === undefined) return <div className="post-info" />;
+
+    let created_at = new Date(post.created_at * 1000).toLocaleDateString();
     return (
-        <div>
-            <Entry name="Created At" value={new Date(post.created_at * 1000).toDateString()} />
+        <div id="post_data">
+            <Entry name="ID" value={post.id} />
+            <Entry name="Created At" value={created_at} />
+            <Entry name="Source" value={post.source} />
+            <Entry name="Views" value={post.views} />
         </div>
     );
 }

src/components/sidebar/sidebar.css

@@ -5,34 +5,18 @@
     min-width: 15rem;
     max-width: 15rem;
 
-    padding: .5rem;
-    padding-right: 1rem;
-    
     /* Look */
     overflow-x: hidden;
     overflow-y: auto;
     background-color: var(--COLOR-2);
+    border-right: 1px solid black;
 }
 
+
 @media screen and (max-aspect-ratio: 1/1) {
     #post-sidebar{display:none !important}
 }
 
-
-.tag-list{
-    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
-}
-
-.namespace-generic{
-    color: black;
-}
-
-.namespace-character{
-    color: purple;
-}
-
-.namespace-meta{
-    color: rgb(40, 40, 40);
+#post_data{
+    margin: .5rem;
 }

src/components/sidebar/tag_list.css

@@ -0,0 +1,20 @@
+.tag-list{
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    
+    padding: .5rem;
+    border-top: 1px solid black;
+}
+
+.namespace-generic{
+    color: black;
+}
+
+.namespace-character{
+    color: purple;
+}
+
+.namespace-meta{
+    color: rgb(40, 40, 40);
+}

src/components/sidebar/tag_list.js

@@ -1,8 +1,9 @@
 import React from "react";
+import "./tag_list.css"
 
 function Tag(props) {
     let namespace = props.namespace || "generic";
-    return <a className={`namespace-${namespace}`}>{props.name}</a>;
+    return <span className={`namespace-${namespace}`}>{props.name}</span>;
 }
 
 function TagList(props) {