ComponentPreviewTabs() — ui Function Reference

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

Function tsx Internationalization RTLLayout

Entity Profile

Internationalization→ RTLLayout→ ComponentPreviewTabs() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/components/component-preview-tabs.tsx lines 25–177

export function ComponentPreviewTabs({
  className,
  previewClassName,
  align = "center",
  hideCode = false,
  chromeLessOnMobile = false,
  component,
  source,
  sourcePreview,
  direction = "ltr",
  styleName,
  ...props
}: React.ComponentProps<"div"> & {
  previewClassName?: string
  align?: "center" | "start" | "end"
  hideCode?: boolean
  chromeLessOnMobile?: boolean
  component: React.ReactNode
  source: React.ReactNode
  sourcePreview?: React.ReactNode
  direction?: "ltr" | "rtl"
  styleName?: string
}) {
  const [isMobileCodeVisible, setIsMobileCodeVisible] = React.useState(false)
  const base = styleName?.split("-")[0]

  return (
    <div
      data-slot="component-preview"
      className={cn(
        "group relative mt-4 mb-12 flex flex-col overflow-hidden rounded-xl border",
        className
      )}
      {...props}
    >
      {direction === "rtl" ? (
        <LanguageProvider defaultLanguage="ar">
          <div className="flex h-16 items-center border-b px-4">
            <RtlLanguageSelector />
            <Popover>
              <PopoverTrigger
                render={
                  <Button
                    variant="ghost"
                    size="icon-sm"
                    className="ml-auto size-7"
                  >
                    <IconAlertCircle />
                    <span className="sr-only">Toggle</span>
                  </Button>
                }
              ></PopoverTrigger>
              <PopoverContent
                side="bottom"
                align="end"
                className="w-56 text-xs"
              >
                <div>
                  I used AI to translate the text for demonstration purposes.
                  It&apos;s not perfect and may contain errors.
                </div>
                <Separator className="-mx-2.5 w-auto!" />
                <div data-lang="ar">
                  لقد استخدمت الذكاء الاصطناعي لترجمة النص للأغراض التجريبية
                  فقط. قد لا تكون الترجمة دقيقة وقد تحتوي على أخطاء.
                </div>
                <Separator className="-mx-2.5 w-auto!" />
                <div data-lang="he">
                  השתמשתי בבינה מלאכותית כדי לתרגם את הטקסט למטרות הדגמה. זה לא
                  מושלם ויכול להכיל שגיאות.
                </div>
              </PopoverContent>
            </Popover>
          </div>
          <PreviewWrapper
            align={align}
            chromeLessOnMobile={chromeLessOnMobile}
            previewClassName={previewClassName}
          >
            <DirectionProviderWrapper base={base}>
              {component}