Tabs

import { Card, Flex, TabItem, Tabs } from 'marketing-ui'

function Demo() {
  return (
    <Tabs>
      <TabItem id='tab-1' label='Tab 1' selected>
        <Flex
          paddingLeft={{ default: 'base' }}
          paddingRight={{ default: 'base' }}
          gap={{ default: 'macro' }}
        >
          <Card>
            <p>Panel 1</p>
          </Card>
          <Card>
            <p>Panel 1</p>
          </Card>
          <Card>
            <p>Panel 1</p>
          </Card>
          <Card>
            <p>Panel 1</p>
          </Card>
          <Card>
            <p>Panel 1</p>
          </Card>
        </Flex>
      </TabItem>
      <TabItem id='tab-2' label='Tab 2'>
        <div
          style={{
            display: 'grid',
            gap: 'var(--s-small)',
            gridTemplateColumns: '1fr',
            padding: 'var(--s-small)',
          }}
        >
          <p>Panel 2</p>
        </div>
      </TabItem>
      <TabItem id='tab-3' label='Tab 3'>
        <div
          style={{
            display: 'grid',
            gap: 'var(--s-small)',
            gridTemplateColumns: '1fr',
            padding: 'var(--s-small)',
          }}
        >
          <p>Panel 3</p>
        </div>
      </TabItem>
    </Tabs>
  )
}

export default Demo