Merge pull request #1 from shefing/Initialize_line

Initialize line
without enum

.gitignore

@@ -1,132 +1,2 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-lerna-debug.log*
-.pnpm-debug.log*
-
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# Snowpack dependency directory (https://snowpack.dev/)
-web_modules/
-
-# TypeScript cache
-*.tsbuildinfo
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional stylelint cache
-.stylelintcache
-
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variable files
-.env
-.env.development.local
-.env.test.local
-.env.production.local
-.env.local
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-.parcel-cache
-
-# Next.js build output
-.next
-out
-
-# Nuxt.js build / generate output
-.nuxt
-dist
-
-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and not Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
-
-# vuepress build output
-.vuepress/dist
-
-# vuepress v2.x temp and cache directory
-.temp
-.cache
-
-# Docusaurus cache and generated files
-.docusaurus
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# TernJS port file
-.tern-port
-
-# Stores VSCode versions used for testing VSCode extensions
-.vscode-test
-
-# yarn v2
-.yarn/cache
-.yarn/unplugged
-.yarn/build-state.yml
-.yarn/install-state.gz
-.pnp.*
-.history/**
-.idea/**
+node_modules
+.idea

src/App.tsx

@@ -1,13 +1,12 @@
-import './App.css'
-import Ruler from './components/Ruler';
+import "./App.css";
+import Ruler from "./components/Ruler";
 
-function App() {
+const App = () => {
   return (
-    <div >
-      <Ruler/>
+    <div>
+      <Ruler />
     </div>
   );
 };
 
-
-export default App
+export default App;

src/components/Axis.tsx

@@ -1,19 +1,19 @@
-type Props = {
-    labels: string[];
+interface IProps {
+  labels: number[];
+}
+const XAxis = ({ labels }: IProps) => {
+  return (
+    <>
+      <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>
+    </>
+  );
 };
 
-const Axis: React.FC<Props> = ({ labels }) => {
-    return (
-        <div className="flex justify-between border-t-2 border-gray-200 pt-0 mx-4">
-            {labels.map((label, index) => (
-                <div key={index} className="text-sm text-gray-500 flex flex-col items-center">
-                    <div className="h-2 border-l-2 border-gray-200 w-px"></div>
-                    {label}
-                </div>
-            ))}
-        </div>
-    );
-};
-
-export default Axis;
-
+export default XAxis;

src/components/Ruler.tsx

@@ -1,8 +1,11 @@
-import "../App.css";
-import Axis from "./Axis"
+import XAxis from "./ruler/XAxis";
 const Ruler = () => {
-  return <div><Axis labels={["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]} /></div>
+  const labels = Array.from({ length: 11 }, (_, index) => index);
+  return (
+    <div className="absolute w-full bottom-[20%] left-0">
+      <XAxis labels={labels} />
+    </div>
+  );
 };
 
 export default Ruler;
-

src/components/Toolbar.tsx

@@ -0,0 +1,2 @@
+const Toolbar = () => {};
+export default Toolbar;

src/components/ruler/XAxis.tsx

@@ -0,0 +1,17 @@
+interface IProps {
+  labels: number[];
+}
+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>
+  );
+};
+
+export default XAxis;

src/main.tsx

@@ -1,10 +1,10 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import './globals.css'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+import "./globals.css";
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
+ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-)
+  </React.StrictMode>
+);