feat(buttons): added title for buttons

vwh · Aug 25, 2024 · c7788c5 · c7788c5
1 parent 26d906c
commit c7788c5
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 9 deletions.
diff --git a/src/components/editor/editor.tsx b/src/components/editor/editor.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from "react";
+import { useCallback, useMemo } from "react";
 
 import { useStore } from "@/store/useStore";
 import MonacoEditor, { OnMount } from "@monaco-editor/react";

diff --git a/src/components/nav-buttons.tsx b/src/components/nav-buttons.tsx
@@ -7,7 +7,7 @@ import Settings from "./settings";
 import {
   ReplaceIcon,
   PlayIcon,
-  TrashIcon,
+  Trash2Icon,
   LoaderCircleIcon
 } from "lucide-react";
 
@@ -44,23 +44,28 @@ const ButtonsNav = () => {
             disabled={isCodeExecuting}
             icon={
               isCodeExecuting ? (
-                <LoaderCircleIcon className="animate-spin" />
+                <LoaderCircleIcon className="h-5 w-5 animate-spin" />
               ) : (
-                <PlayIcon />
+                <PlayIcon className="h-5 w-5" />
               )
             }
             label="Run"
+            title="Execute Python Code"
           />
           <NavButton
             onClick={handleTerminalClear}
             disabled={isCodeExecuting}
-            icon={<TrashIcon />}
+            icon={<Trash2Icon className="h-5 w-5" />}
             label="Clear Terminal"
+            title="Clear Terminal"
           />
           <NavButton
             onClick={handleDirectionChange}
-            icon={<ReplaceIcon />}
-            label="Toggle Direction"
+            icon={<ReplaceIcon className="h-5 w-5" />}
+            label={
+              direction.substring(0, 1).toUpperCase() + direction.substring(1)
+            }
+            title="Change direction"
           />
         </div>
         <div className="flex items-center">
@@ -76,18 +81,21 @@ const NavButton = memo(
     onClick,
     disabled,
     icon,
-    label
+    label,
+    title
   }: {
     onClick: () => void;
     disabled?: boolean;
     icon: React.ReactNode;
     label: string;
+    title: string;
   }) => (
     <Button
       onClick={onClick}
       disabled={disabled}
       variant="secondary"
       className="text-foreground"
+      title={title}
     >
       {icon}
       <span className="ml-2 hidden sm:inline">{label}</span>

diff --git a/src/components/settings.tsx b/src/components/settings.tsx
@@ -65,7 +65,7 @@ export default function Settings() {
     <Drawer>
       <DrawerTrigger asChild>
         <Button
-          title="Toggle settings drawer"
+          title="Open Settings"
           variant="secondary"
           className="flex items-center space-x-2"
         >