123 lines
3.8 KiB
TypeScript
123 lines
3.8 KiB
TypeScript
'use client'
|
|
|
|
import { Book, Genre, Repository } from '@/payload-types'
|
|
|
|
import { Combobox, ComboboxLabel, ComboboxOption, ComboboxDescription } from '@/components/combobox'
|
|
import { Field, Label } from '@/components/fieldset'
|
|
import { PaginatedDocs } from 'payload'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Badge } from '@/components/ui/badge'
|
|
|
|
import { Loader2 } from 'lucide-react'
|
|
import { RichText } from '@/components/RichText'
|
|
|
|
type DropDownProps = {
|
|
currentRepository: Repository
|
|
repositories: Repository[]
|
|
}
|
|
function RepoDropdown({ currentRepository, repositories }: DropDownProps) {
|
|
return (
|
|
<Field className="">
|
|
<Label htmlFor="repositories">From Repository</Label>
|
|
<div className="flex gap-2">
|
|
<Combobox
|
|
name="repositories"
|
|
options={repositories}
|
|
displayValue={(repo) => repo?.name}
|
|
defaultValue={currentRepository}
|
|
className="w"
|
|
>
|
|
{(repo) => (
|
|
<ComboboxOption value={repo}>
|
|
<ComboboxLabel>{repo.abbreviation}</ComboboxLabel>
|
|
<ComboboxDescription>{repo.name}</ComboboxDescription>
|
|
</ComboboxOption>
|
|
)}
|
|
</Combobox>
|
|
<Button className="hover:scale-105 bg-emerald-500 text-foreground hover:text-black">
|
|
<Loader2 className="animate-spin" />
|
|
<span>Request Copy</span>
|
|
</Button>
|
|
</div>
|
|
</Field>
|
|
)
|
|
}
|
|
|
|
type Props = {
|
|
book: Book
|
|
repositories: PaginatedDocs<Repository>
|
|
}
|
|
|
|
export default function BookByIdPageClient(props: Props) {
|
|
const { book, repositories } = props
|
|
|
|
const repos = repositories.docs
|
|
|
|
return (
|
|
<div className="mx-auto px-4 py-16">
|
|
{/* Book */}
|
|
<div className="md:grid md:grid-cols-7 md:gap-8">
|
|
{/* Book Cover */}
|
|
<div className="md:col-span-3">
|
|
<img
|
|
alt="book cover art"
|
|
src={
|
|
book.isbn
|
|
? `https://covers.openlibrary.org/b/isbn/${book.isbn}-L.jpg`
|
|
: '/images/book-48.svg'
|
|
}
|
|
className="w-full rounded-lg bg-gray-100 object-cover"
|
|
/>
|
|
</div>
|
|
|
|
{/* Book details */}
|
|
<div className="mt-14 sm:mt-16 md:col-span-4 md:mt-0">
|
|
<div className="">
|
|
<div className="mt-4">
|
|
<h1 className="text-2xl font-bold tracking-tight text-foreground sm:text-3xl">
|
|
{book.title}
|
|
</h1>
|
|
|
|
<h2 id="information-heading" className="sr-only">
|
|
Book information
|
|
</h2>
|
|
<p className="mt-2 text-sm text-muted-foreground">
|
|
{book.publication && (
|
|
<span>
|
|
Published:
|
|
<time dateTime={book.publication}>{book.publication}</time>
|
|
</span>
|
|
)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<p className="my-6 text-accent-foreground">{book.summary}</p>
|
|
|
|
<RepoDropdown currentRepository={repos[0]} repositories={repos} />
|
|
|
|
<div className="mt-10 border-t border-gray-200 pt-10 ">
|
|
<h3 className="text-sm font-medium text-foreground">Genres</h3>
|
|
<div className="mt-4">
|
|
<ul role="list" className="text-foreground flex gap-2 flex-wrap">
|
|
{(book.genre as Genre[])?.map((g) => (
|
|
<Badge key={g.id} className="inline-block cursor-pointer">
|
|
{g.name}
|
|
</Badge>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
{book.description && (
|
|
<div className="mt-10 border-t border-gray-200 pt-10">
|
|
<h3 className="text-sm font-medium text-muted-foreground">Description</h3>
|
|
<RichText data={book.description} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|