xlibs-components/dist/components/aceternity/tabs.js

Modern React component library with Aceternity, MagicUI, and ShadCN components for building beautiful web applications

"use client";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState } from "react";
import { motion } from "framer-motion";
import { cn } from '../../lib/utils.js';
export const Tabs = ({ tabs: propTabs, containerClassName, activeTabClassName, tabClassName, contentClassName, }) => {
    const [active, setActive] = useState(propTabs[0]);
    const [tabs, setTabs] = useState(propTabs);
    const moveSelectedTabToTop = (idx) => {
        const newTabs = [...propTabs];
        const selectedTab = newTabs.splice(idx, 1);
        newTabs.unshift(selectedTab[0]);
        setTabs(newTabs);
        setActive(newTabs[0]);
    };
    const [hovering, setHovering] = useState(false);
    return (_jsxs(_Fragment, { children: [_jsx("div", { className: cn("flex flex-row items-center justify-start [perspective:1000px] relative overflow-auto sm:overflow-visible no-visible-scrollbar max-w-full w-full", containerClassName), children: propTabs.map((tab, idx) => (_jsxs("button", { onClick: () => {
                        moveSelectedTabToTop(idx);
                    }, onMouseEnter: () => setHovering(true), onMouseLeave: () => setHovering(false), className: cn("relative px-4 py-2 rounded-full", tabClassName), style: {
                        transformStyle: "preserve-3d",
                    }, children: [active.value === tab.value && (_jsx(motion.div, { layoutId: "clickedbutton", transition: { type: "spring", bounce: 0.3, duration: 0.6 }, className: cn("absolute inset-0 bg-gray-200 dark:bg-zinc-800 rounded-full ", activeTabClassName) })), _jsx("span", { className: "relative block text-black dark:text-white", children: tab.title })] }, tab.title))) }), _jsx(FadeInDiv, { tabs: tabs, active: active, hovering: hovering, className: cn("mt-32", contentClassName) }, active.value)] }));
};
export const FadeInDiv = ({ className, tabs, hovering, }) => {
    const isActive = (tab) => {
        return tab.value === tabs[0].value;
    };
    return (_jsx("div", { className: "relative w-full h-full", children: tabs.map((tab, idx) => (_jsx(motion.div, { layoutId: tab.value, style: {
                scale: 1 - idx * 0.1,
                top: hovering ? idx * -50 : 0,
                zIndex: -idx,
                opacity: idx < 3 ? 1 - idx * 0.1 : 0,
            }, animate: {
                y: isActive(tab) ? [0, 40, 0] : 0,
            }, className: cn("w-full h-full absolute top-0 left-0", className), children: tab.content }, tab.value))) }));
};