Merge pull request #3 from shefing/Initialize_line

Initialize line

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-slot": "^1.0.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",

src/App.tsx

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

src/components/GrassImg.tsx

@@ -0,0 +1,11 @@
+import urlImg from "../../src/img/image.png";
+
+const GrassImg = () => {
+  return (
+    <div className="absolute w-full bottom-0 left-0">
+      <img src={urlImg} />
+    </div>
+  );
+};
+
+export default GrassImg;

src/components/Toolbar.tsx

@@ -1,2 +1,24 @@
-const Toolbar = () => {};
+import { Smile } from "lucide-react";
+import LineDefinition from "./toolbar/LineDefinition";
+
+const Toolbar = () => {
+  return (
+    <div className="flex justify-between bg-sky-100">
+      <div className="flex-none">
+        <Smile className="m-4 h-4 w-4" />
+      </div>
+      <div className="flex ">
+        <Smile className="m-4 h-4 w-4" />
+        <Smile className="m-4 h-4 w-4" />
+        <Smile className="m-4 h-4 w-4" />
+        <Smile className="m-4 h-4 w-4" />
+        <Smile className="m-4 h-4 w-4" />
+        <Smile className="m-4 h-4 w-4" />
+      </div>
+      <div className="flex-none">
+        <LineDefinition />
+      </div>
+    </div>
+  );
+};
 export default Toolbar;

src/components/ruler/XAxis.tsx

@@ -3,14 +3,16 @@ interface IProps {
 }
 const XAxis = ({ labels }: IProps) => {
   return (
-    <div className="flex justify-between border-t-2 border-gray-900 pt-0 mx-0">
-      {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-px" />
-          {label}
-        </div>
-      ))}
-    </div>
+    <>
+      <div className="flex justify-between border-t-2 border-gray-900 pt-0 mx-0 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-px" />
+            {label}
+          </div>
+        ))}
+      </div>
+    </>
   );
 };
 

src/components/toolbar/LineDefinition.tsx

@@ -0,0 +1,13 @@
+import { Button } from "../ui/button";
+
+const LineDefinition = () => {
+  return (
+    <>
+      <Button className={`m-1 text-xl text-sky-600 font-bold `} variant="ghost">
+        <span className="mr-3">&#x25BC;</span> הגדרת הישר
+      </Button>
+    </>
+  );
+};
+
+export default LineDefinition;

vite.config.ts

@@ -8,5 +8,9 @@ export default defineConfig({
     alias: {
       "@": path.resolve(__dirname, "./src"),
     },
+
+  },
+  server: {
+    port: 3000,
   },
 })