imported files from google gemini ai BUILD env

components/UnitSystemToggle.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+interface UnitSystemToggleProps {
+  currentSystem: 'metric' | 'imperial';
+  onToggle: () => void;
+}
+
+export const UnitSystemToggle: React.FC<UnitSystemToggleProps> = ({ currentSystem, onToggle }) => {
+  const isImperial = currentSystem === 'imperial';
+
+  return (
+    <div className="flex items-center space-x-2">
+      <span className={`text-sm font-medium ${isImperial ? 'text-gray-400 dark:text-gray-500' : 'text-gray-700 dark:text-gray-200'}`}>
+        Metric
+      </span>
+      <label htmlFor="unit-system-toggle" className="relative inline-flex items-center cursor-pointer">
+        <input
+          type="checkbox"
+          id="unit-system-toggle"
+          className="sr-only peer"
+          checked={isImperial}
+          onChange={onToggle}
+        />
+        <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-brand-primary/50 dark:peer-focus:ring-brand-secondary rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-brand-primary"></div>
+      </label>
+      <span className={`text-sm font-medium ${isImperial ? 'text-gray-700 dark:text-gray-200' : 'text-gray-400 dark:text-gray-500'}`}>
+        Imperial
+      </span>
+    </div>
+  );
+};