Robin Malfait
fdd2629795
* use esbuild for React instead of tsdx * remove tsdx from Vue * use consistent names * add jest and prettier * update scripts * ignore some folders for prettier * run lint script instead of tsdx lint * run prettier en-masse This has a few changes because of the new prettier version. * bump typescript to latest version * make typescript happy * cleanup playground package.json * make esbuild a dev dependency * make scripts consistent * fix husky hooks * add dedicated watch script * add `yarn playground-react` and `yarn react-playground` (alias) This will make sure to run a watcher for the actual @headlessui/react package, and start a development server in the playground-react package. * ignore formatting in the .next folder * run prettier on playground-react package * setup playground-vue Still not 100% working, but getting there! * add playground aliases in @headlessui/vue and @headlessui/react This allows you to run `yarn react playground` or `yarn vue playground` from the root. * add `clean` script * move examples folder in playground-vue to root * ensure new lines for consistency in scripts * fix typescript issue * fix typescript issues in playgrounds * make sure to run prettier on everything it can * run prettier on all files * improve error output If you minify the code, then it could happen that the errors are a bit obscure. This will hardcode the component name to improve errors. * add the `prettier-plugin-tailwindcss` plugin, party! * update changelog
64 lines
1.4 KiB
TypeScript
64 lines
1.4 KiB
TypeScript
import React from 'react'
|
|
import ErrorPage from 'next/error'
|
|
import Head from 'next/head'
|
|
import Link from 'next/link'
|
|
|
|
import { ExamplesType, resolveAllExamples } from '../utils/resolve-all-examples'
|
|
|
|
function NextLink(props: React.ComponentProps<'a'>) {
|
|
let { href, children, ...rest } = props
|
|
return (
|
|
<Link href={href}>
|
|
<a {...rest}>{children}</a>
|
|
</Link>
|
|
)
|
|
}
|
|
|
|
export async function getStaticProps() {
|
|
return {
|
|
props: {
|
|
examples: await resolveAllExamples('pages'),
|
|
},
|
|
}
|
|
}
|
|
|
|
export default function Page(props: { examples: false | ExamplesType[] }) {
|
|
if (props.examples === false) {
|
|
return <ErrorPage statusCode={404} />
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>Examples</title>
|
|
</Head>
|
|
|
|
<div className="container mx-auto my-24">
|
|
<div className="prose">
|
|
<h2>Examples</h2>
|
|
<Examples examples={props.examples} />
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export function Examples(props: { examples: ExamplesType[] }) {
|
|
return (
|
|
<ul>
|
|
{props.examples.map((example) => (
|
|
<li key={example.path}>
|
|
{example.children ? (
|
|
<h3 className="text-xl capitalize">{example.name}</h3>
|
|
) : (
|
|
<NextLink href={example.path} className="capitalize">
|
|
{example.name}
|
|
</NextLink>
|
|
)}
|
|
{example.children && <Examples examples={example.children} />}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)
|
|
}
|