Initialization "הגדרת הישר " corresponding to the line of numbers

src/App.tsx

@@ -6,7 +6,7 @@ import GrassImg from "./components/GrassImg";
 const App = () => {
   return (
     <div>
-      {/* <Toolbar /> */}
+      <Toolbar />
       <Ruler />
       <GrassImg />
     </div>

src/components/Ruler.tsx

@@ -1,6 +1,17 @@
+import { useContext } from "react";
 import XAxis from "./ruler/XAxis";
+import KindLine, { LineRange } from "./context/kindNumberLine";
 const Ruler = () => {
-  const labels = Array.from({ length: 101 }, (_, index) => index);
+  const context = useContext(KindLine);
+  if (!context) {
+    return null;
+  }
+  const { kind, setKind } = context;
+
+  var labels = [];
+  if (kind == LineRange.hundredCircular) labels = Array.from({ length: 11 }, (_, index) => index * 10);
+  else labels = Array.from({ length: kind }, (_, index) => index);
+
   return (
     <div className="absolute w-full bottom-[30%] left-0 right-0">
       <XAxis labels={labels} />

src/components/Toolbar.tsx

@@ -3,7 +3,7 @@ import LineDefinition from "./toolbar/LineDefinition";
 
 const Toolbar = () => {
   return (
-    <div className="flex justify-between bg-sky-100">
+    <div className="flex justify-between bg-sky-100 absolute w-full top-0 left-0 ">
       <div className="flex-none">
         <Smile className="m-4 h-4 w-4" />
       </div>

src/components/context/kindNumberLine.tsx

@@ -0,0 +1,31 @@
+import { createContext, ReactNode, Dispatch, SetStateAction, useState } from "react";
+
+export enum LineRange {
+  ten = 11,
+  twenty = 21,
+  hundred = 101,
+  hundredCircular = 10,
+}
+
+const KindLine = createContext<{ kind: LineRange; setKind: Dispatch<SetStateAction<LineRange>> } | undefined>({
+  kind: LineRange.ten,
+  setKind: () => {},
+});
+
+interface ProviderProps {
+  children: ReactNode;
+}
+
+function Provider({ children }: ProviderProps) {
+  const [kind, setKind] = useState(LineRange.ten);
+
+  const kindShare = {
+    kind,
+    setKind,
+  };
+
+  return <KindLine.Provider value={kindShare}>{children}</KindLine.Provider>;
+}
+
+export { Provider };
+export default KindLine;

src/components/ruler/Numbers.tsx

@@ -0,0 +1,29 @@
+import { useContext } from "react";
+import KindLine, { LineRange } from "../context/kindNumberLine";
+
+interface IProps {
+  labels: number[];
+  startIndex: number;
+}
+const Numbers = ({ labels, startIndex }: IProps) => {
+  const context = useContext(KindLine);
+  if (!context) {
+    return null;
+  }
+  const { kind, setKind } = context;
+  var flag = kind == LineRange.hundredCircular;
+  return (
+    <>
+      {labels.slice(startIndex, startIndex + 21).map((label) => (
+        <div
+          key={label}
+          className={`text-xl text-color flex flex-col items-center ${flag && label % 50 == 0 ? "font-bold" : !flag && label % 5 === 0 && "font-bold"}`}
+        >
+          <div className="h-3 border-l-2 border-gray-900 w-1366 flex-shrink-0" />
+          {label}
+        </div>
+      ))}
+    </>
+  );
+};
+export default Numbers;

src/components/ruler/XAxis.tsx

@@ -1,5 +1,6 @@
 import Arrows from "./Arrows";
 import { useState } from "react";
+import Numbers from "./Numbers";
 
 interface IProps {
   labels: number[];
@@ -41,22 +42,12 @@ const XAxis = ({ labels }: IProps) => {
             onMouseLeave={handleMouseUp}
             style={{ cursor: isDragging ? "grabbing" : "grab" }}
           >
-            {labels.slice(startIndex, startIndex + 21).map((label) => (
-              <div key={label} className={`text-xl text-color flex flex-col items-center ${label % 5 === 0 && "font-bold"}`}>
-                <div className="h-3 border-l-2 border-gray-900 w-1366 flex-shrink-0" />
-                {label}
-              </div>
-            ))}
+            <Numbers labels={labels} startIndex={startIndex} />
           </div>
         </>
       ) : (
         <div className="fixed left-0 right-0 flex justify-between border-t-2 border-gray-900 pt-0 mx-0 items-center pl-8 pr-8 ">
-          {labels.map((label) => (
-            <div key={label} className={`text-xl text-color flex flex-col items-center ${label % 5 === 0 && "font-bold"}`}>
-              <div className="h-3 border-l-2 border-gray-900 w-1366 flex-shrink-0" />
-              {label}
-            </div>
-          ))}
+          <Numbers labels={labels} startIndex={startIndex} />
         </div>
       )}
     </>

src/components/toolbar/LineDefinition.tsx

@@ -1,12 +1,73 @@
+import { useState, useContext } from "react";
+import KindLine from "../context/kindNumberLine";
 import { Button } from "../ui/button";
+import { LineRange } from "../context/kindNumberLine";
 
 const LineDefinition = () => {
+  const [isMenuOpen, setMenuOpen] = useState(false);
+  const context = useContext(KindLine);
+
+  if (!context) {
+    return null;
+  }
+
+  const { kind, setKind } = context;
+
+  const handleButtonClick = () => {
+    setMenuOpen(!isMenuOpen);
+  };
+
+  const closeMenu = () => {
+    setMenuOpen(false);
+  };
+
   return (
-    <>
-      <Button className={`m-1 text-xl text-sky-600 font-bold `} variant="ghost">
+    <div className="relative">
+      <Button className={`m-1 text-xl font-bold ${isMenuOpen ? "text-blue-600" : "text-sky-600"}`} variant="ghost" onClick={handleButtonClick}>
         <span className="mr-3">&#x25BC;</span> הגדרת הישר
       </Button>
-    </>
+
+      {isMenuOpen && (
+        <div className="absolute top-8 right-0 bg-sky-100 border border-gray-300 rounded-md p-2">
+          <Button
+            className="block mb-2 text-blue-600 font-bold"
+            onClick={() => {
+              setKind(LineRange.ten);
+              closeMenu();
+            }}
+          >
+            0 -10
+          </Button>
+          <Button
+            className="block mb-2 text-blue-600 font-bold"
+            onClick={() => {
+              setKind(LineRange.twenty);
+              closeMenu();
+            }}
+          >
+            0 - 20
+          </Button>
+          <Button
+            className="block mb-2 text-blue-600 font-bold"
+            onClick={() => {
+              setKind(LineRange.hundred);
+              closeMenu();
+            }}
+          >
+            0 - 100 (קפיצות של 1)
+          </Button>
+          <Button
+            className="block text-blue-600 font-bold"
+            onClick={() => {
+              setKind(LineRange.hundredCircular);
+              closeMenu();
+            }}
+          >
+            O0 - 100 (קפיצות של 10)
+          </Button>
+        </div>
+      )}
+    </div>
   );
 };