this repo has no description
1
fork

Configure Feed

Select the types of activity you want to include in your feed.

Display book cover, title, and ratings placeholder

modamo-gh 873c08ac ba247a90

+20 -2
+20 -2
app/book/[bookID]/page.tsx
··· 1 1 import Header from "@/components/Header"; 2 2 import { getSession } from "@/lib/auth/session"; 3 3 import { Agent } from "@atproto/api"; 4 + import Image from "next/image"; 4 5 import { redirect } from "next/navigation"; 5 6 6 7 const Book = async ({ params }) => { ··· 34 35 <> 35 36 <Header /> 36 37 <div className="gap-4 grid grid-cols-2 row-span-9"> 37 - <div className="bg-emerald-900 col-span-1 p-4 rounded-2xl"> 38 - <p>{JSON.stringify(book)}</p> 38 + <div className="bg-emerald-900 col-span-1 gap-4 grid grid-rows-3 p-4 rounded-2xl"> 39 + <div className="bg-amber-100 flex items-center justify-center rounded-2xl row-span-2"> 40 + <div className="aspect-2/3 h-full overflow-hidden relative rounded-2xl"> 41 + <Image 42 + alt={`Book cover for ${book.value.title} by ${book.value.authors}`} 43 + className="object-cover" 44 + fill 45 + src={`/api/blob?cid=${book.value.cover?.ref?.toString()}&did=${ 46 + session.did 47 + }`} 48 + /> 49 + </div> 50 + </div> 51 + <div className="bg-amber-100 rounded-2xl row-span-1"> 52 + <p className="text-emerald-900">{`Title: ${book?.value.title}`}</p> 53 + <p className="text-emerald-900">Amazon Rating:</p> 54 + <p className="text-emerald-900">Goodreads Rating:</p> 55 + <p className="text-emerald-900">Number of Pages:</p> 56 + </div> 39 57 </div> 40 58 <div className="bg-emerald-900 col-span-1 p-4 rounded-2xl"></div> 41 59 </div>