87 lines
2.9 KiB
TypeScript

import { headers as getHeaders } from 'next/headers.js'
import { getPayload, PaginatedDocs } from 'payload'
import React from 'react'
import { fileURLToPath } from 'url'
import config from '@/payload.config'
import BookList from '@/components/BookList'
import { Book } from '@/payload-types'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { TextShimmer } from '@/components/ui/text-shimmer'
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 fileURL = `vscode://file/${fileURLToPath(import.meta.url)}`
const initBrowseBooks = (await payload.find({
collection: 'books',
depth: 10,
limit: 25,
overrideAccess: false,
select: {
title: true,
authors: true,
publication: true,
lcc: true,
genre: true,
isbn: true,
copies: true,
},
})) as PaginatedDocs<Book>
return (
<div className="home">
<div className="py-24 sm:py-32">
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<div className="mx-auto max-w-2xl lg:mx-0">
<p className="text-base/7 font-semibold text-indigo-600">Get the help you need</p>
<h2 className="mt-2 text-5xl font-semibold tracking-tight text-foreground sm:text-7xl">
<TextShimmer
duration={1.2}
className="[--base-color:var(--color-indigo-600)] [--base-gradient-color:var(--color-blue-200)] dark:[--base-color:var(--color-blue-700)] dark:[--base-gradient-color:var(--color-blue-400)]"
>
Welcome
</TextShimmer>
{user && <small>{`user.firstName`}</small>}
</h2>
<p className="mt-8 text-lg font-medium text-pretty text-muted-foreground sm:text-xl/8">
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat
commodo. Elit sunt amet fugiat veniam occaecat fugiat.
</p>
</div>
</div>
</div>
<Tabs defaultValue="feed" className="p-4">
<TabsList className="grid w-full grid-cols-3">
<TabsTrigger value="feed">Your Feed</TabsTrigger>
<TabsTrigger value="browse">Browse</TabsTrigger>
<TabsTrigger value="search">Search</TabsTrigger>
</TabsList>
<TabsContent value="feed">
{initBrowseBooks && <BookList books={initBrowseBooks} />}
</TabsContent>
<TabsContent value="browse">
{initBrowseBooks && <BookList books={initBrowseBooks} />}
</TabsContent>
<TabsContent value="search">Search</TabsContent>
</Tabs>
<div className="footer">
<p>Update this page by editing</p>
<a className="codeLink" href={fileURL}>
<code>app/(frontend)/page.tsx</code>
</a>
</div>
</div>
)
}