Skip to content

Commit 1c1093c

Browse files
agmmtooagmmtoo
committed
feat: book list ui
1 parent b9d3930 commit 1c1093c

File tree

15 files changed

+112
-44
lines changed

15 files changed

+112
-44
lines changed

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

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,14 @@ import Link from 'next/link'
2727
import type { Metadata } from 'next'
2828
import { SITE_NAME } from '@/lib/consts'
2929
import Image from 'next/image'
30+
import { Calendar } from 'lucide-react'
31+
import {
32+
Card,
33+
CardContent,
34+
CardDescription,
35+
CardHeader,
36+
CardTitle,
37+
} from '@/components/ui/card'
3038

3139
export const metadata: Metadata = {
3240
title: `Books · ${SITE_NAME}`,
@@ -130,6 +138,70 @@ export default async function Books({
130138
</TableBody>
131139
</Table>
132140

141+
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
142+
{res.data.map((book) => (
143+
<Link key={book.id} href={`/books/${book.id}`}>
144+
<Card className="group cursor-pointer transition-all duration-200 hover:shadow-lg hover:-translate-y-1">
145+
<CardHeader className="pb-3">
146+
<div className="relative mx-auto mb-4">
147+
<div className="flex items-center justify-center">
148+
{/* 3D Book Effect */}
149+
<div className="relative">
150+
<div className="bg-accent [transform:perspective(400px)_rotateY(314deg)] -mr-1 w-3 h-48">
151+
<span className="my-2 inline-block text-nowrap text-xs font-bold text-accent-foreground/50 [transform:rotate(90deg)_translateY(-20px)] origin-top-left">
152+
{book.title.length > 15
153+
? book.title.substring(0, 15) + '...'
154+
: book.title}
155+
</span>
156+
</div>
157+
<Image
158+
src={
159+
book.cover ??
160+
'/placeholder.svg?height=192&width=128&text=No+Cover'
161+
}
162+
alt={`${book.title} cover`}
163+
width={128}
164+
height={192}
165+
className="shadow-xl rounded-r-md w-32 h-48 object-cover [transform:perspective(800px)_rotateY(14deg)] group-hover:[transform:perspective(800px)_rotateY(8deg)] transition-transform duration-300"
166+
/>
167+
</div>
168+
</div>
169+
</div>
170+
<CardTitle className="text-lg line-clamp-2">
171+
{book.title}
172+
</CardTitle>
173+
<CardDescription className="line-clamp-1">
174+
{book.author}
175+
</CardDescription>
176+
</CardHeader>
177+
<CardContent className="pt-0">
178+
<div className="space-y-2">
179+
{/* <div className="flex items-center gap-2 text-sm text-muted-foreground">
180+
<Hash className="h-3 w-3" />
181+
<span>{book.code}</span>
182+
</div> */}
183+
<div className="flex items-center gap-2 text-sm text-muted-foreground">
184+
<Calendar className="h-3 w-3" />
185+
<span>{book.year}</span>
186+
</div>
187+
{/* {book.genre && (
188+
<Badge variant="outline" className="text-xs">
189+
{book.genre}
190+
</Badge>
191+
)} */}
192+
{/* <div className="flex justify-between items-center mt-3">
193+
<Badge variant={book.available ? "default" : "destructive"}>
194+
{book.available ? "Available" : "Borrowed"}
195+
</Badge>
196+
<span className="text-xs text-muted-foreground">{book.library}</span>
197+
</div> */}
198+
</div>
199+
</CardContent>
200+
</Card>
201+
</Link>
202+
))}
203+
</div>
204+
133205
<Pagination>
134206
<PaginationContent>
135207
{res.meta.skip > 0 && (

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

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ export default async function BorrowDetailsPage({
9191
<CardTitle>Book Information</CardTitle>
9292
</CardHeader>
9393
<CardContent className="grid place-self-center md:place-self-auto md:grid-cols-2 gap-4">
94-
<Link href={`/books/${borrowRes.data.book.id}`}>
94+
<Link href={`/books/${borrowRes.data.book.id}`} legacyBehavior>
9595
<Image
9696
src={borrowRes.data.book?.cover ?? '/book-placeholder.svg'}
9797
alt={borrowRes.data.book.title + "'s cover"}
@@ -102,7 +102,7 @@ export default async function BorrowDetailsPage({
102102
/>
103103
</Link>
104104
<div>
105-
<Link href={`/books/${borrowRes.data.book.id}`} className="link">
105+
<Link href={`/books/${borrowRes.data.book.id}`} className="link" legacyBehavior>
106106
<h2 className="text-xl font-semibold">
107107
{borrowRes.data.book.title}
108108
</h2>
@@ -133,7 +133,7 @@ export default async function BorrowDetailsPage({
133133
<Link
134134
className="link"
135135
href={`/libraries/${borrowRes.data.subscription.membership.library.id}`}
136-
>
136+
legacyBehavior>
137137
{borrowRes.data.subscription.membership.library.name}
138138
</Link>
139139
</p>
@@ -225,7 +225,6 @@ export default async function BorrowDetailsPage({
225225
</CardContent>
226226
</Card>
227227
</div>
228-
229228
<Card>
230229
<CardHeader>
231230
<div className="flex justify-between items-center">
@@ -249,7 +248,7 @@ export default async function BorrowDetailsPage({
249248
<Link
250249
href={`/subscriptions/${borrowRes.data.subscription.id}`}
251250
className="link"
252-
>
251+
legacyBehavior>
253252
{borrowRes.data.subscription.membership.name}
254253
</Link>
255254
</p>
@@ -285,7 +284,6 @@ export default async function BorrowDetailsPage({
285284
</p>
286285
</CardContent>
287286
</Card>
288-
289287
{prevBorrows.length > 0 && (
290288
<Card>
291289
<CardHeader>
@@ -306,7 +304,7 @@ export default async function BorrowDetailsPage({
306304
b.id === id,
307305
}
308306
)}
309-
>
307+
legacyBehavior>
310308
<Image
311309
src={b.book?.cover ?? '/book-placeholder.svg'}
312310
alt={b.book.title + "'s cover"}
@@ -319,7 +317,6 @@ export default async function BorrowDetailsPage({
319317
</CardContent>
320318
</Card>
321319
)}
322-
323320
{(isSuperAdmin || isAdmin || isStaff) && (
324321
<div className="bottom-0 sticky py-2 grid md:grid-cols-2 gap-2">
325322
{borrowRes.data.returning ? (
@@ -339,13 +336,13 @@ export default async function BorrowDetailsPage({
339336
<Link
340337
href={`/borrows/${borrowRes.data.id}/edit`}
341338
className="w-full"
342-
>
339+
legacyBehavior>
343340
<Pen />
344341
Edit
345342
</Link>
346343
</Button>
347344
</div>
348345
)}
349346
</>
350-
)
347+
);
351348
}

‎app/(protected)/borrows/page.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ export default async function Borrows({
112112
</>
113113
</BtnScanReturnBorrow>
114114
<Button asChild>
115-
<Link href="/borrows/new">
115+
<Link href="/borrows/new" legacyBehavior>
116116
<BookUser className="mr-2 size-4" />
117117
Borrow a book
118118
</Link>
@@ -143,7 +143,6 @@ export default async function Borrows({
143143
/>
144144
))}
145145
</div>
146-
147146
<Pagination>
148147
<PaginationContent>
149148
{res.meta.skip > 0 && (
@@ -159,5 +158,5 @@ export default async function Borrows({
159158
</PaginationContent>
160159
</Pagination>
161160
</div>
162-
)
161+
);
163162
}

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,6 @@ export default async function LibraryDetail({
7373
</BreadcrumbItem>
7474
</BreadcrumbList>
7575
</Breadcrumb>
76-
7776
<div className="flex flex-col md:flex-row gap-4 py-2">
7877
{libRes.data.logo && (
7978
<Image
@@ -101,7 +100,6 @@ export default async function LibraryDetail({
101100
</dl>
102101
</div>
103102
</div>
104-
105103
<div className="grid md:grid-cols-2 gap-4 ">
106104
<div className="border border-gray-200 my-4">
107105
<Table>
@@ -119,7 +117,7 @@ export default async function LibraryDetail({
119117
<TableRow key={book.id}>
120118
<TableCell className="font-medium">{book.code}</TableCell>
121119
<TableCell>
122-
<Link href={`/books/${book.id}`} className="link">
120+
<Link href={`/books/${book.id}`} className="link" legacyBehavior>
123121
{book.title}
124122
</Link>
125123
</TableCell>
@@ -158,5 +156,5 @@ export default async function LibraryDetail({
158156
</div>
159157
</div>
160158
</div>
161-
)
159+
);
162160
}

‎app/(protected)/libraries/page.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,6 @@ export default async function Libraries({
8888
</Button>
8989
</div>
9090
</nav>
91-
9291
<Table>
9392
{/* <TableCaption>List of books available in the library.</TableCaption> */}
9493
<TableHeader>
@@ -114,7 +113,7 @@ export default async function Libraries({
114113
)}
115114
</TableCell>
116115
<TableCell>
117-
<Link href={`libraries/${lib.id}`} className="link">
116+
<Link href={`libraries/${lib.id}`} className="link" legacyBehavior>
118117
{lib.name}
119118
</Link>
120119
</TableCell>
@@ -124,7 +123,6 @@ export default async function Libraries({
124123
))}
125124
</TableBody>
126125
</Table>
127-
128126
<Pagination>
129127
<PaginationContent>
130128
{res.meta.skip > 0 && (
@@ -140,5 +138,5 @@ export default async function Libraries({
140138
</PaginationContent>
141139
</Pagination>
142140
</div>
143-
)
141+
);
144142
}

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,6 @@ export default async function SubscriptionDetailsPage({
8585
</Badge>
8686
</div>
8787
</nav>
88-
8988
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
9089
<Card className="row-span-2">
9190
<CardHeader>
@@ -172,7 +171,7 @@ export default async function SubscriptionDetailsPage({
172171
<Link
173172
className="link"
174173
href={`/libraries/${subsRes.data.membership.library.id}`}
175-
>
174+
legacyBehavior>
176175
{subsRes.data.membership.library.name}
177176
</Link>
178177
</p>
@@ -223,5 +222,5 @@ export default async function SubscriptionDetailsPage({
223222
</Card>
224223
</div>
225224
</div>
226-
)
225+
);
227226
}

‎app/page.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -74,15 +74,15 @@ export default async function LibraryDashboard() {
7474
className="w-full h-24 flex flex-col items-center justify-center gap-2"
7575
asChild
7676
>
77-
<Link href={item.href}>
77+
<Link href={item.href} legacyBehavior>
7878
<Icon className="size-6" />
7979
<span>{item.title}</span>
8080
</Link>
8181
</Button>
82-
)
82+
);
8383
})}
8484
</div>
8585
</div>
8686
</main>
87-
)
87+
);
8888
}

‎components/borrows/ListCardBorrow.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export const ListCardBorrow: React.FC<{ borrow: Borrow; idx: number }> = ({
3838
<Link
3939
href={`/borrows/${borrow.id}`}
4040
className="flex justify-between items-start min-h-20"
41-
>
41+
legacyBehavior>
4242
<div>
4343
<CardTitle className="text-lg line-clamp-2">
4444
<abbr title={borrow.book.title} className="no-underline">
@@ -95,5 +95,5 @@ export const ListCardBorrow: React.FC<{ borrow: Borrow; idx: number }> = ({
9595
</BtnReturnBook>
9696
</CardFooter>
9797
</Card>
98-
)
98+
);
9999
}

‎components/borrows/ModalReturnBorrow.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export const ModalReturnBorrow: React.FC<{
4848
<DialogFooter>
4949
{id && (
5050
<Button variant="ghost" asChild>
51-
<Link href={`/borrows/${id}`}>
51+
<Link href={`/borrows/${id}`} legacyBehavior>
5252
Go to Borrow Details
5353
<ArrowRight className="mr-2 size-4" />
5454
</Link>
@@ -57,7 +57,7 @@ export const ModalReturnBorrow: React.FC<{
5757
</DialogFooter>
5858
</DialogContent>
5959
</Dialog>
60-
)
60+
);
6161
}
6262

6363
export const BtnScanReturnBorrow: React.FC<

‎components/borrows/TabLink.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,10 @@ export const TabLink: React.FC<{
2323
'px-2 py-1 text-center text-sm font-medium text-foreground flex items-center justify-center min-w-[80px]', // min-w ensures same width
2424
activeHref === href && 'bg-background rounded-md shadow-sm'
2525
)}
26-
>
26+
legacyBehavior>
2727
{name}
2828
</Link>
2929
))}
3030
</div>
31-
)
31+
);
3232
}

0 commit comments

Comments
 (0)