From 5ee3c2c5e3698e39ebf994743b9f6035cf331a30 Mon Sep 17 00:00:00 2001
From: Tom <mottoes_recap0u@icloud.com>
Date: Fri, 5 May 2023 18:28:07 +0200
Subject: [PATCH] add tooltips to offline indicator in home

---
 src/components/BoardAvatar.jsx       | 26 ++++++++++++++++----------
 src/components/BoardSubscription.jsx | 11 +++++++----
 src/components/views/Home.jsx        |  8 +++++---
 3 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/src/components/BoardAvatar.jsx b/src/components/BoardAvatar.jsx
index efa4cf73..7cbe0f47 100644
--- a/src/components/BoardAvatar.jsx
+++ b/src/components/BoardAvatar.jsx
@@ -1,6 +1,7 @@
 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 });
@@ -14,16 +15,21 @@ const BoardAvatar = ({ address }) => {
   }, [subplebbit.suggested?.avatarUrl, subplebbit]);
 
   return (
-    <div className="board-avatar-container">
-      <img
-        className="board-avatar"
-        alt="board logo"
-        src={avatarUrl}
-      />
-      {!isOnline && (
-        <img className="offline-indicator" alt="offline" src="assets/offline.png" />
-      )}
-    </div>
+    <>
+      <div className="board-avatar-container">
+        <img
+          className="board-avatar"
+          alt="board logo"
+          src={avatarUrl}
+        />
+        {!isOnline && (
+          <img className="offline-indicator" alt="offline" src="assets/offline.png"
+          data-tooltip-id="tooltip"
+          data-tooltip-content="OFFLINE"
+          data-tooltip-place="top" />
+        )}
+      </div>
+    </>
   );
 };
 
diff --git a/src/components/BoardSubscription.jsx b/src/components/BoardSubscription.jsx
index 11aa675b..17705a24 100644
--- a/src/components/BoardSubscription.jsx
+++ b/src/components/BoardSubscription.jsx
@@ -1,16 +1,19 @@
 import React from "react";
 import { useSubplebbit } from "@plebbit/plebbit-react-hooks";
+import { Tooltip } from 'react-tooltip';
+
 
 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/offline.png" />
+      {address}&nbsp;{!isOnline && (
+        <img className="disconnected" alt="offline" src="assets/offline.png"
+        data-tooltip-id="tooltip"
+        data-tooltip-content="OFFLINE"
+        data-tooltip-place="top" />
       )}
     </>
   );
diff --git a/src/components/views/Home.jsx b/src/components/views/Home.jsx
index 8297169b..7bf04feb 100644
--- a/src/components/views/Home.jsx
+++ b/src/components/views/Home.jsx
@@ -1,12 +1,13 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { Helmet } from 'react-helmet-async';
-import { useAccount, useSubplebbit } from '@plebbit/plebbit-react-hooks';
+import { useAccount } 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'
 import BoardSubscription from '../BoardSubscription';
+import packageJson from '../../../package.json'
+import { Tooltip } from 'react-tooltip';
 const {version} = packageJson
 
 
@@ -40,6 +41,7 @@ const Home = () => {
         <title>plebchan</title>
       </Helmet>
       <Container>
+        <Tooltip id="tooltip" className="tooltip" />
         <Header>
           <Logo>
             <Link to="/">