improve ui components

package.json

@@ -25,6 +25,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.4",
     "postcss": "^8.4.32",
+    "postcss-import": "^15.1.0",
     "tailwindcss": "^3.3.5",
     "typescript": "^5.2.2",
     "vite": "^5.0.0"

postcss.config.js

@@ -1,5 +1,6 @@
 export default {
   plugins: {
+    'postcss-import': {},
     tailwindcss: {},
     autoprefixer: {},
   },

src/Pages/Home.jsx

@@ -12,7 +12,7 @@ function Home() {
   return (
     <div className=".Mycontainer">
       <Navbar msg={"Algorithms Visualizer"}></Navbar>
-      <h2 style={{ textAlign: "center", color: "#1e293b", padding: "8px" }}>
+      <h2 className="text-2xl text-center text-slate-700 py-4">
         A Better Visualization Of Different Algorithms
       </h2>
 

src/Pages/PathfindingVS.jsx

@@ -12,6 +12,7 @@ import Modal from "../components/Modal";
 import { KruskalAlgorithm } from "../algorithm/maze/kruskal-algorithm";
 import { PrimsAlgorithm } from "../algorithm/maze/prim's-algorithm";
 import { CostomCheckBox } from "../components/Costom-checkbox.tsx";
+import { Button } from "../components/Btn.tsx";
 
 /*
 super(props);// call the super class constructor and pass in the props parameter
@@ -20,14 +21,10 @@ super(props);// call the super class constructor and pass in the props parameter
 var rows = 17;
 var cols = 31;
 
-var START_NODE_ROW = 4,
-  START_NODE_COL = 6;
-var END_NODE_ROW = rows - 6,
-  END_NODE_COL = cols - 6;
-var InitSR = START_NODE_ROW,
-  InitSC = START_NODE_COL;
-var InitER = END_NODE_ROW,
-  InitEC = END_NODE_COL;
+var START_NODE_ROW = 4, START_NODE_COL = 6;
+var END_NODE_ROW = rows - 6, END_NODE_COL = cols - 6;
+var INIT_START_ROW = START_NODE_ROW, INIT_START_COL = START_NODE_COL;
+var INT_END_ROW = END_NODE_ROW, INIT_END_COL = END_NODE_COL;
 
 const FAST = 5;
 const AVERAGE = 15;
@@ -71,10 +68,10 @@ function App() {
       await waitForAnimatoin(animateTime);
       if (node.x === START_NODE_ROW && node.y === START_NODE_COL)
         document.getElementById(`row${node.x}_col${node.y}`).className =
-          "node-visited START_NODE";
+          "node-visited START_NODE cursor-grab";
       else if (node.x === END_NODE_ROW && node.y === END_NODE_COL)
         document.getElementById(`row${node.x}_col${node.y}`).className =
-          "node-visited END_NODE";
+          "node-visited END_NODE cursor-grab";
       else
         document.getElementById(`row${node.x}_col${node.y}`).className =
           "node-visited";
@@ -87,18 +84,18 @@ function App() {
       await waitForAnimatoin(animateTime);
       if (i === 0)
         document.getElementById(`row${node.x}_col${node.y}`).className =
-          "shortestPath START_NODE";
+          "shortestPath START_NODE cursor-grab";
       else if (i + 1 === pathNode.length)
         document.getElementById(`row${node.x}_col${node.y}`).className =
-          "shortestPath END_NODE";
+          "shortestPath END_NODE cursor-grab";
       else
         document.getElementById(`row${node.x}_col${node.y}`).className =
           "shortestPath";
     }
   }
 
   const pathFinding = async () => {
-    var btns = document.getElementsByClassName("button-4");
+    var btns = document.getElementsByClassName("btn-selector");
     document.getElementsByTagName("select")[0].disabled = true;
     document.getElementsByTagName("select")[1].disabled = true;
     for (let i = 0; i < btns.length; i++) {
@@ -165,7 +162,7 @@ function App() {
   const mazeHandle = async () => {
     // clear all walls and disable all buttons when maze is generating
 
-    var btns = document.getElementsByClassName("button-4");
+    var btns = document.getElementsByClassName("btn-selector");
     document.getElementsByTagName("select")[0].disabled = true;
     document.getElementsByTagName("select")[1].disabled = true;
     for (let i = 0; i < btns.length; i++) {
@@ -210,10 +207,10 @@ function App() {
       for (let j = 0; j < cols; j++) {
         if (i === START_NODE_ROW && j === START_NODE_COL) {
           document.getElementById(`row${i}_col${j}`).className =
-            "square START_NODE";
+            "square START_NODE cursor-grab";
         } else if (i === END_NODE_ROW && j === END_NODE_COL) {
           document.getElementById(`row${i}_col${j}`).className =
-            "square END_NODE";
+            "square END_NODE cursor-grab";
         } else if (!Grid[i][j].isWall)
           document.getElementById(`row${i}_col${j}`).className = "square";
       }
@@ -306,13 +303,13 @@ function App() {
         <div className="path-container">
           <div className="path-header mb-4">
             <div>
-              <div style={{ display: "flex", margin: "12px auto" }}>
-                <div>
-                  <button className="button-4 start-btn" onClick={pathFinding}>
-                    Find the possible path
-                  </button>
-                </div>
-                <div>
+              <div className="flex justify-end my-[12px] gap-3">
+                  <Button
+                    className="btn-selector"
+                    onClick={pathFinding}
+                    label="Find the possible path"
+                    // isBgColor
+                  />
                   <select
                     className="my-drop-down"
                     value={pathID}
@@ -325,7 +322,6 @@ function App() {
                     <option value="2">Depth-First Search</option>
                     <option value="3">Dijkstra</option>
                   </select>
-                </div>
               </div>
               <div className="path-speed-btns">
                 <div className="-m-1 flex flex-row flex-wrap">
@@ -348,7 +344,7 @@ function App() {
               </div>
             </div>
             <div>
-              <div style={{ display: "flex", margin: "12px auto" }}>
+              <div className="flex justify-end my-[12px] gap-3">
                 <select
                   className="my-drop-down"
                   value={mazeID}
@@ -365,33 +361,36 @@ function App() {
                   <option value="4">Kruskal algorithm</option>
                   <option value="5">Prim's algorithm</option>
                 </select>
-                <button
-                  className="button-4 start-maze-btn"
+                <Button
+                  className="btn-selector END-maze-btn"
                   onClick={mazeHandle}
-                >
-                  Create Maze
-                </button>
-                <button className="button-4" onClick={gridInitialize}>
-                  Clear walls
-                </button>
+                  label="Generate Maze"
+                  isBgColor
+                />
               </div>
-              <div style={{ display: "flex" }}>
-                <button className="button-4" onClick={clearPathHandle}>
-                  Clear path
-                </button>
-                <button
-                  className="button-4"
+              <div className="flex gap-3">
+                <Button
+                  className="btn-selector"
+                  onClick={gridInitialize}
+                  label="Clear walls"
+                />
+                <Button
+                  className="btn-selector"
+                  onClick={clearPathHandle}
+                  label="Clear path"
+                />
+                <Button
+                  className="btn-selector !border-red-500 !text-red-500 hover:!bg-red-500 hover:!text-white"
                   onClick={() => {
-                    START_NODE_ROW = InitSR;
-                    START_NODE_ROW = InitSC;
-                    END_NODE_ROW = InitER;
-                    END_NODE_COL = InitEC;
+                    START_NODE_ROW = INIT_START_ROW;
+                    START_NODE_COL = INIT_START_COL;
+                    END_NODE_ROW = INT_END_ROW;
+                    END_NODE_COL = INIT_END_COL;
                     clearPathHandle();
                     gridInitialize();
                   }}
-                >
-                  Reset board
-                </button>
+                  label="Reset board"
+                />
               </div>
             </div>
           </div>
@@ -496,9 +495,9 @@ function Node({ pv }) {
   };
 
   var classNode = isStart
-    ? "START_NODE"
+    ? "START_NODE cursor-grab"
     : isEnd
-    ? "END_NODE"
+    ? "END_NODE cursor-grab"
     : isWall
     ? "obtacle"
     : "";

src/components/Btn.tsx

@@ -0,0 +1,36 @@
+import { forwardRef } from "react";
+
+export type ButtonProps = {
+  label?: React.ReactNode;
+  isBgColor?: boolean;
+  className?: string;
+} & Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, "onClick" | "type">;
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    { label, className, isBgColor, ...props }: ButtonProps,
+    ref
+  ): JSX.Element => {
+
+    if (isBgColor) {
+      return (
+        <button
+          ref={ref}
+          className={`px-6 py-[6px] text-sm font-medium text-white bg-violet-600 border border-violet-600 rounded active:text-violet-500 hover:bg-transparent hover:text-violet-600 focus:outline-none focus:ring disabled:cursor-not-allowed ${className}`}
+          {...props}
+        >
+          {label}
+        </button>
+      );
+    }
+    return (
+      <button
+        ref={ref}
+        className={`px-6 py-[6px] text-sm font-medium text-violet-600 bg-white border border-violet-600 rounded active:text-white hover:bg-violet-600 hover:text-white focus:outline-none focus:ring disabled:cursor-not-allowed ${className}`}
+        {...props}
+      >
+        {label}
+      </button>
+    );
+  }
+);

src/index.css

@@ -2,6 +2,41 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer components {
+  /* .btn {
+    @apply inline-flex items-center justify-center px-4 py-2 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-primary-600 hover:bg-primary-500 focus:outline-none focus:border-primary-700 focus:shadow-outline-primary active:bg-primary-700 transition ease-in-out duration-150;
+  } */
+
+  /* .form-input,
+  .form-textarea,
+  .form-multiselect,
+  .form-select,
+  .form-checkbox,
+  .form-radio {
+    @apply border bg-white text-sm text-slate-800;
+  }
+
+  .form-input,
+  .form-textarea,
+  .form-multiselect,
+  .form-select,
+  .form-checkbox {
+    @apply rounded;
+  }
+
+  .form-input,
+  .form-textarea,
+  .form-multiselect,
+  .form-select {
+    @apply focus:border-primary-300 border-slate-200 py-2 px-3 leading-5 shadow-sm hover:border-slate-300;
+  }
+
+  .form-input,
+  .form-textarea {
+    @apply placeholder-slate-400;
+  } */
+}
+
 html,
 body {
   margin: 0px;

src/main.tsx

@@ -1,9 +1,8 @@
 import React from 'react'
+import { HashRouter } from 'react-router-dom';
 import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
-import './index.css'
 import './index.css';
-import { HashRouter } from 'react-router-dom';
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>

src/styles/PathfindingVS.css

@@ -1,5 +1,6 @@
 .path-container{
    margin : 10px auto;
+   padding-bottom: 10px;
    max-width: 938px;
 }