BlockImage() — ui Function Reference

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

Function tsx Internationalization RTLLayout

Entity Profile

Internationalization→ RTLLayout→ BlockImage() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/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>
  )
}