feat(buttons): added title for buttons

vwh · vwh · commit c7788c5c11d1 · 2024-08-26T01:27:58.000+03:00
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"
         >

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import React, { useCallback, useMemo } from "react";`
	`1`	`+import { useCallback, useMemo } from "react";`
`2`	`2`
`3`	`3`	`import { useStore } from "@/store/useStore";`
`4`	`4`	`import MonacoEditor, { OnMount } from "@monaco-editor/react";`
Original file line number	Diff line number	Diff line change
`@@ -65,7 +65,7 @@ export default function Settings() {`
`65`	`65`	`<Drawer>`
`66`	`66`	`<DrawerTrigger asChild>`
`67`	`67`	`<Button`
`68`		`- title="Toggle settings drawer"`
	`68`	`+ title="Open Settings"`
`69`	`69`	`variant="secondary"`
`70`	`70`	`className="flex items-center space-x-2"`
`71`	`71`	`>`