import s from './style.module.css' import React, { useState, useEffect, useRef } from 'react' import Head from 'next/head' import { useRouter } from 'next/router' import Link from 'next/link' import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote' import createScope from './utils/create-scope' import { findEntity } from './utils/find-entity' import { components } from './__swingset_data' import { getPeerComponents } from './utils/get-peer-components' import { useBaseRoute } from './utils/use-base-route' import Nav from './components/nav' import { ComponentData, SwingsetPageProps, SwingsetOptions } from './types' import classNames from 'classnames' import { VisuallyHidden } from '@reach/visually-hidden' export default function createPage(swingsetOptions: SwingsetOptions = {}) { return function Page({ sourceType, mdxSource, navData }: SwingsetPageProps) { // tracks the name of the current component const router = useRouter() const baseRoute = useBaseRoute() const [filterValue, setFilterValue] = useState() const searchInputRef = useRef(null) const isFullscreen = router?.query?.isFullscreen && router?.query?.isFullscreen === 'true' const handleFullscreenBttnClick = () => { router.replace( { query: { ...router.query, isFullscreen: !isFullscreen} }, undefined, { shallow: true, } ) } // Focus the search input when pressing the '/' key useEffect(() => { function onKeyDown(e: KeyboardEvent) { const elt = e.target || e.srcElement if (elt instanceof HTMLElement) { const tagName = elt.tagName if ( ('isContentEditable' in elt && elt.isContentEditable) || tagName === 'INPUT' || tagName === 'SELECT' || tagName === 'TEXTAREA' ) { // Already in an input return } if (e.key !== '/') return searchInputRef.current?.focus() e.stopPropagation() e.preventDefault() } } window.addEventListener('keydown', onKeyDown) return () => window.removeEventListener('keydown', onKeyDown) }, []) // finds the actual entity const entity = findEntity(router.query) const peerComponents = getPeerComponents(entity, components) // Filter listed components based on the current filterValue const filteredNav = filterValue ? navData.map((category) => ({ ...category, routes: category.routes.filter((route) => route.name.toLowerCase().includes(filterValue.toLowerCase()) ), })) : navData return (

Component Library

{swingsetOptions.logo ?? }

setFilterValue(e.currentTarget.value)} placeholder="Search" className={s.search} /> /

{sourceType === 'index' ? ( swingsetOptions.index ?? ) : sourceType === 'docs' ? ( ) : sourceType === 'components' ? ( ) : (

Houston we have a problem

)}

) } } const FullscreenIcon = () => { return ( ) } const CloseFullscreenIcon = () => { return ( ) } function IndexPage() { return

Welcome to Swingset!

} function DocsPage({ mdxSource, peerComponents, swingsetOptions, }: { mdxSource: MDXRemoteSerializeResult peerComponents: Record swingsetOptions: SwingsetOptions }) { return ( ) } function ComponentPage({ mdxSource, component, swingsetOptions, peerComponents, }: { mdxSource: MDXRemoteSerializeResult component: ComponentData swingsetOptions: SwingsetOptions peerComponents: Record }) { const { default: defaultExport, ...namedExports } = component.exports if (!component.data.componentName) { throw new Error('Missing component name') } return ( ) }