AspectRatioRtl() — ui Function Reference

Architecture documentation for the AspectRatioRtl() function in aspect-ratio-rtl.tsx from the ui codebase.

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ AspectRatioRtl() — ui Function Reference

Dependency Diagram

graph TD
  d3f985b8_94c3_777b_defa_223b40ee6762["AspectRatioRtl()"]
  b3942095_ebda_8e93_7c8c_e210fd535050["aspect-ratio-rtl.tsx"]
  d3f985b8_94c3_777b_defa_223b40ee6762 -->|defined in| b3942095_ebda_8e93_7c8c_e210fd535050
  style d3f985b8_94c3_777b_defa_223b40ee6762 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/aspect-ratio-rtl.tsx lines 33–51

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

  return (
    <figure className="w-full max-w-sm" dir={dir}>
      <AspectRatio ratio={16 / 9} className="bg-muted rounded-lg">
        <Image
          src="https://avatar.vercel.sh/shadcn1"
          alt="Photo"
          fill
          className="rounded-lg object-cover grayscale dark:brightness-20"
        />
      </AspectRatio>
      <figcaption className="text-muted-foreground mt-2 text-center text-sm">
        {t.caption}
      </figcaption>
    </figure>
  )
}