Sticky Scroll Sections

"use client";
import { useEffect, useState } from "react";
import { cn } from "@/lib/utils";

type State = "step-1" | "step-2" | "step-3";

const STEPS = [
{ title: "捕捉", desc: "把你看到的好元件存起來。", color: "from-orange-400 to-rose-600" },
{ title: "拆解", desc: "拆成 props、狀態、邊界,寫進 MDX。", color: "from-emerald-400 to-teal-600" },
{ title: "重組", desc: "下一個專案直接整段貼進去。", color: "from-blue-400 to-violet-600" },
];

export function StickyScroll({ state = "step-1" }: { state?: State }) {
const idx = state === "step-2" ? 1 : state === "step-3" ? 2 : 0;
const [active, setActive] = useState(idx);
useEffect(() => setActive(idx), [idx]);

return (
  <div className="grid w-full max-w-2xl grid-cols-2 gap-5">
    <div className="space-y-3">
      {STEPS.map((s, i) => (
        <button
          key={i}
          onClick={() => setActive(i)}
          className={cn(
            "block w-full rounded-lg border p-3 text-left transition-all",
            i === active
              ? "border-lab-accent bg-lab-accent/5"
              : "border-border bg-background/30 opacity-50 hover:opacity-80",
          )}
        >
          <p className="font-mono text-[10px] text-muted-foreground">0{i + 1}</p>
          <p className="mt-0.5 text-sm font-medium">{s.title}</p>
          <p className="mt-1 text-[11px] text-muted-foreground">{s.desc}</p>
        </button>
      ))}
    </div>
    <div className="sticky top-0">
      <div
        className={cn(
          "grid aspect-square place-items-center rounded-xl bg-gradient-to-br transition-all duration-500",
          STEPS[active].color,
        )}
      >
        <span className="font-mono text-5xl text-white/80">0{active + 1}</span>
      </div>
    </div>
  </div>
);
}