diff --git a/packages/devtools/src/components/tab-content.tsx b/packages/devtools/src/components/tab-content.tsx index 02e1378a..085fca9f 100644 --- a/packages/devtools/src/components/tab-content.tsx +++ b/packages/devtools/src/components/tab-content.tsx @@ -1,14 +1,15 @@ import { createMemo } from 'solid-js' -import { useDevtoolsState } from '../context/use-devtools-context' -import { tabs } from '../tabs' +import { useDevtoolsSettings, useDevtoolsState } from '../context/use-devtools-context' +import { getTabs } from '../tabs' import { useStyles } from '../styles/use-styles' import type { JSX } from 'solid-js' export const TabContent = () => { const { state } = useDevtoolsState() + const { settings } = useDevtoolsSettings() const styles = useStyles() const component = createMemo<(() => JSX.Element) | null>( - () => tabs.find((t) => t.id === state().activeTab)?.component || null, + () => getTabs(settings()).find((t) => t.id === state().activeTab)?.component || null, ) return
{component()?.()}
diff --git a/packages/devtools/src/components/tabs.tsx b/packages/devtools/src/components/tabs.tsx index bab30fbd..f0c6acbf 100644 --- a/packages/devtools/src/components/tabs.tsx +++ b/packages/devtools/src/components/tabs.tsx @@ -2,9 +2,9 @@ import clsx from 'clsx' import { For } from 'solid-js' import { PiP, X } from '@tanstack/devtools-ui/icons' import { useStyles } from '../styles/use-styles' -import { useDevtoolsState } from '../context/use-devtools-context' +import { useDevtoolsState, useDevtoolsSettings } from '../context/use-devtools-context' import { useDrawContext } from '../context/draw-context' -import { tabs } from '../tabs' +import { getTabs } from '../tabs' import { usePiPWindow } from '../context/pip-context' interface TabsProps { @@ -14,6 +14,7 @@ interface TabsProps { export const Tabs = (props: TabsProps) => { const styles = useStyles() const { state, setState } = useDevtoolsState() + const { settings } = useDevtoolsSettings() const pipWindow = usePiPWindow() const handleDetachment = () => { pipWindow().requestPipWindow( @@ -24,7 +25,7 @@ export const Tabs = (props: TabsProps) => { return (
- + {(tab) => (