add offline indicator in popular boards section

src/components/BoardAvatar.jsx

@@ -0,0 +1,30 @@
+import React, { useEffect, useState } from "react";
+import { useSubplebbit } from "@plebbit/plebbit-react-hooks";
+
+const BoardAvatar = ({ address }) => {
+  const [avatarUrl, setAvatarUrl] = useState("assets/plebchan.png");
+  const subplebbit = useSubplebbit({ subplebbitAddress: address });
+
+  const isOnline = subplebbit.updatedAt > Date.now() / 1000 - 60 * 20;
+
+  useEffect(() => {
+    if (subplebbit.suggested?.avatarUrl) {
+      setAvatarUrl(subplebbit.suggested.avatarUrl);
+    }
+  }, [subplebbit.suggested?.avatarUrl, subplebbit]);
+
+  return (
+    <div className="board-avatar-container">
+      <img
+        className={isOnline ? "board-avatar" : "board-avatar offline"}
+        alt="board logo"
+        src={avatarUrl}
+      />
+      {!isOnline && (
+        <img className="offline-indicator" alt="offline" src="assets/offline.png" />
+      )}
+    </div>
+  );
+};
+
+export default BoardAvatar;

src/components/styled/Home.styled.jsx

@@ -230,14 +230,29 @@ export const BoardsContent = styled.div`
     border: 1px solid #800;
     display: inline-block;
     overflow: hidden;
+    position: relative;
   }
 
-  .board-avatar-container img {
+
+  .board-avatar-container img.board-avatar {
     width: 100%;
     height: 100%;
     object-fit: cover;
   }
 
+  .board-avatar-container img.offline {
+    filter: brightness(50%);
+  }
+
+  .offline-indicator {
+    position: absolute;
+    top: calc(50% - 10px);
+    left: 0;
+    width: 100%;
+    object-fit: cover;
+    z-index: 1;
+  }
+
   .board-text {
     margin-bottom: 5px;
     padding: 0 2px;

src/components/views/Home.jsx

@@ -4,24 +4,11 @@ import { useAccount, useSubplebbit } from '@plebbit/plebbit-react-hooks';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
 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'
 const {version} = packageJson
 
 
-const BoardAvatar = ({ address }) => {
-  const [avatarUrl, setAvatarUrl] = useState('assets/plebchan.png');
-  const subplebbit = useSubplebbit({ subplebbitAddress: address });
-
-  useEffect(() => {
-    if (subplebbit.suggested?.avatarUrl) {
-      setAvatarUrl(subplebbit.suggested.avatarUrl);
-    }
-  }, [subplebbit.suggested?.avatarUrl, subplebbit]);
-
-  return <img alt="board logo" src={avatarUrl} />;
-};
-
-
 const Home = () => {
   const { 
     setBodyStyle,