import cn from 'classnames' ; import React from 'react' ; import { Meta , Title } from 'react-meta-elements' ; import { useAppContext } from '../state' ; import '../styles/reset.module.css' ; import { useRootClass } from '../utils/useRootClass' ; import DocsBody from './DocsBody' ; import CSS from './PenpadUI.module.css' ; import SpecimensBody from './SpecimensBody' ; import TitleBar from './TitleBar' ; /**
 * The main UI. I'm a consumer of PenpadProvider
 */ const PenpadUI = ( ) => { const { state , actions } = useAppContext ( ) ; if ( ! state || ! actions ) { throw new Error ( 'PenpadUI needs to be placed inside a PenpadProvider' ) ; } const { uiConfig } = state ; const { title , isEmbedded } = uiConfig ; const { activeView , specimens } = state ; const viewType = activeView . type ; const specimenId = ( activeView . type === 'specimen' && activeView . specimenId ) || null ; const specimen = ( specimenId && specimens && specimens [ specimenId ] ) || null ; if ( ! isEmbedded ) { useRootClass ( CSS . hasPenpadUI ) ; } return ( < x - penpad - ui > < div className = { cn ( CSS . root , { [ CSS . isFullscreen ] : ! isEmbedded , [ CSS . isEmbedded ] : isEmbedded } ) } > { } < Title title = { title } / > < Meta name = 'viewport' content = 'width=1200px' / > < Meta name = 'robots' content = 'noindex' / > { } < div className = { CSS . topnav } > < div className = { CSS . title } > < TitleBar /> < /div> < /div> { } < div className = { CSS . body } > { viewType === 'specimen' ? ( < SpecimensBody { ... { specimen , specimenId } } / > ) : null } { viewType === 'page' ? < DocsBody /> : null} < /div> < /div> < /x-penpad-ui>); } ; export default PenpadUI ;