Skip to content

Commit f570d5f

Browse files
agmmtooagmmtoo
committed
fix: explore book page
1 parent da8b829 commit f570d5f

File tree

6 files changed

+145
-62
lines changed

6 files changed

+145
-62
lines changed

‎app/(protected)/admin/books/[id]/edit/page.tsx‎

Lines changed: 1 addition & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,7 @@
1-
import {
2-
Breadcrumb,
3-
BreadcrumbItem,
4-
BreadcrumbLink,
5-
BreadcrumbList,
6-
BreadcrumbSeparator,
7-
} from '@/components/ui/breadcrumb'
81
import { Verify } from '@/lib/firebase/firebase'
92
import { getBook } from '@/lib/api/book'
103
import { BookForm } from '@/components/books/BookForm'
114
import { updateBookAction } from '@/lib/actions/update-book'
12-
import { Route } from 'next'
135

146
export default async function EditBookPage({
157
params,
@@ -28,26 +20,6 @@ export default async function EditBookPage({
2820
}
2921

3022
return (
31-
<div className="space-y-4">
32-
<h1 className="text-2xl font-semibold">{bookRes.data.title}</h1>
33-
<Breadcrumb>
34-
<BreadcrumbList>
35-
<BreadcrumbItem>
36-
<BreadcrumbLink href="/admin">Home</BreadcrumbLink>
37-
</BreadcrumbItem>
38-
<BreadcrumbSeparator />
39-
<BreadcrumbItem>
40-
<BreadcrumbLink href="/admin/books">Books</BreadcrumbLink>
41-
</BreadcrumbItem>
42-
<BreadcrumbSeparator />
43-
<BreadcrumbItem>
44-
<BreadcrumbLink href={`/admin/books/${id}` as Route}>
45-
{bookRes.data.title}
46-
</BreadcrumbLink>
47-
</BreadcrumbItem>
48-
</BreadcrumbList>
49-
</Breadcrumb>
50-
<BookForm initialData={bookRes.data} onSubmitAction={updateBookAction} />
51-
</div>
23+
<BookForm initialData={bookRes.data} onSubmitAction={updateBookAction} />
5224
)
5325
}

‎app/(protected)/admin/books/[id]/layout.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import {
33
BreadcrumbItem,
44
BreadcrumbLink,
55
BreadcrumbList,
6-
BreadcrumbPage,
76
BreadcrumbSeparator,
87
} from '@/components/ui/breadcrumb'
98
import { getBook } from '@/lib/api/book'
@@ -13,6 +12,7 @@ import Link from 'next/link'
1312
import { colorsToCssVars } from '@/lib/utils/color-utils'
1413
import { ThreeDBook } from '@/components/books/three-d-book'
1514
import { ViewTransition } from 'react'
15+
import { Route } from 'next'
1616

1717
export default async function BookDetailsLayout({
1818
params,
@@ -46,7 +46,9 @@ export default async function BookDetailsLayout({
4646
</BreadcrumbItem>
4747
<BreadcrumbSeparator />
4848
<BreadcrumbItem>
49-
<BreadcrumbPage>{bookRes.data.title}</BreadcrumbPage>
49+
<BreadcrumbLink href={`/admin/books/${id}` as Route}>
50+
{bookRes.data.title}
51+
</BreadcrumbLink>
5052
</BreadcrumbItem>
5153
</BreadcrumbList>
5254
</Breadcrumb>

‎app/(protected)/books/[id]/layout.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@ import {
33
BreadcrumbItem,
44
BreadcrumbLink,
55
BreadcrumbList,
6-
BreadcrumbPage,
76
BreadcrumbSeparator,
87
} from '@/components/ui/breadcrumb'
98
import { getBook } from '@/lib/api/book'
109
import { colorsToCssVars } from '@/lib/utils/color-utils'
1110
import { ThreeDBook } from '@/components/books/three-d-book'
1211
import { ViewTransition } from 'react'
1312
import BtnWatchlist from '@/components/books/BtnWatchlist'
13+
import { Route } from 'next'
1414

1515
export default async function BookDetailsLayout({
1616
params,
@@ -36,15 +36,17 @@ export default async function BookDetailsLayout({
3636
<Breadcrumb>
3737
<BreadcrumbList>
3838
<BreadcrumbItem>
39-
<BreadcrumbLink href="/admin">Home</BreadcrumbLink>
39+
<BreadcrumbLink href="/">Home</BreadcrumbLink>
4040
</BreadcrumbItem>
4141
<BreadcrumbSeparator />
4242
<BreadcrumbItem>
43-
<BreadcrumbLink href="/admin/books">Books</BreadcrumbLink>
43+
<BreadcrumbLink href="/books">Books</BreadcrumbLink>
4444
</BreadcrumbItem>
4545
<BreadcrumbSeparator />
4646
<BreadcrumbItem>
47-
<BreadcrumbPage>{bookRes.data.title}</BreadcrumbPage>
47+
<BreadcrumbLink href={`/books/${id}` as Route}>
48+
{bookRes.data.title}
49+
</BreadcrumbLink>
4850
</BreadcrumbItem>
4951
</BreadcrumbList>
5052
</Breadcrumb>

‎app/explore/books/[id]/layout.tsx‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import {
2+
Breadcrumb,
3+
BreadcrumbItem,
4+
BreadcrumbLink,
5+
BreadcrumbList,
6+
BreadcrumbSeparator,
7+
} from '@/components/ui/breadcrumb'
8+
import { getBook } from '@/lib/api/book'
9+
import { colorsToCssVars } from '@/lib/utils/color-utils'
10+
import { ThreeDBook } from '@/components/books/three-d-book'
11+
import { ViewTransition } from 'react'
12+
import { Route } from 'next'
13+
import Link from 'next/link'
14+
import { Button } from '@/components/ui/button'
15+
16+
export default async function BookDetailsLayout({
17+
params,
18+
children,
19+
}: {
20+
params: Promise<{ id: string }>
21+
children: React.ReactNode
22+
}) {
23+
const { id } = await params
24+
25+
const [bookRes] = await Promise.all([getBook({ id, include_stats: 'true' })])
26+
27+
if ('error' in bookRes) {
28+
console.log({ libRes: bookRes })
29+
return <div>{JSON.stringify(bookRes.message)}</div>
30+
}
31+
32+
const cssVars = colorsToCssVars(bookRes.data.colors)
33+
34+
return (
35+
<div className="space-y-4" style={cssVars}>
36+
<h1 className="text-2xl font-semibold">{bookRes.data.title}</h1>
37+
<Breadcrumb>
38+
<BreadcrumbList>
39+
<BreadcrumbItem>
40+
<BreadcrumbLink href="/">Home</BreadcrumbLink>
41+
</BreadcrumbItem>
42+
<BreadcrumbSeparator />
43+
<BreadcrumbItem>
44+
<BreadcrumbLink href="/explore/books">Books</BreadcrumbLink>
45+
</BreadcrumbItem>
46+
<BreadcrumbSeparator />
47+
<BreadcrumbItem>
48+
<BreadcrumbLink href={`/explore/books/${id}` as Route}>
49+
{bookRes.data.title}
50+
</BreadcrumbLink>
51+
</BreadcrumbItem>
52+
</BreadcrumbList>
53+
</Breadcrumb>
54+
55+
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
56+
<div className="lg:col-span-1">
57+
<div className="grid place-items-center gap-4 lg:sticky lg:top-4">
58+
<ViewTransition name={bookRes.data.id}>
59+
<div className="relative">
60+
<div className="absolute inset-0 blur-3xl opacity-80 bg-(--color-light-vibrant) dark:bg-(--color-dark-vibrant) rounded-lg" />
61+
<ThreeDBook book={bookRes.data} />
62+
</div>
63+
</ViewTransition>
64+
<Button className="w-full" asChild>
65+
<Link href={`/login?from=/books/${bookRes.data.id}`}>Login</Link>
66+
</Button>
67+
</div>
68+
</div>
69+
70+
<div className="lg:col-span-2">{children}</div>
71+
</div>
72+
</div>
73+
)
74+
}

‎app/explore/books/[id]/page.tsx‎

Lines changed: 59 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,9 @@
1-
import { DetailBook } from '@/components/books/DetailBook'
2-
import {
3-
Breadcrumb,
4-
BreadcrumbItem,
5-
BreadcrumbLink,
6-
BreadcrumbList,
7-
BreadcrumbPage,
8-
BreadcrumbSeparator,
9-
} from '@/components/ui/breadcrumb'
1+
import { Calendar, Hash, Library } from 'lucide-react'
2+
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
3+
import { Badge } from '@/components/ui/badge'
104
import { getBook } from '@/lib/api/book'
5+
import { getBookStatus } from '@/lib/utils'
6+
import Link from 'next/link'
117

128
export default async function BookDetailsPage({
139
params,
@@ -23,26 +19,63 @@ export default async function BookDetailsPage({
2319
return <div>{JSON.stringify(bookRes.message)}</div>
2420
}
2521

22+
const status = getBookStatus(bookRes.data.stats)
23+
const isAvailable = status === 'available'
24+
2625
return (
2726
<div className="space-y-4">
28-
<h1 className="text-2xl font-semibold">{bookRes.data.title}</h1>
29-
<Breadcrumb>
30-
<BreadcrumbList>
31-
<BreadcrumbItem>
32-
<BreadcrumbLink href="/">Home</BreadcrumbLink>
33-
</BreadcrumbItem>
34-
<BreadcrumbSeparator />
35-
<BreadcrumbItem>
36-
<BreadcrumbLink href="/explore/books">Books</BreadcrumbLink>
37-
</BreadcrumbItem>
38-
<BreadcrumbSeparator />
39-
<BreadcrumbItem>
40-
<BreadcrumbPage>{bookRes.data.title}</BreadcrumbPage>
41-
</BreadcrumbItem>
42-
</BreadcrumbList>
43-
</Breadcrumb>
27+
<div>
28+
<h1 className="text-3xl font-bold mb-2">{bookRes.data.title}</h1>
29+
<p className="text-xl text-muted-foreground mb-4">
30+
{bookRes.data.author}
31+
</p>
32+
<div className="flex flex-wrap gap-2 mb-4">
33+
<Badge
34+
className="uppercase"
35+
variant={isAvailable ? 'default' : 'secondary'}
36+
>
37+
{status}
38+
</Badge>
39+
{/* <Badge variant="outline">bookRes.data.genre</Badge> */}
40+
</div>
41+
</div>
42+
43+
<Card>
44+
<CardHeader>
45+
<CardTitle>Book Information</CardTitle>
46+
</CardHeader>
47+
<CardContent className="grid gap-2 grid-cols-[max-content_1fr] md:grid-cols-[max-content_1fr_max-content_1fr] items-center">
48+
<Hash className="size-4" />
49+
<p>
50+
<span className="font-medium">Code:&nbsp;</span>
51+
{bookRes.data.code}
52+
</p>
53+
<Calendar className="size-4" />
54+
<p>
55+
<span className="font-medium">Year:&nbsp;</span>
56+
{bookRes.data.year}
57+
</p>
58+
<Library className="size-4" />
59+
<p>
60+
<span className="font-medium">Library:&nbsp;</span>
61+
<Link
62+
href={`/libraries/${bookRes.data.library.id}`}
63+
className="link"
64+
>
65+
{bookRes.data.library.name}
66+
</Link>
67+
</p>
68+
</CardContent>
69+
</Card>
4470

45-
<DetailBook book={bookRes.data} />
71+
<Card>
72+
<CardHeader>
73+
<CardTitle>Description</CardTitle>
74+
</CardHeader>
75+
<CardContent>
76+
<p className="text-sm leading-relaxed">{bookRes.data.description}</p>
77+
</CardContent>
78+
</Card>
4679
</div>
4780
)
4881
}

‎components/books/BtnWatchlist.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export default function BtnWatchlist({
4545
return (
4646
<Button
4747
variant="outline"
48-
className="w-full hover:bg-[var(--color-vibrant)] hover:text-background"
48+
className="w-full hover:bg-(--color-light-vibrant) hover:text-white dark:hover:bg-(--color-dark-vibrant) dark:hover:text-white"
4949
onClick={handleAdd}
5050
disabled={pending}
5151
>

0 commit comments

Comments
 (0)