Devmode switch

Author: adairrr

examples/wagemos-xion-nextjs/package.json

@@ -26,6 +26,7 @@
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-switch": "^1.1.1",
     "@radix-ui/react-toast": "^1.1.5",
     "@tanstack/react-query": "^4.35.1",
     "@tanstack/react-query-devtools": "^5.40.0",

examples/wagemos-xion-nextjs/src/app/_components/header.tsx

@@ -1,3 +1,5 @@
+import { Switch } from '@radix-ui/react-switch'
+import { Label } from '../../components/ui/label'
 import { useDevMode } from '../_providers/dev-mode'
 import { WalletButton } from './wallet-button'
 
@@ -15,22 +17,23 @@ export const Header = () => {
 
         {/* Right section */}
         <div className="w-32 flex items-center justify-end gap-2">
-          <button
-            onClick={() => setDevMode(!devMode)}
-            className={`px-3 py-1.5 text-sm rounded-md transition-colors
-              ${
-                devMode
-                  ? 'bg-purple-100 text-purple-700 hover:bg-purple-200'
-                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
-              }`}
-            type={'button'}
-          >
-            {devMode ? 'Dev Mode On' : 'Dev Mode'}
-          </button>
+          <div className="flex items-center space-x-2">
+            <Switch
+              id="dev-mode"
+              checked={devMode}
+              onCheckedChange={setDevMode}
+            />
+            <Label
+              htmlFor="dev-mode"
+              className="text-sm font-medium leading-none"
+            >
+              Dev Mode
+            </Label>
+          </div>
+        </div>
+        <div className={'flex justify-end'}>
+          <WalletButton />
         </div>
-      </div>
-      <div className={'flex justify-end'}>
-        <WalletButton />
       </div>
     </header>
   )