Function Tabs

packages/devtools/src/components/tabs.tsx:14–72

(props: TabsProps)

}

export const Tabs = (props: TabsProps) => {
  const styles = createStyles()
  const { state, setState } = createDevtoolsState()
  const pipWindow = createPiPWindow()
  const handleDetachment = () => {
    pipWindow().requestPipWindow(
      `width=${window.innerWidth},height=${state().height},top=${window.screen.height},left=${window.screenLeft}}`,
    )
  }
  const { hoverUtils } = createDrawContext()

  return (
    <div class={styles().tabContainer}>
      <For each={tabs}>
        {(tab) => (
          <button
            type="button"
            data-testid={`tsd-tab-${tab.id}`}
            onClick={() => setState({ activeTab: tab.id })}
            class={clsx(styles().tab, { active: state().activeTab === tab.id })}
            onMouseEnter={() => {
              if (tab.id === 'plugins') hoverUtils.enter()
            }}
            onMouseLeave={() => {
              if (tab.id === 'plugins') hoverUtils.leave()
            }}
          >
            {tab.icon()}
          </button>
        )}
      </For>
      {pipWindow().pipWindow !== null ? null : (
        <div
          style={{
            'margin-top': 'auto',
            width: '100%',
          }}
        >
          <button
            type="button"
            data-testid="tsd-pip-button"
            class={clsx(styles().tab, 'detach')}
            onClick={handleDetachment}
          >
            <PiP />
          </button>
          <button
            type="button"
            data-testid="tsd-close-button"
            class={clsx(styles().tab, 'close')}
            onClick={() => props.toggleOpen()}
          >
            <X />
          </button>
        </div>
      )}
    </div>
  )