Function ProductGuides

components/guides/ProductGuides.tsx:10–44

()

import { useTranslation } from 'components/hooks/useTranslation'

export const ProductGuides = () => {
  const { title, learningTracks, includeGuides } = useProductGuidesContext()
  const { t } = useTranslation('product_guides')

  return (
    <DefaultLayout>
      <LandingSection className="pt-3">
        <GuidesHero />
      </LandingSection>

      <div data-search="article-body">
        {learningTracks && learningTracks.length > 0 && (
          <LandingSection
            title={`${title} learning paths`}
            className="border-top py-6"
            sectionLink="learning-paths"
            description={t('learning_paths_desc')}
          >
            <LearningTracks />
          </LandingSection>
        )}

        {includeGuides && (
          <LandingSection
            title={`All ${title} guides`}
            className="border-top py-6 color-border-default"
            sectionLink="all-guides"
          >
            <ArticleCards />
          </LandingSection>
        )}
      </div>
    </DefaultLayout>
  )
}