Chess Grid Transition

"use client";

import { useState } from "react";
import ChessGridTransition from "@/components/ui/chess-grid-transition";

const settings = {
  duration: 1,
  gridSize: 8,
  color: "#ff5f00",
};

const PAGES = [
  {
    label: "Page one",
    eyebrow: "01",
    title: "Every page change, staged.",
    body: "Click below. A staggered grid sweeps in, the page swaps underneath, and the grid clears to reveal the next one.",
    cta: "Go to page two",
  },
  {
    label: "Page two",
    eyebrow: "02",
    title: "Welcome to the other side.",
    body: "Same component, new content. Head back to play the transition again.",
    cta: "Back to page one",
  },
];

function ArrowIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="h-4 w-4">
      <path d="M5 12h14M13 6l6 6-6 6" />
    </svg>
  );
}

function Page({ index, onNavigate }: { index: number; onNavigate: (index: number) => void }) {
  const page = PAGES[index];
  // Page two is inverted so the swap reads clearly in both themes
  const inverted = index === 1;

  return (
    <div
      className={`flex min-h-screen w-full flex-col ${
        inverted ? "bg-foreground text-background" : "bg-background text-foreground"
      }`}
    >
      <header className="flex items-center justify-between px-6 py-5 sm:px-10">
        <span className="text-base font-semibold tracking-tight">Acme</span>
        <nav aria-label="Pages" className="flex gap-1">
          {PAGES.map((item, itemIndex) => (
            <button
              key={item.label}
              type="button"
              aria-current={itemIndex === index ? "page" : undefined}
              onClick={() => onNavigate(itemIndex)}
              className={`rounded-full px-3 py-1.5 text-sm font-medium outline-none transition-opacity focus-visible:ring-2 focus-visible:ring-ring ${
                itemIndex === index ? "opacity-100" : "opacity-60 hover:opacity-100"
              }`}
            >
              {item.label}
            </button>
          ))}
        </nav>
      </header>

      <main className="flex flex-1 flex-col items-center justify-center gap-6 px-6 pb-16 text-center">
        <span className="font-mono text-xs tracking-[0.3em] opacity-60">{page.eyebrow}</span>
        <h1 className="max-w-[16ch] text-4xl font-semibold leading-[1.05] tracking-tight sm:text-6xl">
          {page.title}
        </h1>
        <p className="max-w-md text-sm leading-relaxed opacity-70 sm:text-base">{page.body}</p>
        <button
          type="button"
          onClick={() => onNavigate(index === 0 ? 1 : 0)}
          className={`mt-2 inline-flex items-center gap-2 rounded-full px-5 py-2.5 text-sm font-medium outline-none transition-transform hover:scale-105 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 active:scale-95 ${
            inverted
              ? "bg-background text-foreground focus-visible:ring-offset-foreground"
              : "bg-foreground text-background focus-visible:ring-offset-background"
          }`}
        >
          {page.cta}
          <ArrowIcon />
        </button>
      </main>
    </div>
  );
}

export default function ChessGridTransitionDemo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  const [page, setPage] = useState(0);

  return (
    <ChessGridTransition
      transitionKey={page}
      duration={s.duration}
      gridSize={s.gridSize}
      color={s.color}
    >
      <Page index={page} onNavigate={setPage} />
    </ChessGridTransition>
  );
}