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

aspect-ratio-demo.tsx — ui Source File

Architecture documentation for aspect-ratio-demo.tsx, a tsx file in the ui codebase. 2 imports, 1 dependents.

File tsx DocumentationAtlas SearchAPI 2 imports 1 dependents 1 functions

Entity Profile

Dependency Diagram

graph LR
  68ea9e53_3a4a_a341_9a40_16df69e19c56["aspect-ratio-demo.tsx"]
  3eb36dd7_f51a_1431_02e2_7abafe315718["image"]
  68ea9e53_3a4a_a341_9a40_16df69e19c56 --> 3eb36dd7_f51a_1431_02e2_7abafe315718
  e3ed96fd_c28b_2a00_ad1f_2205de41ebde["aspect-ratio"]
  68ea9e53_3a4a_a341_9a40_16df69e19c56 --> e3ed96fd_c28b_2a00_ad1f_2205de41ebde
  1c2403dc_4584_9f39_4e98_855a7de18bd1["component-registry.ts"]
  1c2403dc_4584_9f39_4e98_855a7de18bd1 --> 68ea9e53_3a4a_a341_9a40_16df69e19c56
  style 68ea9e53_3a4a_a341_9a40_16df69e19c56 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import Image from "next/image"

import { AspectRatio } from "@/registry/new-york-v4/ui/aspect-ratio"

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>
  )
}

Domain

Subdomains

Functions

Dependencies

  • aspect-ratio
  • image

Imported By

Source

Frequently Asked Questions

What does aspect-ratio-demo.tsx do?
aspect-ratio-demo.tsx is a source file in the ui codebase, written in tsx. It belongs to the DocumentationAtlas domain, SearchAPI subdomain.
What functions are defined in aspect-ratio-demo.tsx?
aspect-ratio-demo.tsx defines 1 function(s): AspectRatioDemo.
What does aspect-ratio-demo.tsx depend on?
aspect-ratio-demo.tsx imports 2 module(s): aspect-ratio, image.
What files import aspect-ratio-demo.tsx?
aspect-ratio-demo.tsx is imported by 1 file(s): component-registry.ts.
Where is aspect-ratio-demo.tsx in the architecture?
aspect-ratio-demo.tsx is located at apps/v4/app/(internal)/sink/components/aspect-ratio-demo.tsx (domain: DocumentationAtlas, subdomain: SearchAPI, directory: apps/v4/app/(internal)/sink/components).

Analyze Your Own Codebase

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

Try Supermodel Free