import * as React from 'react'
import Head from 'next/head'
import rivetQuery from '@hashicorp/platform-cms'
import useCasesQuery from './query.graphql'
import { renderMetaTags } from 'react-datocms'
import IoUsecaseHero from 'components/io-usecase-hero'
import IoUsecaseSection from 'components/io-usecase-section'
import IoUsecaseCustomer from 'components/io-usecase-customer'
import IoCardContainer from 'components/io-card-container'
import IoVideoCallout from 'components/io-video-callout'
import IoUsecaseCallToAction from 'components/io-usecase-call-to-action'
import s from './style.module.css'
export default function UseCasePage({ data }) {
const {
seo,
heroHeading,
heroDescription,
challengeHeading,
challengeDescription,
challengeImage,
challengeLink,
solutionHeading,
solutionDescription,
solutionImage,
solutionLink,
customerCaseStudy,
cardsHeading,
cardsDescription,
tutorialsLink,
tutorialCards,
documentationLink,
documentationCards,
callToActionHeading,
callToActionDescription,
callToActionLinks,
videoCallout,
} = data
const _customerCaseStudy = customerCaseStudy[0]
const _videoCallout = videoCallout[0]
return (
<>
{renderMetaTags(seo)}
{_customerCaseStudy ? (
{
return {
value: stat.value,
key: stat.label,
}
})}
/>
) : null}
{
return {
eyebrow: card.eyebrow,
link: {
url: card.link,
type: 'inbound',
},
heading: card.heading,
description: card.description,
products: card.products,
}
})}
/>
{
return {
eyebrow: card.eyebrow,
link: {
url: card.link,
type: 'inbound',
},
heading: card.heading,
description: card.description,
products: card.products,
}
})}
/>
{
return {
text: link.title,
url: link.link,
}
})}
pattern="/img/usecase-callout-pattern.svg"
/>
{_videoCallout ? (
) : null}
>
)
}
export async function getStaticPaths() {
const { allConsulUseCases } = await rivetQuery({
query: useCasesQuery,
})
return {
paths: allConsulUseCases.map((page) => {
return {
params: {
slug: page.slug,
},
}
}),
fallback: 'blocking',
}
}
export async function getStaticProps({ params }) {
const { slug } = params
const { allConsulUseCases } = await rivetQuery({
query: useCasesQuery,
})
const page = allConsulUseCases.find((page) => page.slug === slug)
if (!page) {
return { notFound: true }
}
return {
props: {
data: page,
},
revalidate:
process.env.HASHI_ENV === 'production'
? process.env.GLOBAL_REVALIDATE
: 10,
}
}