AspectRatioDemo() — ui Function Reference

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

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ AspectRatioDemo() — ui Function Reference

Dependency Diagram

graph TD
  13c6fbec_e490_1a38_d5c4_44de2a2f94ca["AspectRatioDemo()"]
  68ea9e53_3a4a_a341_9a40_16df69e19c56["aspect-ratio-demo.tsx"]
  13c6fbec_e490_1a38_d5c4_44de2a2f94ca -->|defined in| 68ea9e53_3a4a_a341_9a40_16df69e19c56
  style 13c6fbec_e490_1a38_d5c4_44de2a2f94ca fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(internal)/sink/components/aspect-ratio-demo.tsx lines 5–26

export function AspectRatioDemo() {
  return (
    <div className="grid w-full max-w-sm items-start gap-4">
      <AspectRatio ratio={16 / 9} className="bg-muted rounded-lg">
        <Image
          src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
          alt="Photo by Drew Beamer"
          fill
          className="h-full w-full rounded-lg object-cover dark:brightness-[0.2] dark:grayscale"
        />
      </AspectRatio>
      <AspectRatio ratio={1 / 1} className="bg-muted rounded-lg">
        <Image
          src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
          alt="Photo by Drew Beamer"
          fill
          className="h-full w-full rounded-lg object-cover dark:brightness-[0.2] dark:grayscale"
        />
      </AspectRatio>
    </div>
  )
}