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,6 +26,7 @@ export function ExportButton() {
   }
 
   return (
+    <Tooltip message="Export Json File">
       <svg
         onclick={_handleExport}
         xmlns="http://www.w3.org/2000/svg"
@@ -43,5 +45,6 @@ export function ExportButton() {
         <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,6 +49,7 @@ export function ImageCardButton() {
   }
 
   return (
+    <Tooltip message="Create an Image">
       <svg
         onclick={_handleClick}
         xmlns="http://www.w3.org/2000/svg"
@@ -74,5 +76,6 @@ export function ImageCardButton() {
         <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,6 +45,7 @@ export function ImportButton() {
   }
 
   return (
+    <Tooltip message="Import Json File">
       <svg
         onclick={_handleImport}
         xmlns="http://www.w3.org/2000/svg"
@@ -62,5 +64,6 @@ export function ImportButton() {
         <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,6 +23,7 @@ export function StickyNoteButton() {
   }
 
   return (
+    <Tooltip message="Create a Sticky Note">
       <svg
         onclick={_handleClick}
         xmlns="http://www.w3.org/2000/svg"
@@ -39,6 +41,7 @@ export function StickyNoteButton() {
         <path
           d="M15 3v4a2 2 0 0 0 2 2h4" />
       </svg>
+    </Tooltip>
   )
 
 }

src/components/cardSelector/TextButton.tsx

@@ -1,8 +1,10 @@
+import { Tooltip } from "./Tooltip";
 import { defaultClassName } from "./utils";
 
 export function TextButton() {
 
   return (
+    <Tooltip message="Create a Text Node">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="24"
@@ -19,5 +21,6 @@ export function TextButton() {
         <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>
+  )
+}