more examples commits

docs/pages/docs/guides/custom-admin-ui-pages.mdx

@@ -41,6 +41,7 @@ Note that doing so means you are no longer required to import React into your fi
 Of course this is purely a recommendation, if you would prefer to roll your own css-in-js solution in with your custom component please feel free to! Although this may require additional configuration outside of the scope of this guide.
 
 ?> **Not all NextJS exports are available:** As of the inception of this guide, Keystone **only** expects the page component as a default export in the pages directory. This means that unlike with Next, auxillary exports such as `getStaticProps` and `getServerProps` will be ignored.
+?> **Navigation** As of the time of writing this guide, there is presently no way to
 
 ?> **Old JSX transform** As of the time of writing this guide, Keystone is internally still leveraging the old JSX transform, which means that any `.tsx` files within the admin folder will need to be preceded with a React import.
 

examples/custom-admin-ui-pages/admin/pages/custom-page.tsx

@@ -1,7 +1,21 @@
-import React from 'react';
+/** @jsx jsx */
+import { jsx, Stack } from '@keystone-ui/core';
 // Please note that while this capability is driven by NextJS's pages directory
 // We do not currently expose any of the auxillary methods that NextJS provides i.e. `getStaticProps`
 // Presently the only export from the directory that is respected is the page component itself.
 export default function () {
-  return <h1>Hello this is a custom page</h1>;
+  return (
+    <Stack as="main" gap="sm">
+      <h1
+        css={{
+          maxWidth: '80%',
+          width: '100%',
+          textAlign: 'center',
+        }}
+      >
+        Hello this is a custom page
+      </h1>
+      <p>This is a custom page added to the admin-ui</p>
+    </Stack>
+  );
 }