DocsBaseSwitcher() — ui Function Reference

Architecture documentation for the DocsBaseSwitcher() function in docs-base-switcher.tsx from the ui codebase.

Function tsx Internationalization RTLLayout

Entity Profile

Internationalization→ RTLLayout→ DocsBaseSwitcher() — ui Function Reference

Dependency Diagram

graph TD
  094f07d1_9156_0ed5_3c53_257f5b30d551["DocsBaseSwitcher()"]
  17c333aa_bf45_357a_f834_7ae8a18eb16c["docs-base-switcher.tsx"]
  094f07d1_9156_0ed5_3c53_257f5b30d551 -->|defined in| 17c333aa_bf45_357a_f834_7ae8a18eb16c
  style 094f07d1_9156_0ed5_3c53_257f5b30d551 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/components/docs-base-switcher.tsx lines 6–39

export function DocsBaseSwitcher({
  base,
  component,
  className,
}: {
  base: string
  component: string
  className?: string
}) {
  const activeBase = BASES.find((baseItem) => base === baseItem.name)

  return (
    <div className={cn("inline-flex w-full items-center gap-6", className)}>
      {BASES.map((baseItem) => (
        <Link
          key={baseItem.name}
          href={`/docs/components/${baseItem.name}/${component}`}
          data-active={base === baseItem.name}
          className="text-muted-foreground hover:text-foreground data-[active=true]:text-foreground after:bg-foreground relative inline-flex items-center justify-center gap-1 pt-1 pb-0.5 text-base font-medium transition-colors after:absolute after:inset-x-0 after:bottom-[-4px] after:h-0.5 after:opacity-0 after:transition-opacity data-[active=true]:after:opacity-100"
        >
          {baseItem.title}
        </Link>
      ))}
      {activeBase?.meta?.logo && (
        <div
          className="text-muted-foreground ml-auto size-4 shrink-0 opacity-80 [&_svg]:size-4"
          dangerouslySetInnerHTML={{
            __html: activeBase.meta.logo,
          }}
        />
      )}
    </div>
  )
}