Animated Tabs

1"use client";
2 
3import { useState } from "react";
4import { motion } from "motion/react";
5import { cn } from "@/lib/utils";
6 
7type AnimatedTabsProps = {
8  tabs: Array<string>;
9  variant?: "default" | "underline";
10};
11 
12const AnimatedTabs = ({ tabs, variant = "default" }: AnimatedTabsProps) => {
13  const [activeTab, setActiveTab] = useState(tabs[0]);
14 
15  if (variant === "underline") {
16    return (
17      <div className="relative flex items-center border-b border-border">
18        {tabs.map((tab, index) => {
19          const isActive = activeTab === tab;
20 
21          return (
22            <button
23              key={index}
24              type="button"
25              onClick={() => setActiveTab(tab)}
26              className={cn(
27                "relative flex h-10 items-center px-4 text-sm font-medium transition-colors duration-200",
28                isActive
29                  ? "text-primary"
30                  : "text-muted-foreground hover:text-foreground",
31              )}
32            >
33              {isActive && (
34                <motion.div
35                  layoutId="active-tab-underline"
36                  className="absolute bottom-0 left-0 right-0 h-0.5 bg-primary"
37                  initial={false}
38                  transition={{
39                    type: "spring",
40                    stiffness: 500,
41                    damping: 30,
42                  }}
43                />
44              )}
45              <span className="relative z-10">{tab}</span>
46            </button>
47          );
48        })}
49      </div>
50    );
51  }
52 
53  return (
54    <div className="relative mx-auto flex w-fit items-center rounded-full bg-background p-1">
55      {tabs.map((tab, index) => {
56        const isActive = activeTab === tab;
57 
58        return (
59          <button
60            key={index}
61            type="button"
62            onClick={() => setActiveTab(tab)}
63            className={cn(
64              "relative flex h-8 items-center rounded-full px-3 text-sm font-medium transition-colors duration-200",
65              isActive
66                ? "text-primary-foreground"
67                : "text-muted-foreground hover:text-foreground",
68            )}
69          >
70            {isActive && (
71              <motion.div
72                layoutId="active-tab-background"
73                className="absolute inset-0 rounded-full bg-primary"
74                initial={false}
75                transition={{
76                  type: "spring",
77                  stiffness: 500,
78                  damping: 30,
79                }}
80// … truncated