diff --git a/bun.lock b/bun.lock index 49dfbd2..3e05da7 100644 --- a/bun.lock +++ b/bun.lock @@ -4,6 +4,7 @@ "": { "name": "baraha-town", "dependencies": { + "clsx": "^2.1.1", "react": "^19.2.0", "react-dom": "^19.2.0", "react-router": "^7.9.5", @@ -243,6 +244,8 @@ "chokidar": ["chokidar@3.6.0", "", { "dependencies": { "anymatch": "~3.1.2", "braces": "~3.0.2", "glob-parent": "~5.1.2", "is-binary-path": "~2.1.0", "is-glob": "~4.0.1", "normalize-path": "~3.0.0", "readdirp": "~3.6.0" }, "optionalDependencies": { "fsevents": "~2.3.2" } }, "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw=="], + "clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="], + "color-convert": ["color-convert@2.0.1", "", { "dependencies": { "color-name": "~1.1.4" } }, "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ=="], "color-name": ["color-name@1.1.4", "", {}, "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="], diff --git a/package.json b/package.json index a6738ae..5e8f0fb 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "preview": "vite preview" }, "dependencies": { + "clsx": "^2.1.1", "react": "^19.2.0", "react-dom": "^19.2.0", "react-router": "^7.9.5" diff --git a/src/App.tsx b/src/App.tsx index 6f74d94..2d593f1 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,28 @@ +import { useState } from "react"; +import Compass from "./components/Compass"; + function App() { - return
; + const [degrees, setDegrees] = useState(0); + + return ( +
+ +
+ + +
+
+ ); } export default App; diff --git a/src/components/Compass.tsx b/src/components/Compass.tsx new file mode 100644 index 0000000..bfc4104 --- /dev/null +++ b/src/components/Compass.tsx @@ -0,0 +1,191 @@ +function Compass({ degrees }: { degrees: number }) { + const normalized = ((degrees % 360) + 360) % 360; + const letter = + normalized === 0 + ? "N" + : normalized === 90 + ? "W" + : normalized === 180 + ? "S" + : normalized === 270 + ? "E" + : ""; + + return ( +
+
+ + + + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + +
+

+ {letter} +

+

+ {letter} +

+
+
+

+ N +

+
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
+ ); +} + +export default Compass; diff --git a/tailwind.config.js b/tailwind.config.js index 614c86b..656f6ff 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -3,6 +3,9 @@ export default { content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], theme: { extend: {}, + screens: { + "2xl": "1440px", + }, }, plugins: [], };