// npm i clsx tailwind-merge

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
    return twMerge(clsx(inputs));
}

"use client"

import { useState } from "react";
import { cn } from "@/lib/tailwind";

export default function Page() {

    const titles = [ "react", "zustand", "next", "motion", "gsap" ];

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

    return (
        <ul className="flex gap-x-5 justify-center text-white">
            {
                titles.map((title, i) => (
                    <li key={ i }>
                        <button className={ cn("px-8 py-3 bg-cyan-500 cursor-pointer",
                            selected === i && "bg-rose-500") }
                                onClick={ () => setSelected(i) }>
                            { title }
                        </button>
                    </li>
                ))
            }
        </ul>
    )

}