add offline indicator in subscriptions section

src/components/BoardSubscription.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { useSubplebbit } from "@plebbit/plebbit-react-hooks";
+
+const BoardSubscription = ({ address }) => {
+
+  const subplebbit = useSubplebbit({ subplebbitAddress: address });
+  const isOnline = subplebbit.updatedAt > Date.now() / 1000 - 60 * 20;
+
+
+  return (
+    <>
+      &nbsp;{address}{!isOnline && (
+        <img className="disconnected" alt="offline" src="assets/disconnected.png" />
+      )}
+    </>
+  );
+};
+
+export default BoardSubscription;

src/components/styled/Home.styled.jsx

@@ -296,6 +296,11 @@ export const BoardsContent = styled.div`
       display: none;
     }
   }
+
+  .disconnected {
+    width: 15px;
+    position: absolute;
+  }
 `;
 
 export const Footer = styled.div`

src/components/views/Home.jsx

@@ -6,6 +6,7 @@ import { Link, useNavigate } from 'react-router-dom';
 import { Container, Header, Logo, Page, Search, About, AboutTitle, AboutContent, Boards, BoardsTitle, BoardsContent, Footer } from '../styled/Home.styled';
 import BoardAvatar from '../BoardAvatar';
 import packageJson from '../../../package.json'
+import BoardSubscription from '../BoardSubscription';
 const {version} = packageJson
 
 
@@ -101,7 +102,7 @@ const Home = () => {
                     <>
                       <Link key={`sub-${index}`} className="boardlink" to={`/p/${subscription}`}>
                         <br id="mobile-br" />
-                        {subscription}
+                        <BoardSubscription address={subscription} />
                       </Link>
                       <br />
                     </>