CommandRtl() — ui Function Reference

Architecture documentation for the CommandRtl() function in command-rtl.tsx from the ui codebase.

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ CommandRtl() — ui Function Reference

Dependency Diagram

graph TD
  461a7d8e_8989_509e_a550_2dfc0f1eca7c["CommandRtl()"]
  fdf91ee1_d9b0_64dd_50db_1b4a7e984adf["command-rtl.tsx"]
  461a7d8e_8989_509e_a550_2dfc0f1eca7c -->|defined in| fdf91ee1_d9b0_64dd_50db_1b4a7e984adf
  style 461a7d8e_8989_509e_a550_2dfc0f1eca7c fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/command-rtl.tsx lines 73–116

export function CommandRtl() {
  const { dir, t } = useTranslation(translations, "ar")

  return (
    <Command className="max-w-sm rounded-lg border" dir={dir}>
      <CommandInput placeholder={t.placeholder} dir={dir} />
      <CommandList>
        <CommandEmpty>{t.empty}</CommandEmpty>
        <CommandGroup heading={t.suggestions}>
          <CommandItem>
            <Calendar />
            <span>{t.calendar}</span>
          </CommandItem>
          <CommandItem>
            <Smile />
            <span>{t.searchEmoji}</span>
          </CommandItem>
          <CommandItem disabled>
            <Calculator />
            <span>{t.calculator}</span>
          </CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading={t.settings}>
          <CommandItem>
            <User />
            <span>{t.profile}</span>
            <CommandShortcut>⌘P</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <CreditCard />
            <span>{t.billing}</span>
            <CommandShortcut>⌘B</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <Settings />
            <span>{t.settings}</span>
            <CommandShortcut>⌘S</CommandShortcut>
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  )
}