animated-tabs

1'use client';
2 
3import { cn } from '@/lib/utils';
4import { AnimatePresence, motion } from 'motion/react';
5import React, {
6  createContext,
7  isValidElement,
8  type ReactNode,
9  useCallback,
10  useContext,
11  useMemo,
12  useState,
13} from 'react';
14 
15// Improved TypeScript interfaces with more specific types
16interface TabContextType {
17  activeTab: string;
18  setActiveTab: (value: string) => void;
19  wobbly: boolean;
20  hover: boolean;
21  defaultValue: string;
22  prevIndex: number;
23  setPrevIndex: (value: number) => void;
24  tabsOrder: string[];
25}
26 
27const TabContext = createContext<TabContextType | undefined>(undefined);
28 
29// Custom hook with memoization
30export const useTabs = () => {
31  const context = useContext(TabContext);
32  if (!context) {
33    throw new Error('useTabs must be used within a TabsProvider');
34  }
35  return context;
36};
37 
38// Props interfaces with more specific types
39interface TabsProviderProps {
40  children: ReactNode;
41  defaultValue: string;
42  wobbly?: boolean;
43  hover?: boolean;
44}
45 
46interface TabsBtnProps {
47  children: ReactNode;
48  className?: string;
49  value: string;
50}
51 
52interface TabsContentProps {
53  children: ReactNode;
54  className?: string;
55  value: string;
56  yValue?: boolean;
57}
58 
59export const TabsProvider: React.FC<TabsProviderProps> = React.memo(
60  ({ children, defaultValue, wobbly = true, hover = false }) => {
61    // Use useCallback to memoize state setters
62    const [activeTab, setActiveTab] = useState(defaultValue);
63    const [prevIndex, setPrevIndex] = useState(0);
64 
65    // Memoize tabs order to prevent unnecessary recalculations
66    const tabsOrder = useMemo(() => {
67      return React.Children.toArray(children)
68        .filter((child) => isValidElement(child) && child.type === TabsContent)
69        .map((child) => (child as React.ReactElement<any>).props.value);
70    }, [children]);
71 
72    // Memoize context value to prevent unnecessary re-renders
73    const contextValue = useMemo(
74      () => ({
75        activeTab,
76        setActiveTab,
77        wobbly,
78        hover,
79        defaultValue,
80        setPrevIndex,
81        prevIndex,
82        tabsOrder,
83      }),
84      [activeTab, setActiveTab, wobbly, hover, defaultValue, prevIndex, tabsOrder]
85    );
86 
87    return <TabContext.Provider value={contextValue}>{children}</TabContext.Provider>;
88  }
89);
90 
91// Memoized TabsBtn component
92export const TabsBtn: React.FC<TabsBtnProps> = React.memo(({ children, className, value }) => {
93  const { activeTab, setPrevIndex, setActiveTab, defaultValue, hover, wobbly, tabsOrder } =
94// … truncated