Contains multiple panels, showing only the active, selected panel.

Example with an empty panel, a <Footer> panel and a panel rendered by a function:

<Tabs
  items={[
    {
      label: 'Month',
      id: 'month-tab',
    },
    {
      label: 'Week',
      id: 'week-tab',
      content: <Footer />,
    },
    {
      label: 'Text',
      id: 'text-tab',
      content: args => {
        console.log('rendering text tab');
        return <pre>{`${JSON.stringify(args)}`}</pre>;
      },
    },
  ]}
/>

Log in / Sign up screen example:

const MailIcon = require('../../visuals/Icon/svg/ic_mail.svg');
const AnonymousIcon = require('../../visuals/Icon/svg/d_anonymous.svg');

<div
  style={{
    maxWidth: '300px',
    margin: '16px auto',
  }}
>
  <Tabs
    items={[
      {
        label: 'Log in',
        id: 'login-tab',
        content: (
          <div style={{ display: 'flex', flexDirection: 'column', paddingTop: '24px' }}>
            <Input>
              <InputFieldWithIcon placeholder="Email" icon={MailIcon} semantic="Email" />
            </Input>
            <Input>
              <InputFieldWithIcon placeholder="Password" icon={AnonymousIcon} semantic="Password" type="password" />
            </Input>
            <Button variant="green">Log in</Button>
          </div>
        ),
      },
      {
        label: 'Sign up',
        id: 'signup-tab',
        content: (
          <div style={{ display: 'flex', flexDirection: 'column', paddingTop: '24px' }}>
            <InputForm placeholder="Full name" />
            <Input>
              <InputFieldWithIcon placeholder="Enter email" icon={MailIcon} semantic="Email" />
            </Input>
            <Input>
              <InputFieldWithIcon
                placeholder="Create password"
                icon={AnonymousIcon}
                semantic="Password"
                type="password"
              />
            </Input>
            <Button variant="green">Sign up</Button>
          </div>
        ),
      },
    ]}
  />
</div>;

Log in / Sign up screen example in a blue <Section>, using the light theme:

const MailIcon = require('../../visuals/Icon/svg/ic_mail.svg');
const AnonymousIcon = require('../../visuals/Icon/svg/d_anonymous.svg');

<Section theme="blue">
  <div
    style={{
      maxWidth: '300px',
      margin: '15px auto',
    }}
  >
    <Tabs
      activeTab="signup-tab"
      variant="light"
      items={[
        {
          label: 'Log in',
          id: 'login-tab',
          content: (
            <div style={{ display: 'flex', flexDirection: 'column', paddingTop: '24px' }}>
              <Input variant="light">
                <InputFieldWithIcon placeholder="Email" icon={MailIcon} semantic="Email" />
              </Input>
              <Input variant="light">
                <InputFieldWithIcon placeholder="Password" icon={AnonymousIcon} semantic="Password" type="password" />
              </Input>
              <Button variant="green">Log in</Button>
            </div>
          ),
        },
        {
          label: 'Sign up',
          id: 'signup-tab',
          content: (
            <div style={{ display: 'flex', flexDirection: 'column', paddingTop: '24px' }}>
              <InputForm placeholder="Full name" />
              <Input variant="light">
                <InputFieldWithIcon placeholder="Enter email" icon={MailIcon} semantic="Email" />
              </Input>
              <Input>
                <InputFieldWithIcon
                  placeholder="Create password"
                  icon={AnonymousIcon}
                  semantic="Create password"
                  type="password"
                />
              </Input>
              <Button variant="green">Sign up</Button>
            </div>
          ),
        },
      ]}
    />
  </div>
</Section>;