import { useData } from '@theguild/components'
import { ProductUpdateTeaser } from '../components/product-updates'

export { getStaticProps } from '../components/product-updates'

export function ProductUpdatesPage() {
  const { changelogs } = useData()
  return (
    <ol className="relative mt-12 border-l border-gray-200 dark:border-gray-700">
      {changelogs.map(item => (
        <ProductUpdateTeaser key={item.route} {...item} />
      ))}
    </ol>
  )
}

<div className="[&>h1]:!text-left [&>h1]:!mb-0 [&>p]:!mt-0">
  # Product Updates

The most recent developments from GraphQL Hive.

</div>

<ProductUpdatesPage />
