import fs from "fs";
import { NextPage } from "next";
import Head from "next/head";
import Link from "next/link";
import path from "path";
import { inferSSRProps } from "@lib/types/inferSSRProps";
async function _getStaticProps() {
const dir = path.join(process.cwd(), "pages", "sandbox");
const pages = fs
.readdirSync(dir)
.filter((file) => !file.startsWith("."))
.map((file) => {
const parts = file.split(".");
// remove extension
parts.pop();
return parts.join(".");
});
return {
props: {
pages,
},
};
}
type PageProps = inferSSRProps<typeof _getStaticProps>;
const SandboxPage: NextPage<PageProps> = (props) => {
return (
<>
<Head>
<meta name="googlebot" content="noindex" />
</Head>
<nav>
<ul className="flex justify-between flex-col md:flex-row">
{props.pages.map((pathname) => (
<li key={pathname}>
<Link href={"/sandbox/" + pathname + "#main"}>
<a className="font-mono px-4">{pathname}</a>
</Link>
</li>
))}
</ul>
</nav>
<main id="main" className="bg-gray-100">
{props.children}
</main>
</>
);
};
export function sandboxPage(Component: NextPage) {
const Wrapper: NextPage<PageProps> = (props) => {
return (
<>
<SandboxPage {...props}>
<Component />
</SandboxPage>
</>
);
};
return {
default: Wrapper,
getStaticProps: _getStaticProps,
};
}
const page = sandboxPage(() => {
return <p className="text-center text-2xl my-20">Click a component above</p>;
});
export default page.default;
export const getStaticProps = page.getStaticProps;