block-image.tsx — ui Source File

Architecture documentation for block-image.tsx, a tsx file in the ui codebase. 2 imports, 0 dependents.

File tsx Internationalization RTLLayout 2 imports 1 functions

Entity Profile

Internationalization→ RTLLayout→ block-image.tsx — ui Source File

Dependency Diagram

graph LR
  2695fbb5_6126_6660_cc82_ee189781d847["block-image.tsx"]
  3eb36dd7_f51a_1431_02e2_7abafe315718["image"]
  2695fbb5_6126_6660_cc82_ee189781d847 --> 3eb36dd7_f51a_1431_02e2_7abafe315718
  79081a1f_55a3_945a_fb8c_d53d6d3eab81["utils"]
  2695fbb5_6126_6660_cc82_ee189781d847 --> 79081a1f_55a3_945a_fb8c_d53d6d3eab81
  style 2695fbb5_6126_6660_cc82_ee189781d847 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import Image from "next/image"

import { cn } from "@/lib/utils"

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