107 lines
3.4 KiB
TypeScript
107 lines
3.4 KiB
TypeScript
import { headers as getHeaders } from 'next/headers.js'
|
|
import Image from 'next/image'
|
|
import { getPayload } from 'payload'
|
|
import React from 'react'
|
|
|
|
import config from '@/src/payload.config'
|
|
import { RichText } from '@payloadcms/richtext-lexical/react'
|
|
import Link from 'next/link'
|
|
import { ItemCardGrid } from '@payloadcms/ui'
|
|
import { HOMEPAGE_QUERY, PROJECT_QUERY } from '@/utilities/queries'
|
|
|
|
export default async function HomePage() {
|
|
const headers = await getHeaders()
|
|
const payloadConfig = await config
|
|
const payload = await getPayload({ config: payloadConfig })
|
|
const { user } = await payload.auth({ headers })
|
|
|
|
const homePage = HOMEPAGE_QUERY
|
|
|
|
const projects = PROJECT_QUERY
|
|
|
|
const page = homePage.docs?.[0]
|
|
|
|
return (
|
|
<div className="home">
|
|
<div className="content">
|
|
{page && (
|
|
<div>
|
|
<h1 className='text-4xl font-bold'>{page.title}</h1>
|
|
<div>
|
|
{page.richText && (
|
|
<RichText data={page.richText}/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
<picture>
|
|
<source srcSet="https://raw.githubusercontent.com/payloadcms/payload/main/packages/ui/src/assets/payload-favicon.svg" />
|
|
<Image
|
|
alt="Payload Logo"
|
|
height={65}
|
|
src="https://raw.githubusercontent.com/payloadcms/payload/main/packages/ui/src/assets/payload-favicon.svg"
|
|
width={65}
|
|
/>
|
|
</picture>
|
|
{!user && <h1>Welcome to your new project.</h1>}
|
|
{user && <h1>Welcome back, {user.name}</h1>}
|
|
<div className="links">
|
|
<a
|
|
className="admin"
|
|
href={payloadConfig.routes.admin}
|
|
rel="noopener noreferrer"
|
|
target="_blank"
|
|
>
|
|
Go to admin panel
|
|
</a>
|
|
<a
|
|
className="docs"
|
|
href="https://payloadcms.com/docs"
|
|
rel="noopener noreferrer"
|
|
target="_blank"
|
|
>
|
|
Documentation
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div className="footer">
|
|
<p>Update this page by editing</p>
|
|
<code>app/(frontend)/page.tsx</code>
|
|
</div>
|
|
<div>
|
|
{projects.docs.length > 0 && (
|
|
<div className='space-y-4'>
|
|
{projects.docs
|
|
.filter((item) => item.featuredProject)
|
|
.map((item) => (
|
|
<article
|
|
key={item.id}
|
|
className="border-2 border-white rounded col-span-full" // full width styling
|
|
>
|
|
<Link className="no-decoration" href={`/${item.slug}`}>
|
|
<h3 className="text-lg font-bold">{item.title}</h3>
|
|
<p>{item.description}</p>
|
|
</Link>
|
|
</article>
|
|
))
|
|
}
|
|
<div className='grid grid-cols-1 md:grid-cols-2 gap-4'>
|
|
{projects.docs
|
|
.filter((item) => !item.featuredProject)
|
|
.map((item) => (
|
|
<article key={item.id} className="border-2 border-white rounded">
|
|
<Link className="no-decoration" href={`/projects/${item.slug}`}>
|
|
<h3 className="text-lg font-bold">{item.title}</h3>
|
|
<p>{item.description}</p>
|
|
</Link>
|
|
</article>
|
|
))
|
|
}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|