motion-layout-id

"use client"

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

export default function Page() {

    const [ selected, setSelected ] = useState<number>(0);

    const items = [
        "Tailwind",
        "React",
        "Next",
        "Motion",
        "Gsap",
    ];

    return (
        <div className="bg-black py-32 px-5">
            <ul className="flex flex-col md:flex-row justify-center gap-5">
                {
                    items.map((item, index) => (
                        <li className="p-5 text-2xl text-yellow-400 cursor-pointer relative"
                            onClick={ () => setSelected(index) }
                            key={ index }>
                            { item }
                            <AnimatePresence>
                                {
                                    selected === index && (
                                        <motion.span className="absolute bottom-0 left-1/2 -translate-x-1/2
                                                                w-full h-1
                                                                bg-yellow-400"
                                                     layoutId="underline"/>
                                    )
                                }
                            </AnimatePresence>
                        </li>
                    ))
                }
            </ul>
        </div>
    )
}