import * as Tabs from '@radix-ui/react-tabs'; import classNames from 'classnames'; import { useRouter } from 'next/router'; import { Children, isValidElement, ReactElement, ReactNode, useEffect, useState, } from 'react'; interface GridTabsProps { children: ReactElement[]; group: string; } export const GridTabs = ({ children, group }: GridTabsProps) => { const { query, asPath, replace } = useRouter(); const [activeTab, setActiveTab] = useState(() => { const tab = query[group]; if (typeof tab === 'string') { return tab; } // Default to first tab return children[0].props.name; }); // Update the query string in the url when the active tab changes // uses group property as the query stirng key useEffect(() => { const [url, queryString] = asPath.split('?'); const searchParams = new URLSearchParams(queryString); searchParams.set(group, activeTab as string); replace(`${url}?${searchParams.toString()}`); // replace and using asPath causes a render loop // eslint-disable-next-line }, [activeTab, group]); return ( setActiveTab(value)} > {Children.map(children, (child) => { if (!isValidElement(child)) return null; const isActive = child.props.name === activeTab; const triggerClass = classNames('py-4', 'px-12', 'capitalize', { 'text-black dark:text-vega-yellow': isActive, 'bg-white dark:bg-black': isActive, 'text-black dark:text-white': !isActive, 'bg-black-10 dark:bg-white-10': !isActive, }); return ( {child.props.name} ); })}
{Children.map(children, (child) => { if (!isValidElement(child)) return null; return ( {child.props.children} ); })}
); }; interface GridTabProps { children: ReactNode; name: string; } export const GridTab = ({ children }: GridTabProps) => { return
{children}
; };