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;