4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T1607,'use client'; import { cn } from '@/lib/utils'; import { AnimatePresence, motion } from 'motion/react'; import React, { createContext, isValidElement, type ReactNode, useCallback, useContext, useMemo, useState, } from 'react'; // Improved TypeScript interfaces with more specific types interface TabContextType { activeTab: string; setActiveTab: (value: string) => void; wobbly: boolean; hover: boolean; defaultValue: string; prevIndex: number; setPrevIndex: (value: number) => void; tabsOrder: string[]; } const TabContext = createContext(undefined); // Custom hook with memoization export const useTabs = () => { const context = useContext(TabContext); if (!context) { throw new Error('useTabs must be used within a TabsProvider'); } return context; }; // Props interfaces with more specific types interface TabsProviderProps { children: ReactNode; defaultValue: string; wobbly?: boolean; hover?: boolean; } interface TabsBtnProps { children: ReactNode; className?: string; value: string; } interface TabsContentProps { children: ReactNode; className?: string; value: string; yValue?: boolean; } export const TabsProvider: React.FC = React.memo( ({ children, defaultValue, wobbly = true, hover = false }) => { // Use useCallback to memoize state setters const [activeTab, setActiveTab] = useState(defaultValue); const [prevIndex, setPrevIndex] = useState(0); // Memoize tabs order to prevent unnecessary recalculations const tabsOrder = useMemo(() => { return React.Children.toArray(children) .filter((child) => isValidElement(child) && child.type === TabsContent) .map((child) => (child as React.ReactElement).props.value); }, [children]); // Memoize context value to prevent unnecessary re-renders const contextValue = useMemo( () => ({ activeTab, setActiveTab, wobbly, hover, defaultValue, setPrevIndex, prevIndex, tabsOrder, }), [activeTab, setActiveTab, wobbly, hover, defaultValue, prevIndex, tabsOrder] ); return {children}; } ); // Memoized TabsBtn component export const TabsBtn: React.FC = React.memo(({ children, className, value }) => { const { activeTab, setPrevIndex, setActiveTab, defaultValue, hover, wobbly, tabsOrder } = useTabs(); // Use useCallback to memoize the click handler const handleClick = useCallback(() => { setPrevIndex(tabsOrder.indexOf(activeTab)); setActiveTab(value); }, [setPrevIndex, tabsOrder, activeTab, setActiveTab, value]); return ( hover && handleClick()} onMouseEnter={() => hover && handleClick()} onClick={handleClick} > {children} {activeTab === value && ( <> {wobbly && ( <> )} )} ); }); // Memoized TabsContent component export const TabsContent: React.FC = React.memo( ({ children, className, value, yValue }) => { const { activeTab, tabsOrder, prevIndex } = useTabs(); // Memoize direction calculation const isForward = useMemo( () => tabsOrder.indexOf(activeTab) > prevIndex, [tabsOrder, activeTab, prevIndex] ); return ( {activeTab === value && ( {children} )} ); } ); // Add display names for better debugging TabsProvider.displayName = 'TabsProvider'; TabsBtn.displayName = 'TabsBtn'; TabsContent.displayName = 'TabsContent'; 52:T123b,'use client'; import { TabsBtn, TabsContent, TabsProvider } from '@/components/ui/tab'; import { AnimatePresence, motion } from 'motion/react'; import Image from 'next/image'; import React, { useState } from 'react'; const effectArr = [ { id: 1, name: 'basic', }, { id: 2, name: 'hover', }, { id: 3, name: 'wobbly', }, ]; function PreviewTab() { const [checkEffect, setCheckEffect] = useState('basic'); return ( <>

{effectArr?.map((effect, index) => { return ( <> setCheckEffect(effect?.name)} className={`py-1 px-3 rounded-md capitalize relative `} > {effect?.name} {checkEffect === effect.name && ( )} ); })}

design collaborate share publish

); } export default PreviewTab; 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4f",null,{"namespace":"@ui-layouts","registryDependencies":[]}]]}],null]}],["$","$L50",null,{"files":[{"path":"./components/ui/tab.tsx","content":"$51","type":"registry:component"},{"path":"./registry/components/tabs/preview-tab.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]