ui Architecture Docs
Home / File/ aspect-ratio-example.tsx — ui Source File

aspect-ratio-example.tsx — ui Source File

Architecture documentation for aspect-ratio-example.tsx, a tsx file in the ui codebase. 3 imports, 0 dependents.

File tsx ComponentRegistry ChartRegistry 3 imports 5 functions

Entity Profile

Dependency Diagram

graph LR
  bdf7ae01_98e7_2f6a_52d5_35d9d1f7eaba["aspect-ratio-example.tsx"]
  3eb36dd7_f51a_1431_02e2_7abafe315718["image"]
  bdf7ae01_98e7_2f6a_52d5_35d9d1f7eaba --> 3eb36dd7_f51a_1431_02e2_7abafe315718
  da02b53a_0c1d_d1a1_af31_74d99f1cdd7a["example"]
  bdf7ae01_98e7_2f6a_52d5_35d9d1f7eaba --> da02b53a_0c1d_d1a1_af31_74d99f1cdd7a
  027894cd_80d9_624b_944a_421794c3669d["aspect-ratio"]
  bdf7ae01_98e7_2f6a_52d5_35d9d1f7eaba --> 027894cd_80d9_624b_944a_421794c3669d
  style bdf7ae01_98e7_2f6a_52d5_35d9d1f7eaba fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import Image from "next/image"

import {
  Example,
  ExampleWrapper,
} from "@/registry/bases/radix/components/example"
import { AspectRatio } from "@/registry/bases/radix/ui/aspect-ratio"

export default function AspectRatioExample() {
  return (
    <ExampleWrapper className="max-w-4xl 2xl:max-w-4xl">
      <AspectRatio16x9 />
      <AspectRatio21x9 />
      <AspectRatio1x1 />
      <AspectRatio9x16 />
    </ExampleWrapper>
  )
}

function AspectRatio16x9() {
  return (
    <Example title="16:9" className="items-center justify-center">
      <AspectRatio ratio={16 / 9} className="bg-muted rounded-lg">
        <Image
          src="https://avatar.vercel.sh/shadcn1"
          alt="Photo"
          fill
          className="h-full w-full rounded-lg object-cover grayscale dark:brightness-20"
        />
      </AspectRatio>
    </Example>
  )
}

function AspectRatio1x1() {
  return (
    <Example title="1:1" className="items-start">
      <AspectRatio ratio={1 / 1} className="bg-muted rounded-lg">
        <Image
          src="https://avatar.vercel.sh/shadcn1"
          alt="Photo"
          fill
          className="h-full w-full rounded-lg object-cover grayscale dark:brightness-20"
        />
      </AspectRatio>
    </Example>
  )
}

function AspectRatio9x16() {
  return (
    <Example title="9:16" className="items-center justify-center">
      <AspectRatio ratio={9 / 16} className="bg-muted rounded-lg">
        <Image
          src="https://avatar.vercel.sh/shadcn1"
          alt="Photo"
          fill
          className="h-full w-full rounded-lg object-cover grayscale dark:brightness-20"
        />
      </AspectRatio>
    </Example>
  )
}

function AspectRatio21x9() {
  return (
    <Example title="21:9" className="items-center justify-center">
      <AspectRatio ratio={21 / 9} className="bg-muted rounded-lg">
        <Image
          src="https://avatar.vercel.sh/shadcn1"
          alt="Photo"
          fill
          className="h-full w-full rounded-lg object-cover grayscale dark:brightness-20"
        />
      </AspectRatio>
    </Example>
  )
}

Domain

Subdomains

Functions

Dependencies

  • aspect-ratio
  • example
  • image

Source

Frequently Asked Questions

What does aspect-ratio-example.tsx do?
aspect-ratio-example.tsx is a source file in the ui codebase, written in tsx. It belongs to the ComponentRegistry domain, ChartRegistry subdomain.
What functions are defined in aspect-ratio-example.tsx?
aspect-ratio-example.tsx defines 5 function(s): AspectRatio16x9, AspectRatio1x1, AspectRatio21x9, AspectRatio9x16, AspectRatioExample.
What does aspect-ratio-example.tsx depend on?
aspect-ratio-example.tsx imports 3 module(s): aspect-ratio, example, image.
Where is aspect-ratio-example.tsx in the architecture?
aspect-ratio-example.tsx is located at apps/v4/registry/bases/radix/examples/aspect-ratio-example.tsx (domain: ComponentRegistry, subdomain: ChartRegistry, directory: apps/v4/registry/bases/radix/examples).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free