@cypress-design/react-tabs v0.9.2

Tabs

Install

npm install @cypress-design/react-tabs

or with yarn

yarn add @cypress-design/react-tabs

Usage

import Tabs from '@cypress-design/react-tabs'

import { IconActionPlayVideo } from '@cypress-design/react-icon'

export default () => (
  <Tabs
    activeId="ov"
    tabs={[
      { id: 'ov', label: 'Overview' },
      { id: 'cl', label: 'Command Log', icon: IconActionPlayVideo },
      { id: 'err', label: 'Errors', href: 'https://www.cypress.io' },
      { id: 'reco', label: 'Recommendations' },
    ]}
  />
)

import { useState } from 'react'
import { IconActionPlayVideo } from '@cypress-design/react-icon'

export default () => {
  const [allowMove, setAllowMove] = useState(true)
  return (
    <>
      <fieldset>
        <input
          id="allow-move"
          type="checkbox"
          onClick={() => setAllowMove(!allowMove)}
          checked={allowMove}
          class="mr-2"
        />
        <label for="allow-move">allow tab move</label>
      </fieldset>
      <Tabs
        activeId="ov"
        tabs={[
          { id: 'ov', label: 'Overview' },
          { id: 'cl', label: 'Command Log', icon: IconActionPlayVideo },
          { id: 'err', label: 'Errors', href: 'https://www.cypress.io' },
          { id: 'reco', label: 'Recommendations' },
        ]}
        onSwitch={(_, e) => {
          if (!allowMove) e.preventDefault()
        }}
      />
    </>
  )
}