cleanup classnames and add text button

src/components/cardSelector/CardSelector.tsx

@@ -2,6 +2,7 @@ import { useRef } from "kaioken"
 import { StickyNoteButton } from "./StickyNoteButton"
 import { ImageCardButton } from "./ImageCardButton"
 import { ExportButton } from "./ExportButton"
+import { TextButton } from "./TextButton"
 
 export function CardSelector() {
   const containerRef = useRef<HTMLDivElement>(null)
@@ -15,7 +16,10 @@ export function CardSelector() {
       }}>
       <StickyNoteButton />
       <ImageCardButton />
+      <TextButton />
+
       <Divider />
+
       <ExportButton />
     </div>
   )
@@ -27,7 +31,6 @@ function Divider() {
       margin: '2px 2px',
       border: "1px solid #9c9c9c",
       borderRight: 'none',
-      borderLeft: 'none',
     }}></div>
   )
 }

src/components/cardSelector/ExportButton.tsx

@@ -1,4 +1,5 @@
 import { ImagesSignal, NotesSigal } from "../../signals"
+import { defaultClassName } from "./utils"
 
 export function ExportButton() {
 
@@ -35,7 +36,7 @@ export function ExportButton() {
       stroke-width="2"
       stroke-linecap="round"
       stroke-linejoin="round"
-      className="cursor-pointer w-5 h-5 text-[#9c9c9c] hover:text-blue-500 transition-color duration-300"
+      className={defaultClassName}
     >
       <path
         d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />

src/components/cardSelector/ImageCardButton.tsx

@@ -1,6 +1,7 @@
 import { ImagesSignal } from "../../signals"
 import images from "../../signals/images"
 import { updateLocalStorage } from "../../utils/localStorage"
+import { defaultClassName } from "./utils"
 
 export function ImageCardButton() {
   function _handleClick(mouseEvent: MouseEvent) {
@@ -47,32 +48,31 @@ export function ImageCardButton() {
   }
 
   return (
-    <button onclick={_handleClick}>
-      <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="w-5 h-5 text-[#9c9c9c]  hover:text-blue-500 transition-color duration-300">
-        <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>
-    </button>
+    <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>
   )
 }

src/components/cardSelector/StickyNoteButton.tsx

@@ -1,6 +1,7 @@
 import { NotesSigal } from "../../signals"
 import notes from "../../signals/notes"
 import { updateLocalStorage } from "../../utils/localStorage"
+import { defaultClassName } from "./utils"
 
 export function StickyNoteButton() {
   function _handleClick(e: MouseEvent) {
@@ -21,24 +22,23 @@ export function StickyNoteButton() {
   }
 
   return (
-    <button onclick={_handleClick} className="cursor-pointer">
-      <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="w-5 h-5 text-[#9c9c9c] hover:text-blue-500  transition-color duration-300">
-        <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>
-    </button>
+    <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>
   )
 
 }

src/components/cardSelector/TextButton.tsx

@@ -0,0 +1,23 @@
+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>
+  )
+}

src/components/cardSelector/utils.ts

@@ -0,0 +1,2 @@
+export const defaultClassName =
+  "cursor-pointer w-5 h-5 text-[#9c9c9c] hover:text-blue-500 transition-color duration-300"