Exclusion Navigation

"use client";

import React, {useState} from "react";
import {motion} from "framer-motion";

const tabs = [
    {id: "home", label: "Home"},
    {id: "blog", label: "Community"},
    {id: "about", label: "About"},
    {id: "work", label: "Work"},
    {id: "contact", label: "Contact"},
];
const ExlusionTabs = () => {
    const [activeTab, setActiveTab] = useState(tabs[0].id);

    return (
        <article className="grid aspect-video place-items-center bg-white/5">
            <nav className="flex h-full w-full items-center justify-center">
                <ul className="relative flex p-2">
                    {tabs.map((tab) => (
                        <li key={tab.id} className="relative isolate">
                            <button
                                onClick={() => setActiveTab(tab.id)}
                                className={`px-4 py-2 text-sm font-medium transition-colors duration-300 ${
                                    activeTab === tab.id
                                        ? "text-black"
                                        : "text-white hover:text-white/70"
                                }`}>
                                {tab.label}
                            </button>
                            {activeTab === tab.id && (
                                <motion.div
                                    layoutId="active-pill"
                                    className="absolute inset-0 rounded-full bg-white"
                                    style={{zIndex: -1}}
                                    transition={{
                                        type: "spring",
                                        duration: 0.7,
                                    }}
                                />
                            )}
                        </li>
                    ))}
                </ul>
            </nav>
        </article>
    );
};

export default ExlusionTabs;