RtlComponentsContent() — ui Function Reference

Architecture documentation for the RtlComponentsContent() function in index.tsx from the ui codebase.

Function tsx Internationalization Dictionary

Entity Profile

Internationalization→ Dictionary→ RtlComponentsContent() — ui Function Reference

Dependency Diagram

graph TD
  0c284000_bb27_9b75_71bb_ef31bf214604["RtlComponentsContent()"]
  a20493d4_39f4_bced_97b9_027078a02a91["index.tsx"]
  0c284000_bb27_9b75_71bb_ef31bf214604 -->|defined in| a20493d4_39f4_bced_97b9_027078a02a91
  style 0c284000_bb27_9b75_71bb_ef31bf214604 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(app)/examples/rtl/components/index.tsx lines 29–82

function RtlComponentsContent() {
  const context = useLanguageContext()

  if (!context) {
    return null
  }

  const { language } = context

  return (
    <div
      className="relative grid gap-8 p-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-6 2xl:gap-8"
      dir="rtl"
      data-lang={language}
      data-slot="rtl-components"
    >
      <LanguageSelector
        value={language}
        onValueChange={context.setLanguage}
        className="absolute -top-12 right-52 hidden h-8! data-[size=sm]:rounded-lg lg:flex"
        languages={["ar", "he"]}
      />
      <div className="flex flex-col gap-6 *:[div]:w-full *:[div]:max-w-full">
        <FieldDemo />
      </div>
      <div className="flex flex-col gap-6 *:[div]:w-full *:[div]:max-w-full">
        <EmptyAvatarGroup />
        <SpinnerBadge />
        <ButtonGroupInputGroup />
        <FieldSlider />
        <InputGroupDemo />
      </div>
      <div className="flex flex-col gap-6 *:[div]:w-full *:[div]:max-w-full">
        <InputGroupButtonExample />
        <ItemDemo />
        <FieldSeparator className="my-4">
          {language === "he" ? "הגדרות מראה" : "إعدادات المظهر"}
        </FieldSeparator>
        <AppearanceSettings />
      </div>
      <div className="order-first flex flex-col gap-6 lg:hidden xl:order-last xl:flex *:[div]:w-full *:[div]:max-w-full">
        <NotionPromptForm />
        <ButtonGroupDemo />
        <FieldCheckbox />
        <div className="flex justify-between gap-4">
          <ButtonGroupNested />
          <ButtonGroupPopover />
        </div>
        <FieldHear />
        <SpinnerEmpty />
      </div>
    </div>
  )
}