Animated Tabs

"use client";

import { Tabs } from "@/registry/aceternity-ui/tabs";

export default function Demo() {
  const tabs = [
    {
      title: "Design",
      value: "design",
      content: (
        <div className="w-full h-40 rounded-2xl bg-gradient-to-br from-purple-500 to-violet-600 p-6 text-white">
          <h3 className="text-xl font-bold mb-2">Design Tab</h3>
          <p className="text-purple-100 text-sm">
            Beautiful UI components crafted for modern web apps.
          </p>
        </div>
      ),
    },
    {
      title: "Development",
      value: "development",
      content: (
        <div className="w-full h-40 rounded-2xl bg-gradient-to-br from-blue-500 to-cyan-600 p-6 text-white">
          <h3 className="text-xl font-bold mb-2">Development Tab</h3>
          <p className="text-blue-100 text-sm">
            Ship features faster with reusable, composable code.
          </p>
        </div>
      ),
    },
    {
      title: "Analytics",
      value: "analytics",
      content: (
        <div className="w-full h-40 rounded-2xl bg-gradient-to-br from-green-500 to-emerald-600 p-6 text-white">
          <h3 className="text-xl font-bold mb-2">Analytics Tab</h3>
          <p className="text-green-100 text-sm">
            Track performance and gain insights from your data.
          </p>
        </div>
      ),
    },
    {
      title: "Settings",
      value: "settings",
      content: (
        <div className="w-full h-40 rounded-2xl bg-gradient-to-br from-orange-500 to-amber-600 p-6 text-white">
          <h3 className="text-xl font-bold mb-2">Settings Tab</h3>
          <p className="text-orange-100 text-sm">
            Configure your workspace to fit your needs.
          </p>
        </div>
      ),
    },
  ];

  return (
    <div className="w-full max-w-2xl mx-auto px-4 py-8" style={{ height: "300px" }}>
      <Tabs tabs={tabs} />
    </div>
  );
}

"use client";

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

type Tab = {
  title: string;
  value: string;
  content?: string | React.ReactNode | any;
};

export const Tabs = ({
  tabs: propTabs,
  containerClassName,
  activeTabClassName,
  tabClassName,
  contentClassName,
}: {
  tabs: Tab[];
  containerClassName?: string;
  activeTabClassName?: string;
  tabClassName?: string;
  contentClassName?: string;
}) => {
  const [active, setActive] = useState<Tab>(propTabs[0]);
  const [tabs, setTabs] = useState<Tab[]>(propTabs);

  const moveSelectedTabToTop = (idx: number) => {
    const newTabs = [...propTabs];
    const selectedTab = newTabs.splice(idx, 1);
    newTabs.unshift(selectedTab[0]);
    setTabs(newTabs);
    setActive(newTabs[0]);
  };

  const [hovering, setHovering] = useState(false);

  return (
    <>
      <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
        )}
      >
        {propTabs.map((tab, idx) => (
          <button
            key={tab.title}
            onClick={() => {
              moveSelectedTabToTop(idx);
            }}
            onMouseEnter={() => setHovering(true)}
            onMouseLeave={() => setHovering(false)}
            className={cn("relative px-4 py-2 rounded-full", tabClassName)}
            style={{
              transformStyle: "preserve-3d",
            }}
          >
            {active.value === tab.value && (
              <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
                )}
              />
            )}

            <span className="relative block text-black dark:text-white">
              {tab.title}
            </span>
          </button>
        ))}
      </div>
      <FadeInDiv
        tabs={tabs}
        active={active}
        key={active.value}
        hovering={hovering}
        className={cn("mt-32", contentClassName)}
      />
    </>
  );
};

export const FadeInDiv = ({
  className,
  tabs,
  hovering,
}: {
  className?: string;
  key?: string;
  tabs: Tab[];
  active: Tab;
  hovering?: boolean;
}) => {
  const isActive = (tab: Tab) => {
    return tab.value === tabs[0].value;
  };
  return (
    <div className="relative w-full h-full">
      {tabs.map((tab, idx) => (
        <motion.div
          key={tab.value}
          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)}
        >
          {tab.content}
        </motion.div>
      ))}
    </div>
  );
};