install nitric component

Author: davemooreuws

src/components/InstallNitric.tsx

@@ -0,0 +1,24 @@
+import React, { Suspense } from 'react'
+import { highlight } from 'codehike/code'
+import { Schema } from '../code/CodeWithTabs'
+import { parseProps } from 'codehike/blocks'
+import CODE_THEME from '@/components/code/theme'
+import { InstallNitricTabs } from './InstallNitricTabs.client'
+import Pre from '../code/Pre'
+import CodeContainer from '../code/CodeContainer'
+
+export const InstallNitric: React.FC = async (props) => {
+  const { tabs } = parseProps(props, Schema)
+
+  const highlighted = await Promise.all(
+    tabs.map((tab) => highlight(tab, CODE_THEME)),
+  )
+
+  return (
+    <CodeContainer>
+      <Suspense fallback={<Pre highlighted={highlighted[0]} {...props} />}>
+        <InstallNitricTabs highlighted={highlighted} tabs={tabs} />
+      </Suspense>
+    </CodeContainer>
+  )
+}

src/components/InstallNitric/InstallNitric.tsx

@@ -0,0 +1,71 @@
+'use client'
+
+import React, { useEffect, useState } from 'react'
+import { HighlightedCode, RawCode } from 'codehike/code'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs'
+import Pre from '../code/Pre'
+
+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
+
+  return (
+    <Tabs value={value} onValueChange={setValue}>
+      <TabsList className="mt-auto h-10 bg-transparent">
+        {tabs.map((tab) => (
+          <TabsTrigger
+            key={tab.meta}
+            value={tab.meta}
+            className="group/tab relative hover:text-zinc-200 data-[state=active]:bg-transparent data-[state=active]:text-primary-300"
+          >
+            {tab.meta}
+            <div className="absolute inset-x-2 -bottom-[4.5px] h-px bg-primary-300 opacity-0 transition-opacity group-data-[state=active]/tab:opacity-100" />
+          </TabsTrigger>
+        ))}
+      </TabsList>
+      {tabs.map((tab, i) => (
+        <TabsContent
+          key={tab.meta}
+          value={tab.meta}
+          className="m-0 border-t border-zinc-300/10"
+        >
+          <Pre highlighted={highlighted[i]} />
+        </TabsContent>
+      ))}
+    </Tabs>
+  )
+}

src/components/InstallNitric/InstallNitricTabs.client.tsx

@@ -0,0 +1 @@
+export { InstallNitric } from './InstallNitric'

src/components/InstallNitric/index.ts

@@ -1,23 +1,29 @@
 import React from 'react'
 import { Block, CodeBlock, parseProps } from 'codehike/blocks'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
-import { highlight, RawCode } from 'codehike/code'
+import { highlight, HighlightedCode, RawCode } from 'codehike/code'
 import { z } from 'zod'
 import Pre from './Pre'
 import CodeContainer from './CodeContainer'
 import CODE_THEME from './theme'
 
-const Schema = Block.extend({ tabs: z.array(CodeBlock) })
+export const Schema = Block.extend({ tabs: z.array(CodeBlock) })
 export async function CodeWithTabs(props: unknown) {
   const { tabs } = parseProps(props, Schema)
-  return <CodeTabs tabs={tabs} />
-}
 
-export async function CodeTabs(props: { tabs: RawCode[] }) {
-  const { tabs } = props
   const highlighted = await Promise.all(
     tabs.map((tab) => highlight(tab, CODE_THEME)),
   )
+
+  return <CodeTabs tabs={tabs} highlighted={highlighted} />
+}
+
+export function CodeTabs(props: {
+  tabs: RawCode[]
+  highlighted: HighlightedCode[]
+}) {
+  const { tabs, highlighted } = props
+
   return (
     <CodeContainer>
       <Tabs defaultValue={tabs[0]?.meta}>