Skip to content

Commit 0dbf0af

Browse files
agmmtooagmmtoo
committed
feat: 3d book
1 parent 1c1093c commit 0dbf0af

File tree

36 files changed

+374
-296
lines changed

36 files changed

+374
-296
lines changed

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

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import {
66
BreadcrumbPage,
77
BreadcrumbSeparator,
88
} from '@/components/ui/breadcrumb'
9-
import Link from 'next/link'
109
import { Verify } from '@/lib/firebase/firebase'
1110
import { getBook } from '@/lib/api/book'
1211
import { BookEditForm } from '@/components/books/book-edit-form'
@@ -33,15 +32,11 @@ export default async function EditBookPage({
3332
<Breadcrumb>
3433
<BreadcrumbList>
3534
<BreadcrumbItem>
36-
<Link href="/" passHref legacyBehavior>
37-
<BreadcrumbLink>Home</BreadcrumbLink>
38-
</Link>
35+
<BreadcrumbLink href="/">Home</BreadcrumbLink>
3936
</BreadcrumbItem>
4037
<BreadcrumbSeparator />
4138
<BreadcrumbItem>
42-
<Link href="/books" passHref legacyBehavior>
43-
<BreadcrumbLink>Books</BreadcrumbLink>
44-
</Link>
39+
<BreadcrumbLink href="/books">Books</BreadcrumbLink>
4540
</BreadcrumbItem>
4641
<BreadcrumbSeparator />
4742
<BreadcrumbItem>

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

Lines changed: 81 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,13 @@ import {
66
BreadcrumbPage,
77
BreadcrumbSeparator,
88
} from '@/components/ui/breadcrumb'
9-
import Link from 'next/link'
10-
// import { Verify } from '@/lib/firebase/firebase'
119
import { getBook } from '@/lib/api/book'
12-
import Image from 'next/image'
13-
import clsx from 'clsx'
14-
// import { cookies } from 'next/headers'
10+
import { BookDown, Calendar, Hash, Library } from 'lucide-react'
11+
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
12+
import { ThreeDBook } from '@/components/books/three-d-book'
13+
import { Button } from '@/components/ui/button'
14+
import { Badge } from '@/components/ui/badge'
15+
import Link from 'next/link'
1516

1617
export default async function BookDetailsPage({
1718
params,
@@ -20,63 +21,108 @@ export default async function BookDetailsPage({
2021
}) {
2122
const { id } = await params
2223

23-
// await Verify({ from: `/books/${id}` })
24-
2524
const [bookRes] = await Promise.all([getBook({ id })])
2625

2726
if ('error' in bookRes) {
2827
console.log({ libRes: bookRes })
2928
return <div>{JSON.stringify(bookRes.message)}</div>
3029
}
3130

32-
// const cookieStore = await cookies()
33-
// const sessionName = process.env.SESSION_COOKIE_NAME as string
34-
// const session = cookieStore.get(sessionName)
35-
3631
return (
3732
<div className="space-y-4">
3833
<h1 className="text-2xl font-semibold">{bookRes.data.title}</h1>
3934
<Breadcrumb>
4035
<BreadcrumbList>
4136
<BreadcrumbItem>
42-
<Link href="/" passHref legacyBehavior>
43-
<BreadcrumbLink>Home</BreadcrumbLink>
44-
</Link>
37+
<BreadcrumbLink href="/">Home</BreadcrumbLink>
4538
</BreadcrumbItem>
4639
<BreadcrumbSeparator />
4740
<BreadcrumbItem>
48-
<Link href="/books" passHref legacyBehavior>
49-
<BreadcrumbLink>Books</BreadcrumbLink>
50-
</Link>
41+
<BreadcrumbLink href="/books">Books</BreadcrumbLink>
5142
</BreadcrumbItem>
5243
<BreadcrumbSeparator />
5344
<BreadcrumbItem>
5445
<BreadcrumbPage>{bookRes.data.title}</BreadcrumbPage>
5546
</BreadcrumbItem>
5647
</BreadcrumbList>
5748
</Breadcrumb>
58-
<div className="place-self-center flex my-12">
59-
<div className="bg-accent [transform:perspective(400px)_rotateY(314deg)] -mr-1 w-10">
60-
<span className="my-2 inline-block text-nowrap text-xs font-bold text-accent-foreground/50 [transform:rotate(90deg)_translateY(-30px)] origin-top-left">
61-
{bookRes.data.title}
62-
</span>
49+
50+
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
51+
{/* Book Cover */}
52+
<div className="lg:col-span-1 grid place-items-center gap-4">
53+
<ThreeDBook book={bookRes.data} />
54+
<Button className="w-full" disabled={true}>
55+
{true ? (
56+
<>
57+
<BookDown className="mr-2 h-4 w-4" />
58+
Borrow Book
59+
</>
60+
) : (
61+
'Currently Borrowed'
62+
)}
63+
</Button>
64+
<Button variant="outline" className="w-full bg-transparent">
65+
Add to Wishlist
66+
</Button>
67+
</div>
68+
69+
{/* Book Information */}
70+
<div className="lg:col-span-2 space-y-4">
71+
<div>
72+
<h1 className="text-3xl font-bold mb-2">{bookRes.data.title}</h1>
73+
<p className="text-xl text-muted-foreground mb-4">
74+
{bookRes.data.author}
75+
</p>
76+
<div className="flex flex-wrap gap-2 mb-4">
77+
<Badge variant={true ? 'default' : 'destructive'}>
78+
{true ? 'Available' : 'Borrowed'}
79+
</Badge>
80+
<Badge variant="outline">bookRes.data.genre</Badge>
81+
</div>
82+
</div>
83+
84+
<Card>
85+
<CardHeader>
86+
<CardTitle>Book Information</CardTitle>
87+
</CardHeader>
88+
<CardContent className="grid gap-2 grid-cols-[max-content_1fr] md:grid-cols-[max-content_1fr_max-content_1fr] items-center">
89+
<Hash className="size-4" />
90+
<p>
91+
<span className="font-medium">Code:&nbsp;</span>
92+
{bookRes.data.code}
93+
</p>
94+
<Calendar className="size-4" />
95+
<p>
96+
<span className="font-medium">Year:&nbsp;</span>
97+
{bookRes.data.year}
98+
</p>
99+
<Library className="size-4" />
100+
<p>
101+
<span className="font-medium">Library:&nbsp;</span>
102+
<Link href={`/libraries/${bookRes.data.library.id}`}>
103+
{bookRes.data.library.name}
104+
</Link>
105+
</p>
106+
</CardContent>
107+
</Card>
108+
109+
<Card>
110+
<CardHeader>
111+
<CardTitle>Description</CardTitle>
112+
</CardHeader>
113+
<CardContent>
114+
<p className="text-sm leading-relaxed">
115+
bookRes.data.description
116+
</p>
117+
</CardContent>
118+
</Card>
63119
</div>
64-
<Image
65-
src={bookRes.data?.cover ?? '/book-placeholder.svg'}
66-
alt={bookRes.data.title + "'s cover"}
67-
width={256}
68-
height={256}
69-
className={clsx(
70-
'shadow-xl rounded-r-md w-56 h-auto',
71-
'[transform:perspective(800px)_rotateY(14deg)]'
72-
)}
73-
priority
74-
/>
75120
</div>
76-
<div className="place-self-center text-center pt-4 border-t">
121+
122+
{/* <div className="place-self-center text-center pt-4 border-t">
77123
<p className="text-gray-600">{bookRes.data.author}</p>
78124
<p className="text-sm text-gray-500">{bookRes.data.code}</p>
79-
</div>
125+
</div> */}
80126
</div>
81127
)
82128
}

‎app/(protected)/books/new/page.tsx‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import {
66
BreadcrumbPage,
77
BreadcrumbSeparator,
88
} from '@/components/ui/breadcrumb'
9-
import Link from 'next/link'
109
import { BookCreateForm } from '@/components/books/book-create-form'
1110

1211
export default function NewBook() {
@@ -16,15 +15,11 @@ export default function NewBook() {
1615
<Breadcrumb>
1716
<BreadcrumbList>
1817
<BreadcrumbItem>
19-
<Link href="/" passHref legacyBehavior>
20-
<BreadcrumbLink>Home</BreadcrumbLink>
21-
</Link>
18+
<BreadcrumbLink href="/">Home</BreadcrumbLink>
2219
</BreadcrumbItem>
2320
<BreadcrumbSeparator />
2421
<BreadcrumbItem>
25-
<Link href="/books" passHref legacyBehavior>
26-
<BreadcrumbLink>Books</BreadcrumbLink>
27-
</Link>
22+
<BreadcrumbLink href="/books">Books</BreadcrumbLink>
2823
</BreadcrumbItem>
2924
<BreadcrumbSeparator />
3025
<BreadcrumbItem>

0 commit comments

Comments
 (0)