chore: add home page with information on local API

2024-03-09 13:50:13 -03:00 · 2024-03-09 13:50:13 -03:00 · 2ba9a84825
commit 2ba9a84825
parent 373b4c0a4c
5 changed files with 124 additions and 2 deletions
--- a/src/app/(app)/globals.scss
+++ b/src/app/(app)/globals.scss
@ -0,0 +1,37 @@
+html,
+body {
+  font-family: 'Roboto', 'Inter', sans-serif;
+}
+
+.container {
+  max-width: 37.5rem;
+  padding: 0 2rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+h1 {
+  font-size: 4rem;
+}
+
+.rainbow {
+  font-family: monospace;
+  letter-spacing: 5px;
+  background: linear-gradient(to right, #6666ff, #0099ff, #00ff00, #ff3399, #6666ff);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  animation: rainbow_animation 6s ease-in-out infinite;
+  background-size: 400% 100%;
+}
+
+@keyframes rainbow_animation {
+  0%,
+  100% {
+    background-position: 0 0;
+  }
+
+  50% {
+    background-position: 100% 0;
+  }
+}
--- a/src/app/(app)/layout.tsx
+++ b/src/app/(app)/layout.tsx
@ -0,0 +1,15 @@
+import React from 'react'
+import './globals.scss'
+
+/* Our app sits here to not cause any conflicts with payload's root layout  */
+const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  return (
+    <html>
+      <body>
+        <main>{children}</main>
+      </body>
+    </html>
+  )
+}
+
+export default Layout
--- a/src/app/(app)/page.tsx
+++ b/src/app/(app)/page.tsx
@ -0,0 +1,54 @@
+import Example from '@/components/Example'
+import Link from 'next/link'
+import React from 'react'
+
+const Page = () => {
+  return (
+    <article className={['container'].filter(Boolean).join(' ')}>
+      <h1>
+        Payload 3.0 <span className='rainbow'>ALPHA</span>!
+      </h1>
+      <p>
+        This alpha is rapidly evolving, you can report any bugs against{' '}
+        <a href='https://github.com/payloadcms/payload-3.0-alpha-demo/issues' target='_blank'>
+          the repo
+        </a>{' '}
+        or in the{' '}
+        <a href='https://discord.com/channels/967097582721572934/1215659716538273832' target='_blank'>
+          dedicated channel in Discord
+        </a>
+        .
+      </p>
+
+      <p>
+        <strong>
+          Payload is running at <Link href='/admin'>/admin</Link>
+        </strong>
+      </p>
+
+      <p>
+        <Link href='/my-route' target='_blank'>
+          /my-route
+        </Link>{' '}
+        contains an example of a custom route running the Local API.
+      </p>
+
+      {/* Commented out for now due to bug */}
+      {/* <Example /> */}
+
+      <p>You can use the Local API in your server components like this:</p>
+      <pre>
+        <code>
+          {`import { getPayload } from 'payload'
+const payload = await getPayload()
+
+const data = await payload.find({
+  collection: 'posts',
+})`}
+        </code>
+      </pre>
+    </article>
+  )
+}
+
+export default Page
--- a/src/app/my-route/route.ts
+++ b/src/app/my-route/route.ts
@ -1,5 +1,11 @@
+import { getPayload } from 'payload'
+
 export const GET = async () => {
-  return Response.json({
-    hello: 'elliot',
+  const payload = await getPayload()
+
+  const data = await payload.find({
+    collection: 'users',
  })
+
+  return Response.json(data)
 }
--- a/src/components/Example.tsx
+++ b/src/components/Example.tsx
@ -0,0 +1,10 @@
+import React from 'react'
+import { getPayload } from 'payload'
+
+const Example: React.FC = async () => {
+  const payload = await getPayload()
+  const url = payload.config.serverURL
+  return <div>The admin panel is running at: {url}</div>
+}
+
+export default Example