import React from 'react'
import { Tabs, Tab, Panel } from '@bumaga/tabs' 

export default () => (
  <Tabs>
    <div>
      <Tab><button>Tab 1</button></Tab>
      <Tab><button>Tab 2</button></Tab>
      <Tab><button>Tab 3</button></Tab>
    </div>

    <Panel><p>Panel 1</p></Panel>
    <Panel><p>Panel 2</p></Panel>
    <Panel><p>panel 3</p></Panel>
  </Tabs>
);

import React from "react";
import { Tabs, useTabState, usePanelState } from "@bumaga/tabs";

const Tab = ({ children }) => {
  const { onClick } = useTabState();

  return <button onClick={onClick}>{children}</button>;
};

const Panel = ({ children }) => {
  const isActive = usePanelState();

  return isActive ? <p>{children}</p> : null;
};

export default () => (
  <Tabs>
    <div>
      <Tab>Tab 1</Tab>
      <Tab>Tab 2</Tab>
    </div>

    <Panel>Panel 1</Panel>
    <Panel>Panel 2</Panel>
  </Tabs>
);