PopoverRtl() — ui Function Reference

Architecture documentation for the PopoverRtl() function in popover-rtl.tsx from the ui codebase.

Function tsx DocumentationAtlas ContentSourcing

Entity Profile

DocumentationAtlas→ ContentSourcing→ PopoverRtl() — ui Function Reference

Dependency Diagram

graph TD
  7e268219_1a21_0c4a_4b19_45bf26ffdccc["PopoverRtl()"]
  a485cd5f_ff94_3e09_18de_72684a02e59e["popover-rtl.tsx"]
  7e268219_1a21_0c4a_4b19_45bf26ffdccc -->|defined in| a485cd5f_ff94_3e09_18de_72684a02e59e
  style 7e268219_1a21_0c4a_4b19_45bf26ffdccc fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/radix/popover-rtl.tsx lines 56–76

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

  return (
    <div className="flex flex-wrap justify-center gap-2">
      {physicalSides.map((side) => (
        <Popover key={side}>
          <PopoverTrigger asChild>
            <Button variant="outline">{t[side]}</Button>
          </PopoverTrigger>
          <PopoverContent side={side} dir={dir}>
            <PopoverHeader>
              <PopoverTitle>{t.title}</PopoverTitle>
              <PopoverDescription>{t.description}</PopoverDescription>
            </PopoverHeader>
          </PopoverContent>
        </Popover>
      ))}
    </div>
  )
}