import { MDXProvider , components } from '@components/MDXComponents' ; import { QuickNav } from '@components/QuickNav' ; import { TitleAndMetaTags } from '@components/TitleAndMetaTags' ; import { getAllFrontmatter , getAllVersionsFromPath , getMdxBySlug } from '@lib/mdx' ; import { getMDXComponent } from 'mdx-bundler/client' ; import React from 'react' ; import type { Frontmatter } from 'types/frontmatter' ; type Doc = { frontmatter : Frontmatter ; code : any ; } ; export default function DocComponentsPage ( { frontmatter , code } ) { const Component = React . useMemo ( ( ) => getMDXComponent ( code ) , [ code ] ) ; return ( < > < TitleAndMetaTags title = { `${ frontmatter . title } — Tamagui` } description = { frontmatter . description } image = { frontmatter . image } / > { } < MDXProvider frontmatter = { frontmatter } > < Component components = { components as any } /> < /MDXProvider> < QuickNav key = { frontmatter . slug } / > < />); } export async function getStaticPaths ( ) { const frontmatters = getAllFrontmatter ( 'docs/components' ) ; const paths = frontmatters . map ( ( frontmatter ) => { return { params : { slug : frontmatter . slug . replace ( 'docs/components/' , '' ) . split ( '/' ) } , } ; } ) ; const latestVersionPaths = paths . map ( ( path ) => { const withoutVersion = path . params . slug . slice ( 0 , path . params . slug . length - 1 ) ; return { params : { slug : withoutVersion } , } ; } ) ; return { paths : [ ... paths , ... latestVersionPaths ] , fallback : false , } ; } export async function getStaticProps ( context ) { const { frontmatter , code } = await getMdxBySlug ( 'docs/components' , context . params . slug . join ( '/' ) ) ; const [ componentName , componentVersion ] = context . params . slug ; const versions = getAllVersionsFromPath ( `docs/components/${ componentName }` ) ; const extendedFrontmatter = { ... frontmatter , version : componentVersion || versions [ 0 ] , versions : versions , } ; return { props : { frontmatter : extendedFrontmatter , code } } ; }