unique-button

"use client"

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

export default function Page() {

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

    const values = [
        "富强",
        "民主",
        "文明",
        "和谐",

        "自由",
        "平等",
        "公正",
        "法治",

        "爱国",
        "敬业",
        "诚信",
        "友善",
    ];

    return (
        <div className="my-10">
            <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-5">
                {
                    values.map((value, index) => (
                        <button className={ cn("bg-black text-cyan-500 px-8 py-4 cursor-pointer",
                            selected === index && "bg-cyan-500 text-white") }
                                onClick={ () => setSelected(index) }
                                key={ value }>
                            { value }
                        </button>
                    ))
                }
            </div>
        </div>
    )
}