From e24aa066dac2c232de99451f0e5301ba2607947c Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Mon, 1 Jan 2024 20:39:07 +0100
Subject: [PATCH] feat(subplebbits): add online indicator

---
 src/views/subplebbits/subplebbits.module.css | 16 ++++++++++++++++
 src/views/subplebbits/subplebbits.tsx        |  1 +
 2 files changed, 17 insertions(+)

diff --git a/src/views/subplebbits/subplebbits.module.css b/src/views/subplebbits/subplebbits.module.css
index ba5e3e82..aa7490ea 100644
--- a/src/views/subplebbits/subplebbits.module.css
+++ b/src/views/subplebbits/subplebbits.module.css
@@ -101,6 +101,22 @@
   opacity: 1;
 }
 
+.onlineIndicator {
+  background-repeat: no-repeat;
+  display: inline-flex;
+  height: 13px;
+  width: 13px;
+  margin: 2px 5px -2px 2px;
+}
+
+.online {
+  background-image: url('/public/assets/indicator-online.png');
+}
+
+.offline {
+  background-image: url('/public/assets/indicator-offline.png');
+}
+
 .title {
   display: inline-flex;
   flex-wrap: wrap;
diff --git a/src/views/subplebbits/subplebbits.tsx b/src/views/subplebbits/subplebbits.tsx
index 9badce05..93bf4f08 100644
--- a/src/views/subplebbits/subplebbits.tsx
+++ b/src/views/subplebbits/subplebbits.tsx
@@ -92,6 +92,7 @@ const Subplebbit = ({ subplebbit }: SubplebbitProps) => {
       </div>
       <div className={styles.entry}>
         <div className={styles.title}>
+          <span className={`${styles.onlineIndicator} ${isOnline ? styles.online : styles.offline}`} />
           <Link to={`/p/${address}`}>
             p/{address.includes('.') ? address : shortAddress}
             {title && `: ${title}`}