Animated Tabs

1"use client";
2 
3import React, {
4  createContext,
5  useContext,
6  useState,
7  ReactNode,
8  ReactElement,
9} from "react";
10import { twMerge } from "tailwind-merge";
11 
12interface TabsContextProps {
13  activeTab: string;
14  setActiveTab: (value: string) => void;
15}
16 
17const TabsContext = createContext<TabsContextProps | undefined>(undefined);
18 
19function useTabsContext() {
20  const context = useContext(TabsContext);
21  if (!context) {
22    throw new Error("Tabs components must be used within <Tabs>");
23  }
24  return context;
25}
26 
27interface TabsProps {
28  defaultValue: string;
29  children: ReactNode;
30}
31 
32const Tabs = ({ defaultValue, children }: TabsProps) => {
33  const [activeTab, setActiveTab] = useState(defaultValue);
34 
35  return (
36    <TabsContext.Provider value={{ activeTab, setActiveTab }}>
37      <div className="w-full">{children}</div>
38    </TabsContext.Provider>
39  );
40};
41 
42const TabsList = ({ children }: { children: ReactNode }) => {
43  return (
44    <div className="flex border-b border-gray-200 dark:border-gray-800">
45      {children}
46    </div>
47  );
48};
49 
50interface TabsTriggerProps {
51  value: string;
52  children: ReactNode;
53}
54 
55const TabsTrigger = ({ value, children }: TabsTriggerProps) => {
56  const { activeTab, setActiveTab } = useTabsContext();
57  const isActive = activeTab === value;
58 
59  return (
60    <button
61      onClick={() => setActiveTab(value)}
62      className="relative px-4 py-2 text-sm font-medium rounded-t-md overflow-hidden transition-colors duration-500"
63    >
64      <span
65        className={twMerge(
66          "relative z-10 capitalize transition-colors duration-300",
67          isActive
68            ? "text-white dark:text-black"
69            : "text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100"
70        )}
71      >
72        {children}
73      </span>
74      <span
75        className={twMerge(
76          "absolute bottom-0 left-0 h-full w-full origin-bottom scale-y-0 transition-transform duration-500 ease-out z-0 rounded-t-md",
77          isActive ? "scale-y-100 bg-black dark:bg-white" : "bg-transparent"
78        )}
79      />
80    </button>
81  );
82};
83 
84interface TabsContentProps {
85  value: string;
86  children: ReactNode;
87}
88 
89const TabsContent = ({
90  value,
91  children,
92}: TabsContentProps): ReactElement | null => {
93  const { activeTab } = useTabsContext();
94  return activeTab === value ? <div className="p-4">{children}</div> : null;
95};
96 
97export { Tabs, TabsList, TabsTrigger, TabsContent };