状态导航

// npm install motion
"use client";

import { useState } from "react";
import { motion } from "motion/react";

const tabs = ["Motion", "GSAP", "CSS"];

export default function Page() {
    const [active, setActive] = useState(0);
    return (
        <div className="flex min-h-screen items-center justify-center">
            <div className="flex bg-black p-1">
                {tabs.map((t, i) => (
                    <button
                        key={t}
                        onClick={() => setActive(i)}
                        className="relative px-4 py-2 text-sm text-white"
                    >
                        {active === i && (
                            <motion.span
                                layoutId="tab-bg"
                                className="absolute inset-0 bg-blue-500"
                                transition={{ type: "spring", stiffness: 500, damping: 35 }}
                            />
                        )}
                        <span className="relative">{t}</span>
                    </button>
                ))}
            </div>
        </div>
    );
}