BlockImage() — ui Function Reference

Architecture documentation for the BlockImage() function in block-image.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ BlockImage() — ui Function Reference

Dependency Diagram

graph TD
  4b6ff892_5a84_4d88_7f8a_59d94152acf9["BlockImage()"]
  7a7cce26_16a2_0edb_2e60_046cad2efc49["block-image.tsx"]
  4b6ff892_5a84_4d88_7f8a_59d94152acf9 -->|defined in| 7a7cce26_16a2_0edb_2e60_046cad2efc49
  style 4b6ff892_5a84_4d88_7f8a_59d94152acf9 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/components/block-image.tsx lines 5–36

export function BlockImage({
  name,
  width = 1440,
  height = 900,
  className,
}: Omit<React.ComponentProps<typeof Image>, "src" | "alt"> & { name: string }) {
  return (
    <div
      className={cn(
        "relative aspect-[1440/900] w-full overflow-hidden rounded-lg",
        className
      )}
    >
      <Image
        src={`/r/styles/new-york/${name}-light.png`}
        alt={name}
        width={width}
        height={height}
        className="object-cover dark:hidden"
        data-image="light"
      />
      <Image
        src={`/r/styles/new-york/${name}-dark.png`}
        alt={name}
        width={width}
        height={height}
        className="hidden object-cover dark:block"
        data-image="dark"
      />
    </div>
  )
}