Xray Lens: Blueprint

import type { ReactNode } from "react";

import { XrayLens, XrayLensSpot } from "@/components/ui/xray-lens";

const photo =
  "https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=800&h=600&q=80";

// Blueprint lines: each part of the card drawn as a thin white box.
const line = "outline-1 -outline-offset-1 outline-white/60";

function Part({ name, spec }: { name: string; spec?: string }) {
  return (
    <span className="flex h-full flex-col justify-center gap-0.5 px-1.5 font-mono text-[10px] leading-tight whitespace-nowrap">
      <span className="text-white">{name}</span>
      {spec && <span className="text-sky-200/70">{spec}</span>}
    </span>
  );
}

function Tag({ children }: { children: ReactNode }) {
  return (
    <XrayLensSpot label="Tag" xrayClassName={line} xray={<Part name="<Tag>" />}>
      <span className="inline-flex h-6 items-center rounded-md bg-zinc-100 px-2 text-xs text-zinc-600 dark:bg-zinc-800 dark:text-zinc-300">
        {children}
      </span>
    </XrayLensSpot>
  );
}

function Listing() {
  return (
    <div className="p-3">
      <XrayLensSpot
        label="Image · 4:3 · radius 12"
        xrayClassName={line}
        xray={
          <span className="relative block size-full">
            <svg aria-hidden className="absolute inset-0 size-full text-white/35" preserveAspectRatio="none" viewBox="0 0 100 100">
              <line x1="0" y1="0" x2="100" y2="100" stroke="currentColor" vectorEffect="non-scaling-stroke" />
              <line x1="100" y1="0" x2="0" y2="100" stroke="currentColor" vectorEffect="non-scaling-stroke" />
            </svg>
            <span className="absolute inset-0 grid place-items-center">
              <span className="bg-[#0b3c8f] px-1.5 py-0.5">
                <Part name="<Image ratio=&quot;4/3&quot; />" spec="cover · radius 12" />
              </span>
            </span>
          </span>
        }
      >
        {/* eslint-disable-next-line @next/next/no-img-element -- a remote photo in an installable demo */}
        <img
          src={photo}
          alt="A low timber and glass house lit up at dusk"
          draggable={false}
          className="aspect-4/3 w-full rounded-xl bg-zinc-100 object-cover dark:bg-zinc-900"
        />
      </XrayLensSpot>

      <div className="flex flex-col gap-3 px-1.5 pt-4 pb-1.5">
        <div className="flex items-start justify-between gap-3">
          <XrayLensSpot
            label="Heading · 17/24 · 600"
            xrayClassName={line}
            xray={<Part name="<Heading size=&quot;md&quot;>" spec="17/24 · 600 · -1%" />}
          >
            <h4 className="text-[17px] leading-6 font-semibold tracking-tight text-zinc-900 dark:text-zinc-50">
              Timber House
            </h4>
            <p className="text-sm text-zinc-500">Lake Bohinj, Slovenia</p>
          </XrayLensSpot>
          <XrayLensSpot
            label="Rating"
            xrayClassName={line}
            xray={<Part name="<Rating>" spec="value 4.92" />}
            className="flex items-center gap-1 pt-0.5 text-sm font-medium text-zinc-900 tabular-nums dark:text-zinc-100"
          >
            <svg aria-hidden viewBox="0 0 20 20" className="size-3.5 fill-amber-400">
              <path d="M10 1.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L10 14.9l-5.2 2.7 1-5.8L1.5 7.7l5.9-.9z" />
            </svg>
            4.92
          </XrayLensSpot>
        </div>

        <XrayLensSpot
          label="Stack · row · gap 6"
          xrayClassName={line}
          xray={null}
          className="flex flex-wrap gap-1.5"
        >
          <Tag>Sauna</Tag>
          <Tag>Lake view</Tag>
          <Tag>Sleeps 4</Tag>
        </XrayLensSpot>

        <div className="mt-1 flex items-center justify-between border-t border-zinc-100 pt-3 dark:border-zinc-800">
          <XrayLensSpot
            label="Price · tabular"
            xrayClassName={line}
            xray={<Part name="<Price unit=&quot;night&quot;>" spec="EUR · tabular" />}
            className="text-sm text-zinc-500"
          >
            <span className="text-base font-semibold text-zinc-900 tabular-nums dark:text-zinc-50">€184</span>{" "}
            night
          </XrayLensSpot>
          <XrayLensSpot
            label="Button · md · h 36"
            xrayClassName={line}
            xray={<Part name="<Button>" spec="md · h 36 · px 14" />}
          >
            <button
              type="button"
              className="h-9 rounded-lg bg-zinc-900 px-3.5 text-sm font-medium text-white transition-colors hover:bg-zinc-800 dark:bg-white dark:text-zinc-900 dark:hover:bg-zinc-200"
            >
              Reserve
            </button>
          </XrayLensSpot>
        </div>
      </div>
    </div>
  );
}

export function XrayLensBlueprintDemo() {
  return (
    <section className="grid w-full max-w-3xl items-center gap-10 sm:grid-cols-[minmax(0,1fr)_20rem]">
      <div>
        <p className="font-mono text-xs tracking-widest text-zinc-500 uppercase">Design systems</p>
        <h3 className="mt-3 text-3xl font-semibold tracking-tight text-balance text-zinc-900 dark:text-zinc-50">
          Built from parts, not pixels.
        </h3>
        <p className="mt-4 max-w-sm text-sm/6 text-pretty text-zinc-600 dark:text-zinc-400">
          Every screen we ship is made of named components and tokens your team can reuse. Pick up
          the loupe and drag it across the card to see the system underneath.
        </p>
      </div>
      <XrayLens
        mode="drag"
        size="55%"
        zoom={1.14}
        rest={{ x: 0.45, y: 0.68 }}
        lensLabel="Blueprint lens"
        labels={["Design", "Blueprint"]}
        toggleClassName="top-5 right-5 bottom-auto"
        surface={<Listing />}
        xray={
          <div className="absolute inset-0 bg-[linear-gradient(rgb(255_255_255/0.07)_1px,transparent_1px),linear-gradient(90deg,rgb(255_255_255/0.07)_1px,transparent_1px)] bg-size-[8px_8px]">
            <div className="absolute inset-0 bg-[linear-gradient(rgb(255_255_255/0.08)_1px,transparent_1px),linear-gradient(90deg,rgb(255_255_255/0.08)_1px,transparent_1px)] bg-size-[40px_40px]" />
          </div>
        }
        xrayClassName="bg-[#0b3c8f] text-white"
        labelClassName="bg-[#0b3c8f]/95 ring-white/25"
        className="w-full rounded-2xl bg-white shadow-[0_1px_2px_rgb(0_0_0/0.05),0_16px_40px_-20px_rgb(0_0_0/0.3)] ring-1 ring-zinc-950/5 dark:bg-zinc-950 dark:ring-white/10"
      />
    </section>
  );
}