docs: improved webpage

packages/playground/src/containers/page/page.tsx

@@ -0,0 +1,38 @@
+import { useEffect, useState } from 'react';
+import { Frame } from '../../components/frame';
+import { Skeleton } from '@nextui-org/react';
+import { Content } from '../../components/content';
+
+type Props = {
+  content: () => Promise<{ Page: (props: any) => JSX.Element }>;
+};
+
+const Page = ({ content }: Props) => {
+  const [Component, setComponent] = useState<React.ComponentType>();
+  useEffect(() => {
+    const run = async () => {
+      const component = await content();
+      setComponent(() => component.Page);
+    };
+    run();
+  }, [content]);
+
+  return (
+    <Frame>
+      <Content>
+        {!!Component ? (
+          <article className="my-10">
+            <Component />
+          </article>
+        ) : (
+          <div className="w-full flex flex-col gap-2">
+            <Skeleton className="h-3 w-3/5 rounded-lg" />
+            <Skeleton className="h-3 w-4/5 rounded-lg" />
+          </div>
+        )}
+      </Content>
+    </Frame>
+  );
+};
+
+export { Page };