autonomic-cooperative/nextload
0
0
Fork 0
Code Issues 11 Pull Requests Packages Projects Releases Wiki Activity

chore: add home page with information on local API

Browse Source
This commit is contained in:
Paul Popus 2024-03-09 13:50:13 -03:00
parent 373b4c0a4c
commit 2ba9a84825
5 changed files with 124 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/app/(app)/globals.scss Normal file
View File

@ -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;
}
}

15
src/app/(app)/layout.tsx Normal file
View File

@ -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

54
src/app/(app)/page.tsx Normal file
View File

@ -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

10
src/app/my-route/route.ts
View File

@ -1,5 +1,11 @@
import { getPayload } from 'payload'
export const GET = async () => { export const GET = async () => {
return Response.json({ const payload = await getPayload()
hello: 'elliot',
const data = await payload.find({
collection: 'users',
}) })
return Response.json(data)
} }

10
src/components/Example.tsx Normal file
View File

@ -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