use mantine styles as well

package.json

@@ -4,7 +4,6 @@
   "private": true,
   "dependencies": {
     "@mantine/core": "^7.10.0",
-    "@mantine/hooks": "^7.10.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "react": "^18.3.1",
@@ -37,4 +36,4 @@
   "devDependencies": {
     "tailwindcss": "^3.4.3"
   }
-}
+}

src/LoopStart.tsx

@@ -1,6 +1,6 @@
 import { useMemo, useState } from 'react';
-import { getLoopStart, getMaxBars } from "./utils";
 import { NumberInput } from "./NumberInput";
+import { getLoopStart, getMaxBars } from "./utils";
 
 export const LoopStart = () => {
   const [bpm, setBPM] = useState(90);
@@ -20,7 +20,7 @@ export const LoopStart = () => {
       <h1 className="text-3xl font-bold m-2"> SP 404 Perfect Loop Start Calculator:</h1>
       BPM: <NumberInput defaultValue={bpm} onUpdate={setBPM} />
       Sample Length: <NumberInput defaultValue={sampleLength} onUpdate={setSampleLength} />
-      Number of Bars (max. {maxBars}): <NumberInput defaultValue={numberOfBars} onUpdate={setNumberOfBars} max={maxBars}/>
+      Number of Bars (max. {maxBars}): <NumberInput defaultValue={numberOfBars} onUpdate={setNumberOfBars} max={maxBars} />
       <label>Loop Start:</label>
       <div className="text-lg">{loopStart}</div>
     </div>

src/NumberInput.tsx

@@ -1,4 +1,4 @@
-import {NumberInput as MantineNumberInput, NumberInputProps as MantineNumberInputProps} from "@mantine/core";
+import { NumberInput as MantineNumberInput, NumberInputProps as MantineNumberInputProps } from "@mantine/core";
 
 interface NumberInputProps extends MantineNumberInputProps {
     onUpdate: (value: number) => void;
@@ -8,6 +8,6 @@ export const NumberInput = (props: NumberInputProps) => {
 
     const onChange = (value: string | number) => props.onUpdate(+value)
 
-    return <MantineNumberInput className="border-2 border-gray-400 w-fit rounded" onChange={onChange} allowNegative={false} hideControls allowDecimal={false} {...props}/>
+    return <MantineNumberInput className="" onChange={onChange} allowNegative={false} hideControls allowDecimal={false} {...props} />
 
 }

src/index.css

@@ -1,3 +1,5 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@import "@mantine/core/styles.css";

src/index.tsx

@@ -1,16 +1,17 @@
+import { MantineProvider } from "@mantine/core";
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import {MantineProvider} from "@mantine/core";
-import {LoopStart} from "./LoopStart";
-import './index.css'
+import { LoopStart } from "./LoopStart";
+import './index.css';
+
 
 const root = ReactDOM.createRoot(
     document.getElementById('root') as HTMLElement
 );
 root.render(
     <React.StrictMode>
-        <MantineProvider>
-            <LoopStart/>
+        <MantineProvider >
+            <LoopStart />
         </MantineProvider>
     </React.StrictMode>
 );

tsconfig.json

@@ -18,7 +18,6 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "noUnusedLocals": true,
     "jsx": "react-jsx"
   },
   "include": [