Merge pull request 'add tooltips to creation buttons' (#3) from feat/tooltips into main

Reviewed-on: https://git.tristonarmstrong.com/Klectr/KSlab/pulls/3

src/components/cardSelector/ExportButton.tsx

@@ -1,4 +1,5 @@
 import { ImagesSignal, NotesSigal } from "../../signals"
+import { Tooltip } from "./Tooltip"
 import { defaultClassName } from "./utils"
 
 export function ExportButton() {
@@ -25,23 +26,25 @@ export function ExportButton() {
   }
 
   return (
-    <svg
-      onclick={_handleExport}
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      className={defaultClassName}
-    >
-      <path
-        d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-      <polyline points="7 10 12 15 17 10" />
-      <line x1="12" x2="12" y1="15" y2="3" />
-    </svg>
+    <Tooltip message="Export Json File">
+      <svg
+        onclick={_handleExport}
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        className={defaultClassName}
+      >
+        <path
+          d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+        <polyline points="7 10 12 15 17 10" />
+        <line x1="12" x2="12" y1="15" y2="3" />
+      </svg>
+    </Tooltip>
   )
 }

src/components/cardSelector/ImageCardButton.tsx

@@ -1,6 +1,7 @@
 import { ImagesSignal } from "../../signals"
 import images from "../../signals/images"
 import { updateLocalStorage } from "../../utils/localStorage"
+import { Tooltip } from "./Tooltip"
 import { defaultClassName } from "./utils"
 
 export function ImageCardButton() {
@@ -48,31 +49,33 @@ export function ImageCardButton() {
   }
 
   return (
-    <svg
-      onclick={_handleClick}
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      className={defaultClassName}>
-      <rect
-        width="18"
-        height="18"
-        x="3"
-        y="3"
-        rx="2"
-        ry="2" />
-      <circle
-        cx="9"
-        cy="9"
-        r="2" />
-      <path
-        d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
-    </svg>
+    <Tooltip message="Create an Image">
+      <svg
+        onclick={_handleClick}
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        className={defaultClassName}>
+        <rect
+          width="18"
+          height="18"
+          x="3"
+          y="3"
+          rx="2"
+          ry="2" />
+        <circle
+          cx="9"
+          cy="9"
+          r="2" />
+        <path
+          d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
+      </svg>
+    </Tooltip>
   )
 }

src/components/cardSelector/ImportButton.tsx

@@ -3,6 +3,7 @@ import notes from "../../signals/notes"
 import { Card } from "../../types"
 import { convertBase64ToJson } from "../../utils/convertBase64ToJson"
 import { updateLocalStorage } from "../../utils/localStorage"
+import { Tooltip } from "./Tooltip"
 import { defaultClassName } from "./utils"
 
 export function ImportButton() {
@@ -44,23 +45,25 @@ export function ImportButton() {
   }
 
   return (
-    <svg
-      onclick={_handleImport}
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      className={"rotate-[180deg] " + defaultClassName}
-    >
-      <path
-        d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-      <polyline points="7 10 12 15 17 10" />
-      <line x1="12" x2="12" y1="15" y2="3" />
-    </svg>
+    <Tooltip message="Import Json File">
+      <svg
+        onclick={_handleImport}
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        className={"rotate-[180deg] " + defaultClassName}
+      >
+        <path
+          d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+        <polyline points="7 10 12 15 17 10" />
+        <line x1="12" x2="12" y1="15" y2="3" />
+      </svg>
+    </Tooltip>
   )
 }

src/components/cardSelector/StickyNoteButton.tsx

@@ -1,6 +1,7 @@
 import { NotesSigal } from "../../signals"
 import notes from "../../signals/notes"
 import { updateLocalStorage } from "../../utils/localStorage"
+import { Tooltip } from "./Tooltip"
 import { defaultClassName } from "./utils"
 
 export function StickyNoteButton() {
@@ -22,23 +23,25 @@ export function StickyNoteButton() {
   }
 
   return (
-    <svg
-      onclick={_handleClick}
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      className={defaultClassName}>
-      <path
-        d="M16 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8Z" />
-      <path
-        d="M15 3v4a2 2 0 0 0 2 2h4" />
-    </svg>
+    <Tooltip message="Create a Sticky Note">
+      <svg
+        onclick={_handleClick}
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        className={defaultClassName}>
+        <path
+          d="M16 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8Z" />
+        <path
+          d="M15 3v4a2 2 0 0 0 2 2h4" />
+      </svg>
+    </Tooltip>
   )
 
 }

src/components/cardSelector/TextButton.tsx

@@ -1,23 +1,26 @@
+import { Tooltip } from "./Tooltip";
 import { defaultClassName } from "./utils";
 
 export function TextButton() {
 
   return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      className={defaultClassName}
-    >
-      <path d="M4 20h16" />
-      <path d="m6 16 6-12 6 12" />
-      <path d="M8 12h8" />
-    </svg>
+    <Tooltip message="Create a Text Node">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        className={defaultClassName}
+      >
+        <path d="M4 20h16" />
+        <path d="m6 16 6-12 6 12" />
+        <path d="M8 12h8" />
+      </svg>
+    </Tooltip>
   )
 }

src/components/cardSelector/Tooltip.tsx

@@ -0,0 +1,8 @@
+export function Tooltip({ children, message }: { children: JSX.Element, message: string }) {
+  return (
+    <div title={message}
+    >
+      {children}
+    </div>
+  )
+}