PreviewWrapper() — ui Function Reference

Architecture documentation for the PreviewWrapper() function in component-preview-tabs.tsx from the ui codebase.

Function tsx Internationalization RTLLayout

Entity Profile

Internationalization→ RTLLayout→ PreviewWrapper() — ui Function Reference

Dependency Diagram

graph TD
  adfac4ee_0620_fe2d_8fe8_65f16bb554ba["PreviewWrapper()"]
  4f013dc0_9743_fe6f_61c3_b1ba0cbcf391["component-preview-tabs.tsx"]
  adfac4ee_0620_fe2d_8fe8_65f16bb554ba -->|defined in| 4f013dc0_9743_fe6f_61c3_b1ba0cbcf391
  style adfac4ee_0620_fe2d_8fe8_65f16bb554ba fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/components/component-preview-tabs.tsx lines 208–244

function PreviewWrapper({
  align,
  chromeLessOnMobile,
  previewClassName,
  dir: explicitDir,
  children,
}: {
  align: "center" | "start" | "end"
  chromeLessOnMobile: boolean
  previewClassName?: string
  dir?: "ltr" | "rtl"
  children: React.ReactNode
}) {
  // useTranslation handles the case when there's no LanguageProvider context.
  // It will fall back to local state with defaultLanguage.
  const translation = useTranslation(directionTranslations, "ar")
  const dir = explicitDir ?? translation.dir

  return (
    <div
      data-slot="preview"
      dir={dir}
      data-lang={dir === "rtl" ? translation.language : undefined}
    >
      <div
        data-align={align}
        data-chromeless={chromeLessOnMobile}
        className={cn(
          "preview relative flex h-72 w-full justify-center p-10 data-[align=center]:items-center data-[align=end]:items-end data-[align=start]:items-start data-[chromeless=true]:h-auto data-[chromeless=true]:p-0",
          previewClassName
        )}
      >
        {children}
      </div>
    </div>
  )
}