add status graph to creator list

ApeWorX · Nov 17, 2023 · be20271 · be20271
1 parent f611f27
commit be20271
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 5 deletions.
diff --git a/ui/app/src/CreatorPage.tsx b/ui/app/src/CreatorPage.tsx
@@ -1,9 +1,10 @@
 import React, { useState, useEffect } from "react";
 import { useParams, Link } from "react-router-dom";
-import StreamManager, { Stream } from "@apeworx/apepay";
 import config from "./config";
 import { usePublicClient, useWalletClient, WalletClient } from "wagmi";
 import { ConnectButton } from "@rainbow-me/rainbowkit";
+import StreamManager, { Stream } from "@apeworx/apepay";
+import { StreamStatus } from "@apeworx/apepay-react";
 import Header from "./Header";
 
 const CreatorPage = () => {
@@ -96,11 +97,19 @@ const CreatorPage = () => {
         ) : (
           <ul>
             {createdStreams.map((stream, index) => (
-              <li key={index}>
+              <li className="list-creator-streams" key={index}>
                 <Link
                   to={`/${stream.streamManager.address}/${stream.creator}/${stream.streamId}`}
                 >
-                  ID: {stream.streamId}
+                  <span>ID: {stream.streamId}</span>
+                  <div className="stream-status-component">
+                    <StreamStatus
+                      stream={stream}
+                      chartType={"bar"}
+                      background="#6200ea"
+                      color="black"
+                    />
+                  </div>
                 </Link>
               </li>
             ))}

diff --git a/ui/app/src/styles.css b/ui/app/src/styles.css
@@ -120,11 +120,10 @@ li {
 
 /* LIST STREAMS */
 .list-streams {
-  position: relative;
-  text-align: center;
   width: 30em;
   margin: 0px auto;
   line-height: 2em;
+  text-align: center;
 }
 
 .list-creator {
@@ -133,6 +132,25 @@ li {
   line-height: 30px;
 }
 
+.list-creator-streams {
+  text-align: center;
+  width: 100%;
+  list-style-type: none;
+  border: 2px solid black;
+  margin-top: 15px;
+  border-radius: 5px;
+}
+
+.list-creator-streams span {
+  display: block;
+  width: 100%;
+}
+
+.list-creator-streams:hover {
+  transform: scale(1.02);
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+}
+
 /* STREAM PAGE */
 
 .stream-status-box,