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
  4d01664b_bbad_a43c_a328_4078ecb6c8a1["PopoverRtl()"]
  c30299d2_0244_7ef9_a4fe_a1212a23f2e7["popover-rtl.tsx"]
  4d01664b_bbad_a43c_a328_4078ecb6c8a1 -->|defined in| c30299d2_0244_7ef9_a4fe_a1212a23f2e7
  style 4d01664b_bbad_a43c_a328_4078ecb6c8a1 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/popover-rtl.tsx lines 63–100

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

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