feat: list layout

EddieHubCommunity · Nov 20, 2021 · 9f2a490 · 9f2a490
1 parent 7dab941
commit 9f2a490
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 19 deletions.
diff --git a/public/data/eddiejaoude-discord-centered-20-11-2021.json b/public/data/eddiejaoude-discord-centered-20-11-2021.json
@@ -1,5 +1,6 @@
 {
-  "type": "discord",
+  "platform": "discord",
+  "type": "audio",
   "author": {
     "name": "Eddie Jaoude",
     "url": "http://twitter.com/eddiejaoude"

diff --git a/public/data/francesco-live-20-11-2021.json b/public/data/francesco-live-20-11-2021.json
@@ -1,5 +1,6 @@
 {
-  "type": "youtube",
+  "platform": "youtube",
+  "type": "live",
   "author": {
     "name": "Francesco Ciulla",
     "url": "http://twitter.com/FrancescoCiull4"
@@ -8,5 +9,5 @@
   "title": "4C Website - Let's code it",
   "start": "2021-11-20T15:00:00+08:00",
   "end": "2021-11-20T16:00:00+08:00",
-  "description": "4C Website - Let's code it. The second episode of me coding the 4C Website live"
+  "description": "The second episode of me coding the 4C Website live"
 }
diff --git a/src/App.css b/src/App.css
@@ -1,3 +1,30 @@
-.p-dataview-header {
+.pointer {
   cursor: pointer;
 }
+
+.list-item {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem;
+  width: 100%;
+}
+
+.list-item .list-detail {
+  flex: 1 1 0;
+}
+
+.list-item .list-action {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.list-item .list-category-icon {
+  vertical-align: middle;
+  margin-right: 0.5rem;
+}
+
+.list-item .list-category {
+  vertical-align: middle;
+  line-height: 1;
+}
diff --git a/src/App.js b/src/App.js
@@ -74,25 +74,43 @@ function App() {
 
   const renderListItem = (data) => {
     return (
-      <>
-        <div
-          className="p-dataview-header"
-          onClick={() => (window.location = data.url)}
-        >
-          <Chip
-            label={data.title}
-            icon={`pi pi-${data.type}`}
+      <div className="list-item">
+        <div className="image-container">
+          <i
+            className={`pi pi-${data.platform} list-category-icon p-p-2 p-shadow-9 pointer`}
             style={{
-              background: colors[data.type].background,
-              color: colors[data.type].color,
+              fontSize: "5em",
+              background: colors[data.platform].background,
+              color: colors[data.platform].color,
             }}
-          />
+            onClick={() => (window.location = data.url)}
+          ></i>
+        </div>
+        <div className="list-detail">
+          <h5
+            className="p-mb-2 pointer"
+            onClick={() => (window.location = data.url)}
+          >
+            {data.title}
+          </h5>
+          <span className="list-category">{data.description}</span>
         </div>
-        <div>
-          <p>{data.description}</p>
+        <div className="list-action">
+          <span>{new Date(data.start).toDateString()}</span>
+          <span>{new Date(data.start).toTimeString()}</span>
+          <span>
+            <i className="pi pi-tag list-category-icon"></i>
+            <span
+              className="list-category"
+              style={{
+                color: colors[data.platform].background,
+              }}
+            >
+              {data.type}
+            </span>
+          </span>
         </div>
-        <div className="p-dataview-footer">Added by {data.author.name}</div>
-      </>
+      </div>
     );
   };