HoverCardRtl() — ui Function Reference

Architecture documentation for the HoverCardRtl() function in hover-card-rtl.tsx from the ui codebase.

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ HoverCardRtl() — ui Function Reference

Dependency Diagram

graph TD
  70fc4c97_444b_b180_aeb8_8948b244a1ec["HoverCardRtl()"]
  6dfe1e4d_f239_d8b0_b756_ef5a254312a2["hover-card-rtl.tsx"]
  70fc4c97_444b_b180_aeb8_8948b244a1ec -->|defined in| 6dfe1e4d_f239_d8b0_b756_ef5a254312a2
  style 70fc4c97_444b_b180_aeb8_8948b244a1ec fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/hover-card-rtl.tsx lines 63–112

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

  return (
    <div className="grid gap-4">
      <div className="flex flex-wrap justify-center gap-2">
        {physicalSides.map((side) => (
          <HoverCard key={side}>
            <HoverCardTrigger
              delay={10}
              closeDelay={100}
              render={<Button variant="outline" />}
            >
              {t[side]}
            </HoverCardTrigger>
            <HoverCardContent
              side={side}
              className="flex w-64 flex-col gap-1"
              dir={dir}
            >
              <div className="font-semibold">{t.name}</div>
              <div className="text-muted-foreground text-sm">{t.price}</div>
            </HoverCardContent>
          </HoverCard>
        ))}
      </div>
      <div className="flex flex-wrap justify-center gap-2">
        {logicalSides.map((side) => (
          <HoverCard key={side}>
            <HoverCardTrigger
              delay={10}
              closeDelay={100}
              render={<Button variant="outline" />}
            >
              {t[side]}
            </HoverCardTrigger>
            <HoverCardContent
              side={side}
              className="flex w-64 flex-col gap-1"
              dir={dir}
            >
              <div className="font-semibold">{t.name}</div>
              <div className="text-muted-foreground text-sm">{t.price}</div>
            </HoverCardContent>
          </HoverCard>
        ))}
      </div>
    </div>
  )
}