Slide Puzzle: Not Found

import * as React from "react";

import { SlidePuzzle, type SlidePuzzleTile } from "@/components/ui/slide-puzzle";

// Tinta's docs 404: numbered tiles you can slide about while you're here. No links, so every tile is a button.
const COLORS = ["#ff5a1f", "#2563eb", "#10b981", "#7c3aed", "#f43f5e", "#f59e0b", "#0ea5e9", "#ef4444", "#65a30d"];

const TILES: SlidePuzzleTile[] = COLORS.map((color, i) => ({
  id: `tile-${i + 1}`,
  label: `Tile ${i + 1}`,
  icon: (
    <span
      className="flex size-full items-center justify-center text-lg font-semibold tabular-nums text-white"
      style={{ backgroundColor: color }}
    >
      {i + 1}
    </span>
  ),
}));

export function SlidePuzzleNotFoundDemo() {
  return (
    <section className="w-full max-w-5xl overflow-hidden rounded-3xl border border-zinc-950/[0.06] bg-white text-zinc-950 dark:border-white/10 dark:bg-zinc-950 dark:text-white">
      <SlidePuzzle tiles={TILES} drift={false} seed={12}>
        <div className="flex max-w-sm flex-col items-center text-center">
          <p className="font-mono text-xs font-medium text-zinc-400">Error 404</p>
          <h2 className="mt-3 text-balance text-3xl font-medium tracking-[-0.03em] sm:text-4xl">
            This page slid out of place.
          </h2>
          <p className="mt-3 text-pretty text-[15px] leading-relaxed text-zinc-500 dark:text-zinc-400">
            The link points at an empty slot. Push a few tiles around while you&apos;re here, or head back to the docs.
          </p>
          <div className="mt-6 flex flex-wrap items-center justify-center gap-2">
            <a
              href="#home"
              className="inline-flex h-9 items-center gap-1 rounded-full bg-[#ff5a1f] px-4 text-sm font-medium text-white shadow-[inset_0_1px_0_rgb(255_255_255/0.25)] transition-colors hover:bg-[#f04d12] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#ff5a1f]"
            >
              <svg viewBox="0 0 16 16" className="size-3.5" aria-hidden>
                <path d="M10 4 6 8l4 4" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
              Back home
            </a>
            <a
              href="#search"
              className="inline-flex h-9 items-center rounded-full border border-zinc-950/10 bg-white px-4 text-sm font-medium transition-colors hover:bg-zinc-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#ff5a1f] dark:border-white/10 dark:bg-zinc-900 dark:hover:bg-zinc-800"
            >
              Search the docs
            </a>
          </div>
        </div>
      </SlidePuzzle>
    </section>
  );
}