feat: move the unit selection above the inputs, make it blue

index.html

@@ -15,11 +15,22 @@
       <main class="grid gap-8">
         <!-- Inputs Section -->
         <section class="bg-white p-6 rounded-xl shadow-sm border border-slate-200">
-          <h2 class="text-xl font-semibold mb-4 flex items-center gap-2">
+          <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-6 pb-6 border-b border-slate-100">
-            Drawer Dimensions
+            <h2 class="text-xl font-semibold flex items-center gap-2">
-          </h2>
+              Drawer Dimensions
+            </h2>
+            
+            <div class="flex items-center gap-3">
+              <label class="text-sm font-medium text-slate-700">Units:</label>
+              <div class="flex bg-slate-100 p-1 rounded-lg">
+                <button id="unit-mm" class="px-4 py-1 rounded-md text-sm font-medium text-slate-600 hover:text-slate-900 transition-colors">mm</button>
+                <button id="unit-in" class="px-4 py-1 rounded-md text-sm font-medium bg-blue-600 text-white shadow-sm transition-colors">inches</button>
+              </div>
+            </div>
+
+          </div>
           
-          <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
             <div>
               <label class="block text-sm font-medium text-slate-700 mb-1">Width</label>
               <input type="number" id="input-width" class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="0" step="any" />
@@ -33,14 +44,6 @@
               <input type="number" id="input-height" class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="0" step="any" />
             </div>
           </div>
-
-          <div class="flex items-center gap-4">
-            <label class="text-sm font-medium text-slate-700">Units:</label>
-            <div class="flex bg-slate-100 p-1 rounded-lg">
-              <button id="unit-mm" class="px-4 py-1 rounded-md text-sm font-medium bg-white shadow-sm">mm</button>
-              <button id="unit-in" class="px-4 py-1 rounded-md text-sm font-medium text-slate-600 hover:text-slate-900">inches</button>
-            </div>
-          </div>
         </section>
 
         <!-- Results Section -->

src/main.ts

@@ -22,7 +22,7 @@ const gapLength = document.getElementById('gap-length') as HTMLElement;
 const gapHeight = document.getElementById('gap-height') as HTMLElement;
 
 // State
-let currentUnit: 'mm' | 'in' = 'mm';
+let currentUnit: 'mm' | 'in' = 'in';
 
 function updateResults() {
   const width = parseFloat(inputWidth.value) || 0;
@@ -68,6 +68,20 @@ function updateResults() {
   el.addEventListener('input', updateResults);
 });
 
+function setUnitStyles(unit: 'mm' | 'in') {
+  if (unit === 'in') {
+    unitInBtn.classList.add('bg-blue-600', 'text-white', 'shadow-sm');
+    unitInBtn.classList.remove('text-slate-600', 'hover:text-slate-900');
+    unitMmBtn.classList.remove('bg-blue-600', 'text-white', 'shadow-sm');
+    unitMmBtn.classList.add('text-slate-600', 'hover:text-slate-900');
+  } else {
+    unitMmBtn.classList.add('bg-blue-600', 'text-white', 'shadow-sm');
+    unitMmBtn.classList.remove('text-slate-600', 'hover:text-slate-900');
+    unitInBtn.classList.remove('bg-blue-600', 'text-white', 'shadow-sm');
+    unitInBtn.classList.add('text-slate-600', 'hover:text-slate-900');
+  }
+}
+
 unitMmBtn.addEventListener('click', () => {
   if (currentUnit === 'mm') return;
 
@@ -81,10 +95,7 @@ unitMmBtn.addEventListener('click', () => {
   if (height > 0) inputHeight.value = convertUnits(height, 'in', 'mm').toFixed(1);
 
   currentUnit = 'mm';
-  unitMmBtn.classList.add('bg-white', 'shadow-sm');
+  setUnitStyles('mm');
-  unitMmBtn.classList.remove('text-slate-600');
-  unitInBtn.classList.remove('bg-white', 'shadow-sm');
-  unitInBtn.classList.add('text-slate-600');
   updateResults();
 });
 
@@ -101,12 +112,10 @@ unitInBtn.addEventListener('click', () => {
   if (height > 0) inputHeight.value = convertUnits(height, 'mm', 'in').toFixed(2);
 
   currentUnit = 'in';
-  unitInBtn.classList.add('bg-white', 'shadow-sm');
+  setUnitStyles('in');
-  unitInBtn.classList.remove('text-slate-600');
-  unitMmBtn.classList.remove('bg-white', 'shadow-sm');
-  unitMmBtn.classList.add('text-slate-600');
   updateResults();
 });
 
 // Initial call
 updateResults();
+setUnitStyles(currentUnit);