feat: landing page mvp

components/platform-toggle.tsx

@@ -0,0 +1,60 @@
+'use client'
+
+import { createContext, useContext, useState, useEffect, type ReactNode } from 'react'
+
+export type Platform = 'linux' | 'macos'
+
+const PlatformContext = createContext<{
+  platform: Platform
+  setPlatform: (p: Platform) => void
+}>({ platform: 'linux', setPlatform: () => {} })
+
+export function PlatformProvider({ children }: { children: ReactNode }) {
+  const [platform, setPlatform] = useState<Platform>('linux')
+
+  useEffect(() => {
+    if (navigator.userAgent.includes('Mac')) {
+      setPlatform('macos')
+    }
+  }, [])
+
+  return (
+    <PlatformContext.Provider value={{ platform, setPlatform }}>
+      {children}
+    </PlatformContext.Provider>
+  )
+}
+
+export function usePlatform() {
+  const { platform, setPlatform } = useContext(PlatformContext)
+  return [platform, setPlatform] as const
+}
+
+export function PlatformToggle() {
+  const [platform, setPlatform] = usePlatform()
+
+  return (
+    <div className="inline-flex items-center rounded-lg border border-border/50 bg-card/30 p-0.5">
+      <button
+        onClick={() => setPlatform('linux')}
+        className={`px-4 py-1.5 rounded-md text-xs font-sans font-medium transition-all ${
+          platform === 'linux'
+            ? 'bg-primary text-primary-foreground shadow-sm'
+            : 'text-muted-foreground hover:text-foreground'
+        }`}
+      >
+        Linux
+      </button>
+      <button
+        onClick={() => setPlatform('macos')}
+        className={`px-4 py-1.5 rounded-md text-xs font-sans font-medium transition-all ${
+          platform === 'macos'
+            ? 'bg-primary text-primary-foreground shadow-sm'
+            : 'text-muted-foreground hover:text-foreground'
+        }`}
+      >
+        macOS
+      </button>
+    </div>
+  )
+}