@navinc/base-react-components/src/sliding-tabs.js

Nav's Pattern Library

import React, { Children, useState } from 'react'
import styled from 'styled-components'
import propTypes from 'prop-types'
import Text from './text.js'
import isRebrand from './is-rebrand.js'

const TabContainer = styled.div`
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: ${({ theme }) => (isRebrand(theme) ? theme.navSecondary100 : theme.neutral100)};
  border: 1px solid ${({ theme }) => (isRebrand(theme) ? theme.navNeutral300 : theme.neutral300)};
  border-radius: 99px;
  position: relative;
`
const setTabTextColor = (isActive, theme) => {
  if (isRebrand(theme)) return isActive ? theme.navNeutralLight : theme.navNeutral400
  return isActive ? theme.white : theme.neutral400
}
const Tab = styled(Text).attrs(() => ({ $bold: true }))`
  text-align: center;
  padding: 16px 32px;
  border-radius: 99px;
  cursor: pointer;
  color: ${({ isActive, theme }) => setTabTextColor(isActive, theme)};
  transition: all 0.25s ease-in;
  position: relative;
`
const Glider = styled.div`
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: ${({ theme }) => (isRebrand(theme) ? theme.navPrimary400 : theme.azure)};
  width: 50%;
  border-radius: 99px;
  transition: 0.25s ease-out;
`

Tab.propTypes = {
  isActive: propTypes.bool,
}

export default ({ children, filterName, ...props }) => {
  const [isOn, setIsOn] = useState(true)
  const handleToggleClick = () => setIsOn((isOn) => !isOn)

  return (
    <TabContainer data-testid="sliding-tabs" {...props} onClick={handleToggleClick}>
      <Glider
        data-testid="sliding-tabs-glider"
        style={{ transform: `${isOn ? 'translateX(0)' : 'translateX(100%)'}` }}
      />
      {Children.toArray(children).map(({ type, key, props }, i) => (
        <Tab as={type} key={key} {...props} id={i} data-testid={`sliding-tabs-children-${i}`} />
      ))}
    </TabContainer>
  )
}