Animated Tabs

1"use client"
2 
3import * as React from "react"
4import { motion } from "motion/react"
5import { cn } from "@/registry/wise-ui/lib/utils"
6 
7interface Tab {
8  id: string
9  label: string
10  icon?: React.ReactNode
11}
12 
13interface AnimatedTabsProps {
14  tabs: Tab[]
15  activeTab: string
16  onTabChange: (tabId: string) => void
17  className?: string
18}
19 
20function AnimatedTabs({
21  tabs,
22  activeTab,
23  onTabChange,
24  className,
25}: AnimatedTabsProps) {
26  const layoutId = React.useId()
27 
28  return (
29    <div
30      className={cn(
31        "inline-flex items-center gap-1 rounded-lg border border-border bg-muted/50 p-1",
32        className
33      )}
34    >
35      {tabs.map((tab) => {
36        const isActive = tab.id === activeTab
37        return (
38          <button
39            key={tab.id}
40            onClick={() => onTabChange(tab.id)}
41            className={cn(
42              "relative z-10 inline-flex cursor-pointer items-center gap-2 rounded-md px-3 py-1.5 text-sm font-medium transition-colors",
43              isActive
44                ? "text-foreground"
45                : "text-muted-foreground hover:text-foreground"
46            )}
47          >
48            {isActive && (
49              <motion.div
50                layoutId={`tab-pill-${layoutId}`}
51                className="absolute inset-0 rounded-md bg-background shadow-sm"
52                transition={{ type: "spring", stiffness: 500, damping: 35 }}
53                style={{ zIndex: -1 }}
54              />
55            )}
56            {tab.icon && <span className="inline-flex shrink-0">{tab.icon}</span>}
57            {tab.label}
58          </button>
59        )
60      })}
61    </div>
62  )
63}
64AnimatedTabs.displayName = "AnimatedTabs"
65 
66export { AnimatedTabs }
67export type { AnimatedTabsProps, Tab }