all install nitric components should have same OS state

Author: davemooreuws

src/app/providers.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect } from 'react'
 import { ThemeProvider, useTheme } from 'next-themes'
+import { OSProvider } from '@/components/InstallNitric/OSContext'
 
 function ThemeWatcher() {
   let { resolvedTheme, setTheme } = useTheme()
@@ -31,7 +32,7 @@ export function Providers({ children }: { children: React.ReactNode }) {
   return (
     <ThemeProvider attribute="class" disableTransitionOnChange>
       <ThemeWatcher />
-      {children}
+      <OSProvider>{children}</OSProvider>
     </ThemeProvider>
   )
 }

src/components/InstallNitric/InstallNitricTabs.client.tsx

@@ -1,50 +1,24 @@
 'use client'
 
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import { HighlightedCode, RawCode } from 'codehike/code'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs'
 import Pre from '../code/Pre'
+import { OS, useOS } from './OSContext'
 
 interface InstallNitricProps {
   highlighted: HighlightedCode[]
   tabs: RawCode[]
 }
 
-// this function detects the operating system of the user and returns the name that will be used to sort the instructions
-function detectOS() {
-  const userAgent = window.navigator.userAgent
-  if (userAgent.includes('Mac')) {
-    return 'macOS'
-  } else if (userAgent.includes('Win')) {
-    return 'Windows'
-  }
-
-  return 'Linux'
-}
-
 export const InstallNitricTabs: React.FC<InstallNitricProps> = ({
   highlighted,
   tabs,
 }) => {
-  const [value, setValue] = useState('')
-
-  useEffect(() => {
-    // this will only run on the client side
-    const OS = detectOS()
-
-    highlighted.some((code) => {
-      // check based on the title prop of the children with the detected OS
-      if (code.meta === OS) {
-        setValue(code.meta)
-        return true
-      }
-    })
-  }, [])
-
-  if (!value) return null
+  const { currentOS, setCurrentOS } = useOS()
 
   return (
-    <Tabs value={value} onValueChange={setValue}>
+    <Tabs value={currentOS} onValueChange={(val) => setCurrentOS(val as OS)}>
       <TabsList className="mt-auto h-10 bg-transparent">
         {tabs.map((tab) => (
           <TabsTrigger

src/components/InstallNitric/OSContext.tsx

@@ -0,0 +1,52 @@
+'use client'
+
+import React, {
+  createContext,
+  PropsWithChildren,
+  useContext,
+  useEffect,
+  useState,
+} from 'react'
+
+export type OS = 'Windows' | 'macOS' | 'Linux'
+
+export interface OSContextProps {
+  currentOS: OS
+  setCurrentOS: (os: OS) => void
+}
+
+// this function detects the operating system of the user and returns the name that will be used to sort the instructions
+function detectOS() {
+  const userAgent = window.navigator.userAgent
+  if (userAgent.includes('Mac')) {
+    return 'macOS'
+  } else if (userAgent.includes('Win')) {
+    return 'Windows'
+  }
+
+  return 'Linux'
+}
+
+export const OSContext = createContext<OSContextProps>({
+  currentOS: 'macOS', // Default value
+  setCurrentOS: () => {}, // Default value
+})
+
+export const OSProvider: React.FC<PropsWithChildren> = ({ children }) => {
+  const [currentOS, setCurrentOS] = useState<OS>('macOS') // Set the initial OS here
+
+  useEffect(() => {
+    // this will only run on the client side
+    setCurrentOS(detectOS())
+  }, [])
+
+  return (
+    <OSContext.Provider value={{ currentOS, setCurrentOS }}>
+      {children}
+    </OSContext.Provider>
+  )
+}
+
+export const useOS = (): OSContextProps => {
+  return useContext(OSContext)
+}