From 9586efddc9b2b08e191d2be68e838b6793f080a4 Mon Sep 17 00:00:00 2001
From: "bitbuilder-ai[bot]"
 <65095814+bitbuilder-ai[bot]@users.noreply.github.com>
Date: Sun, 24 Sep 2023 19:35:38 +0000
Subject: [PATCH] implement #8;

---
 src/components/home/DashboardMode.tsx | 13 +++++++++----
 src/components/misc.tsx               | 13 +++++++++++++
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/components/home/DashboardMode.tsx b/src/components/home/DashboardMode.tsx
index 811034f..96513a9 100644
--- a/src/components/home/DashboardMode.tsx
+++ b/src/components/home/DashboardMode.tsx
@@ -91,7 +91,7 @@ export default function DashboardMode(props: { user: User | null }) {
         ) : (
           <ul role="list" className="divide-y divide-gray-200 space-y-4">
             {allForms.map((f) => {
-              const responsesForThisForm = formIdToResponses[f.id] || [];
+import { Tooltip } from '../misc';
               const badgeColor = f.is_open
                 ? 'bg-green-100 text-green-800'
                 : 'bg-red-100 text-red-800';
@@ -113,8 +113,13 @@ export default function DashboardMode(props: { user: User | null }) {
                       <span
                         className={`inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ${badgeColor} ring-1 ring-inset ring-gray-500/10`}
                       >
-                        {f.is_open ? 'Open' : 'Closed'}
-                      </span>
+<Tooltip message={f.is_open ? 'This form is currently accepting responses' : 'This form is not currently accepting responses'}>
+<span
+  className={`inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ${badgeColor} ring-1 ring-inset ring-gray-500/10`}
+>
+  {f.is_open ? 'Open' : 'Closed'}
+</span>
+</Tooltip>
                     </div>
                     <div className="">
                       {f.created_at && (
@@ -173,4 +178,4 @@ export default function DashboardMode(props: { user: User | null }) {
       </div>
     );
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/misc.tsx b/src/components/misc.tsx
index e812f38..8407f0f 100644
--- a/src/components/misc.tsx
+++ b/src/components/misc.tsx
@@ -18,3 +18,16 @@ export const titleGradient = 'bg-gradient-to-r from-purple-600 to-blue-400';
 export const titleGradientHover = 'hover:from-purple-500 hover:to-blue-300';
 // const pinkGradient = 'from-yellow-400 via-pink-400 to-fuchsia-500';
 // hover:from-yellow-300 hover:via-pink-300 hover:to-fuchsia-400
+
+import ReactTooltip from 'react-tooltip';
+
+export const Tooltip = ({ message, children }) => (
+  <div>
+    <ReactTooltip id='tooltip' place='top' effect='solid'>
+      {message}
+    </ReactTooltip>
+    <div data-tip data-for='tooltip'>
+      {children}
+    </div>
+  </div>
+);
\ No newline at end of file