/** @jsx jsx */ import { useRouter } from 'next/router'; import { jsx, Grid } from 'theme-ui'; import { useCMS, usePlugin } from 'tinacms'; import { InlineForm } from 'react-tinacms-inline'; import { useGithubToolbarPlugins, useGithubJsonForm } from 'react-tinacms-github'; import useStore from '@stores/store'; import RelatedResources from '@components/RelatedResources'; import ResourceEditor from '@components/ResourceEditor'; import Contributors from '@components/Contributors'; import Feedback from '@components/Feedback'; import ContributeCta from '@components/ContributeCta'; import BreadCrumbs from '@components/BreadCrumbs'; import { navItems } from '../data/resourcesSubNav.json'; const ResourcePresentation = ({ file, sharedContentfile, resources, relatedResources, contentType, preview, mobile, }) => { const cms = useCMS(); const { asPath } = useRouter(); const [data, form] = useGithubJsonForm(sharedContentfile); usePlugin(form); useGithubToolbarPlugins(); const contributors = file.data.frontmatter.contributors; const [activeGroup, activeParent] = useStore((state) => [state.activeGroup, state.activeParent]); const group = navItems.find(({ slug }) => activeGroup === slug); const parent = resources?.find((r) => r.data.frontmatter.slug === activeParent)?.data.frontmatter; return ( <InlineForm form={form}> <BreadCrumbs contentType={contentType} group={group} parent={parent} title={file.data.frontmatter.title} /> <ResourceEditor file={file} preview={preview} cms={cms} /> <Grid gap={4}> {relatedResources && relatedResources.length > 0 && ( <RelatedResources resources={relatedResources} contentType={contentType} /> )} <Feedback route={asPath} cms={cms} mobile={mobile} /> <ContributeCta file={file} mobile={mobile} /> {contributors && <Contributors contributors={contributors} mobile={mobile} />} </Grid> </InlineForm> ); }; export default ResourcePresentation;