24:I[307436,["/_next/static/immutable/chunks/1gchium7nww9r.js","/_next/static/immutable/chunks/2d7gr10yud7ll.js","/_next/static/immutable/chunks/2kyb8oum4hifz.js","/_next/static/immutable/chunks/17bc5e9cm9a-q.js","/_next/static/immutable/chunks/42sqmxmk3cnps.js","/_next/static/immutable/chunks/2-g5j69xga-j-.js","/_next/static/immutable/chunks/1vqnea-qk-oh0.js","/_next/static/immutable/chunks/0457ji1bpobon.js","/_next/static/immutable/chunks/2kc7ecqs15k_7.js","/_next/static/immutable/chunks/0a937jsg96ehe.js","/_next/static/immutable/chunks/1x71wnz52c5-i.js","/_next/static/immutable/chunks/3bmj1ccyv_bzu.js","/_next/static/immutable/chunks/3zyborr59s_3k.js","/_next/static/immutable/chunks/2iprwyxekay_3.js"],"Copy"] 25:Ta87,import card from "@/public/lightbox/card.jpg" import field from "@/public/lightbox/field.jpg" import lake from "@/public/lightbox/lake.jpg" import peaks from "@/public/lightbox/peaks.jpg" import prose from "@/public/lightbox/prose.jpg" import river from "@/public/lightbox/river.jpg" import shore from "@/public/lightbox/shore.jpg" import small from "@/public/lightbox/small.jpg" import square from "@/public/lightbox/square.jpg" import tall from "@/public/lightbox/tall.jpg" import wide from "@/public/lightbox/wide.jpg" // One map tile is the picture the frame opens from (a single tile for a demo sits // inside openstreetmap's tile usage policy); the frame is the live map around it. const FRAME: Entry = { id: "map", media: { kind: "frame", src: "https://www.openstreetmap.org/export/embed.html?bbox=2.15,41.38,2.19,41.40&layer=mapnik", width: 1200, height: 800, title: "openstreetmap · barcelona", }, caption: "openstreetmap · barcelona · © openstreetmap contributors", } const TILE = "https://tile.openstreetmap.org/13/4145/3059.png" const SMALL: Entry = { id: "small", media: { kind: "image", source: { src: small.src, full: small.src, width: 640, height: 427, }, alt: "a 640 px original: the bar says when it is shown larger", }, }

05 · a frame: opens from a picture, box and keyboard, no zoom

{FRAME.media.kind === "frame" && FRAME.media.title} · © openstreetmap contributors

06 · a 640 px original: press + and read the bar

26:T5929,

import card from "@/public/lightbox/card.jpg"
import field from "@/public/lightbox/field.jpg"
import lake from "@/public/lightbox/lake.jpg"
import peaks from "@/public/lightbox/peaks.jpg"
import prose from "@/public/lightbox/prose.jpg"
import river from "@/public/lightbox/river.jpg"
import shore from "@/public/lightbox/shore.jpg"
import small from "@/public/lightbox/small.jpg"
import square from "@/public/lightbox/square.jpg"
import tall from "@/public/lightbox/tall.jpg"
import wide from "@/public/lightbox/wide.jpg"

// One map tile is the picture the frame opens from (a single tile for a demo sits
// inside openstreetmap's tile usage policy); the frame is the live map around it.
const FRAME: Entry = {
  id: "map",
  media: {
    kind: "frame",
    src: "https://www.openstreetmap.org/export/embed.html?bbox=2.15,41.38,2.19,41.40&layer=mapnik",
    width: 1200,
    height: 800,
    title: "openstreetmap · barcelona",
  },
  caption: "openstreetmap · barcelona · © openstreetmap contributors",
}
const TILE = "https://tile.openstreetmap.org/13/4145/3059.png"

const SMALL: Entry = {
  id: "small",
  media: {
    kind: "image",
    source: {
      src: small.src,
      full: small.src,
      width: 640,
      height: 427,
    },
    alt: "a 640 px original: the bar says when it is shown larger",
  },
}


<div className="grid gap-8 sm:grid-cols-2">
  <div className="space-y-4">
    <div className="font-mono text-xs text-muted-foreground">
      05 · a frame: opens from a picture, box and keyboard, no zoom
    </div>
    <figure className="space-y-2">
      <LightboxTrigger
        entry={FRAME}
        render={
          <a
            href={(FRAME.media as { src: string }).src}
            className="block w-fit overflow-hidden rounded-lg"
          />
        }
      >
        {/* biome-ignore lint/performance/noImgElement: one map tile */}
        <img
          src={TILE}
          alt=""
          width={256}
          height={256}
          className="block size-64"
        />
      </LightboxTrigger>
      <figcaption className="font-mono text-xs lowercase text-muted-foreground">
        {FRAME.media.kind === "frame" && FRAME.media.title} · ©
        openstreetmap contributors
      </figcaption>
    </figure>
  </div>
  <div className="space-y-4">
    <div className="font-mono text-xs text-muted-foreground">
      06 · a 640 px original: press + and read the bar
    </div>
    <LightboxTrigger entry={SMALL}>
      <Image
        src={small}
        unoptimized
        alt="A small landscape photograph"
        width={640}
        height={427}
        className="block h-auto w-full rounded-lg"
      />
    </LightboxTrigger>
  </div>
</div>

20:["$","div","frame",{"data-slot":"code","data-material":"plain","data-compact":"$undefined","className":"ag-code","children":[["$","div",null,{"className":"ag-code-bar","children":[["$","span",null,{"className":"ag-code-name","children":"tsx"}],["$","$L24",null,{"value":"$25","label":true}]]}],["$","div",null,{"className":"ag-code-scroll ag-edge-fade-xy","dangerouslySetInnerHTML":{"__html":"$26"}}],false]}]