code-tabs.tsx — ui Source File

Architecture documentation for code-tabs.tsx, a tsx file in the ui codebase. 3 imports, 0 dependents.

File tsx Internationalization Dictionary 3 imports 1 functions

Entity Profile

Internationalization→ Dictionary→ code-tabs.tsx — ui Source File

Dependency Diagram

graph LR
  da569416_36c9_c1a1_e9bd_0fe3f1625b72["code-tabs.tsx"]
  1d141819_425e_b5fd_4c8e_32f7c6a42cf2["react"]
  da569416_36c9_c1a1_e9bd_0fe3f1625b72 --> 1d141819_425e_b5fd_4c8e_32f7c6a42cf2
  8c6845ea_e0db_55db_4a65_df2f64d9e581["use-config"]
  da569416_36c9_c1a1_e9bd_0fe3f1625b72 --> 8c6845ea_e0db_55db_4a65_df2f64d9e581
  ceb41313_de2c_98d6_0449_ab5301fbc3d3["tabs"]
  da569416_36c9_c1a1_e9bd_0fe3f1625b72 --> ceb41313_de2c_98d6_0449_ab5301fbc3d3
  style da569416_36c9_c1a1_e9bd_0fe3f1625b72 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

"use client"

import * as React from "react"

import { useConfig } from "@/hooks/use-config"
import { Tabs } from "@/registry/new-york-v4/ui/tabs"

export function CodeTabs({ children }: React.ComponentProps<typeof Tabs>) {
  const [config, setConfig] = useConfig()

  const installationType = React.useMemo(() => {
    return config.installationType || "cli"
  }, [config])

  return (
    <Tabs
      value={installationType}
      onValueChange={(value) =>
        setConfig({ ...config, installationType: value as "cli" | "manual" })
      }
      className="relative mt-6 w-full *:data-[slot=tabs-list]:gap-6"
    >
      {children}
    </Tabs>
  )
}