this repo has no description
Display book cover, title, and ratings placeholder
+20
-2
+20
-2
app/book/[bookID]/page.tsx
+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>