Subdomain nav bar

<Container sx={{position: 'relative', overflowX: 'scroll'}}>
  <SubdomainNavBar title="Subdomain" fixed={false}>
    <SubdomainNavBar.Link href="#">Collections</SubdomainNavBar.Link>
    <SubdomainNavBar.Link href="#">Topics</SubdomainNavBar.Link>
    <SubdomainNavBar.Link href="#">Articles</SubdomainNavBar.Link>
    <SubdomainNavBar.Link href="#">Events</SubdomainNavBar.Link>
    <SubdomainNavBar.Link href="#">Video</SubdomainNavBar.Link>
    <SubdomainNavBar.Link href="#">Social</SubdomainNavBar.Link>
    <SubdomainNavBar.Search />
    <SubdomainNavBar.PrimaryAction href="#">
      Primary CTA
    </SubdomainNavBar.PrimaryAction>
    <SubdomainNavBar.SecondaryAction href="#">
      Secondary CTA
    </SubdomainNavBar.SecondaryAction>
  </SubdomainNavBar>
</Container>

const App = () => {
  const inputRef = React.useRef(null)
  const [searchResults, setSearchResults] = React.useState([])
  const [searchTerm, setSearchTerm] = React.useState('')

  const mockSearchData = [
    {
      title: 'How to transform your business in a digital world',
      description:
        'GitHub Enterprise empowers developers with tools they already know and love, accelerates high-quality software development and secure delivery, and enhances the speed and power of innovation.\n',
      url: 'https://resources.github.com/devops/github-enterprise-ebook',
      date: '2022-08-29T00:00+02:00',
    },
    {
      title: 'The fundamentals of continuous deployment in DevOps',
      description:
        'What is continuous deployment?\nContinuous deployment (CD) is an automated software release practice where code changes are deployed to different stages as they pass predefined tests. The goal of CD is to facilitate faster releases by using automation to help remove the need for human intervention as much as possible during the deployment process.',
      url: 'https://resources.github.com/devops/fundamentals/ci-cd/deployment',
      date: '2022-05-23T12:00+00:00',
    },
  ]

  const handleChange = () => {
    if (!inputRef.current) return
    if (inputRef.current.value.length === 0) {
      setSearchResults(undefined)
      return
    }
    if (inputRef.current.value.length > 2) {
      setTimeout(() => setSearchResults(mockSearchData), 1000)
      setSearchTerm(inputRef.current.value)
      return
    }
  }

  const handleSubmit = (e) => {
    e.preventDefault()
    if (!inputRef.current) return
    if (!inputRef.current.value) {
      alert(`Enter a value and try again.`)
      return
    }

    alert(`Name: ${inputRef.current.value}`)
  }

  return (
    <Container sx={{position: 'relative', overflowX: 'scroll'}}>
      <SubdomainNavBar title="Subdomain" fixed={false}>
        <SubdomainNavBar.Link href="#collections">
          Collections
        </SubdomainNavBar.Link>
        <SubdomainNavBar.Link href="#topics">Topics</SubdomainNavBar.Link>
        <SubdomainNavBar.Search
          ref={inputRef}
          searchTerm={searchTerm}
          onSubmit={handleSubmit}
          onChange={handleChange}
          searchResults={searchResults}
        />
      </SubdomainNavBar>
    </Container>
  )
}

render(App)