Block Transition

"use client";

import { useState } from "react";
import BlockTransition from "@/components/ui/block-transition";

const settings = {
  rows: 5,
  duration: 1,
  enableContentShift: false,
  color: "#0a0a0a",
};

const PAGES = [
  {
    label: "Page one",
    eyebrow: "01",
    title: "Close the curtain, change the scene.",
    body: "Rows of blocks slide in from both sides, meet in the middle, then part again to reveal the next page.",
    cta: "Go to page two",
  },
  {
    label: "Page two",
    eyebrow: "02",
    title: "Scene two.",
    body: "Turn on Content Shift in the controls to add a soft scale and blur to the page as it changes.",
    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];

  return (
    <div
      className={`flex min-h-screen w-full flex-col text-foreground ${
        index === 1 ? "bg-muted" : "bg-background"
      }`}
    >
      <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-colors focus-visible:ring-2 focus-visible:ring-ring ${
                itemIndex === index ? "text-foreground" : "text-muted-foreground hover:text-foreground"
              }`}
            >
              {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] text-muted-foreground">{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 text-muted-foreground 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 bg-primary px-5 py-2.5 text-sm font-medium text-primary-foreground outline-none transition-transform hover:scale-105 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-95"
        >
          {page.cta}
          <ArrowIcon />
        </button>
      </main>
    </div>
  );
}

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

  return (
    <BlockTransition
      transitionKey={page}
      rows={s.rows}
      duration={s.duration}
      enableContentShift={s.enableContentShift}
      // Hex keeps a color picker in the Controls panel; until it's changed, the
      // component's own theme-aware default is used.
      color={s.color === settings.color ? undefined : s.color}
    >
      <Page index={page} onNavigate={setPage} />
    </BlockTransition>
  );
}