61 lines
1.7 KiB
TypeScript
61 lines
1.7 KiB
TypeScript
'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>
|
|
)
|
|
}
|