Skip to content

Commit fef673e

Browse files
agmmtooagmmtoo
committed
feat: library logo
1 parent 4bee346 commit fef673e

File tree

6 files changed

+123
-37
lines changed

6 files changed

+123
-37
lines changed

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

Lines changed: 90 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ import {
1919
} from '@/components/ui/table'
2020
import { getListBooks } from '@/lib/api/book'
2121
import { getLibrary } from '@/lib/api/library'
22+
import { getListMemberships } from '@/lib/api/membership'
23+
import Image from 'next/image'
2224
import Link from 'next/link'
2325

2426
export default async function LibraryDetail({
@@ -27,9 +29,10 @@ export default async function LibraryDetail({
2729
params: Promise<{ id: string }>
2830
}) {
2931
const { id } = await params
30-
const [libRes, bookRes] = await Promise.all([
32+
const [libRes, bookRes, memRes] = await Promise.all([
3133
getLibrary({ id }),
32-
getListBooks({ limit: 20, library_id: id }),
34+
getListBooks({ limit: 5, library_id: id }),
35+
getListMemberships({ limit: 5, library_id: id }),
3336
])
3437

3538
if ('error' in libRes) {
@@ -42,8 +45,13 @@ export default async function LibraryDetail({
4245
return <div>{JSON.stringify(bookRes.message)}</div>
4346
}
4447

48+
if ('error' in memRes) {
49+
console.log({ memRes })
50+
return <div>{JSON.stringify(memRes.message)}</div>
51+
}
52+
4553
return (
46-
<div>
54+
<div className="space-y-2">
4755
<h1 className="text-2xl font-semibold">{libRes.data.name}</h1>
4856
<Breadcrumb>
4957
<BreadcrumbList>
@@ -66,33 +74,85 @@ export default async function LibraryDetail({
6674
</BreadcrumbList>
6775
</Breadcrumb>
6876

69-
<Table>
70-
<TableCaption>List of books available in the library.</TableCaption>
71-
<TableHeader>
72-
<TableRow>
73-
<TableHead className="w-[100px]">Code</TableHead>
74-
<TableHead>Title</TableHead>
75-
<TableHead>Year</TableHead>
76-
<TableHead className="text-right">Author</TableHead>
77-
</TableRow>
78-
</TableHeader>
79-
<TableBody>
80-
{bookRes.data.map((book) => (
81-
<TableRow key={book.id}>
82-
<TableCell className="font-medium">{book.code}</TableCell>
83-
<TableCell>{book.title}</TableCell>
84-
<TableCell>{book.year}</TableCell>
85-
<TableCell className="text-right">{book.author}</TableCell>
86-
</TableRow>
87-
))}
88-
</TableBody>
89-
{/* <TableFooter>
90-
<TableRow>
91-
<TableCell colSpan={3}>Total</TableCell>
92-
<TableCell className="text-right">$2,500.00</TableCell>
93-
</TableRow>
94-
</TableFooter> */}
95-
</Table>
77+
<div className="flex flex-col md:flex-row gap-4 py-2">
78+
{libRes.data.logo && (
79+
<Image
80+
src={libRes.data.logo}
81+
alt={libRes.data.name}
82+
width={400}
83+
height={400}
84+
className="rounded-lg w-auto h-auto"
85+
/>
86+
)}
87+
<div className="">
88+
<dl className="grid gap-2">
89+
<div className="grid grid-cols-3">
90+
<dt className="font-medium">Phone:</dt>
91+
<dd className="col-span-2">{libRes.data.phone}</dd>
92+
</div>
93+
<div className="grid grid-cols-3">
94+
<dt className="font-medium">Email:</dt>
95+
<dd className="col-span-2">{libRes.data.email}</dd>
96+
</div>
97+
<div className="grid grid-cols-3">
98+
<dt className="font-medium">Description:</dt>
99+
<dd className="col-span-2">{libRes.data.description}</dd>
100+
</div>
101+
</dl>
102+
</div>
103+
</div>
104+
105+
<div className="grid md:grid-cols-2 gap-4">
106+
<div className="border border-gray-200 my-4">
107+
<Table>
108+
<TableCaption>Latest added books from the library.</TableCaption>
109+
<TableHeader>
110+
<TableRow>
111+
<TableHead className="">Code</TableHead>
112+
<TableHead>Title</TableHead>
113+
<TableHead>Year</TableHead>
114+
<TableHead className="text-right">Author</TableHead>
115+
</TableRow>
116+
</TableHeader>
117+
<TableBody>
118+
{bookRes.data.map((book) => (
119+
<TableRow key={book.id}>
120+
<TableCell className="font-medium">{book.code}</TableCell>
121+
<TableCell>{book.title}</TableCell>
122+
<TableCell>{book.year}</TableCell>
123+
<TableCell className="text-right">{book.author}</TableCell>
124+
</TableRow>
125+
))}
126+
</TableBody>
127+
</Table>
128+
</div>
129+
130+
<div className="border border-gray-200 my-4">
131+
<Table>
132+
<TableCaption>
133+
Latest added memberships from the library.
134+
</TableCaption>
135+
<TableHeader>
136+
<TableRow>
137+
<TableHead>Name</TableHead>
138+
<TableHead>Borrow Limit</TableHead>
139+
<TableHead>Borrow Period</TableHead>
140+
<TableHead>Price</TableHead>
141+
</TableRow>
142+
</TableHeader>
143+
<TableBody>
144+
{memRes.data.map((m) => (
145+
<TableRow key={m.id}>
146+
<TableCell className="whitespace-nowrap">{m.name}</TableCell>
147+
<TableCell>{m.usage_limit ?? '-'}</TableCell>
148+
<TableCell>{m.loan_period} D</TableCell>
149+
<TableCell>{m.price ?? '-'}</TableCell>
150+
</TableRow>
151+
))}
152+
</TableBody>
153+
</Table>
154+
</div>
155+
</div>
96156
</div>
97157
)
98158
}

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import { SITE_NAME } from '@/lib/consts'
2727
import { formatDate } from '@/lib/utils'
2828
import Link from 'next/link'
2929
import type { Metadata } from 'next'
30+
import Image from 'next/image'
3031

3132
export const metadata: Metadata = {
3233
title: `Libraries · ${SITE_NAME}`,
@@ -90,6 +91,7 @@ export default async function Libraries({
9091
{/* <TableCaption>List of books available in the library.</TableCaption> */}
9192
<TableHeader>
9293
<TableRow>
94+
<TableHead>Logo</TableHead>
9395
<TableHead>Name</TableHead>
9496
<TableHead>Creatd At</TableHead>
9597
<TableHead>Updated</TableHead>
@@ -98,6 +100,17 @@ export default async function Libraries({
98100
<TableBody>
99101
{res.data.map((lib) => (
100102
<TableRow key={lib.id}>
103+
<TableCell>
104+
{lib.logo && (
105+
<Image
106+
src={lib.logo}
107+
alt={lib.name + "'s logo"}
108+
width={50}
109+
height={50}
110+
className="rounded"
111+
/>
112+
)}
113+
</TableCell>
101114
<TableCell>
102115
<Link href={`libraries/${lib.id}`}>{lib.name}</Link>
103116
</TableCell>

‎next.config.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,25 @@ const nextConfig: NextConfig = {
1717
},
1818
]
1919
},
20+
21+
images: {
22+
remotePatterns: [
23+
{
24+
protocol: 'https',
25+
hostname: 'encrypted-sharing.s3.ap-southeast-1.amazonaws.com',
26+
port: '',
27+
pathname: '/public/**',
28+
search: '',
29+
},
30+
{
31+
protocol: 'http',
32+
hostname: '13.212.97.184',
33+
port: '9000',
34+
pathname: '/librarease/public/**',
35+
search: '',
36+
},
37+
],
38+
},
2039
}
2140

2241
export default nextConfig

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@
2121
"@radix-ui/react-slot": "^1.1.1",
2222
"@radix-ui/react-toast": "^1.2.3",
2323
"@radix-ui/react-tooltip": "^1.1.5",
24-
"@tailwindcss/line-clamp": "^0.4.4",
2524
"class-variance-authority": "^0.7.1",
2625
"clsx": "^2.1.1",
2726
"cmdk": "1.0.0",

‎tailwind.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,5 +58,5 @@ export default {
5858
},
5959
},
6060
},
61-
plugins: [require('tailwindcss-animate'), require('@tailwindcss/line-clamp')],
61+
plugins: [require('tailwindcss-animate')],
6262
} satisfies Config

‎yarn.lock‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1449,11 +1449,6 @@
14491449
dependencies:
14501450
tslib "^2.8.0"
14511451

1452-
"@tailwindcss/line-clamp@^0.4.4":
1453-
version "0.4.4"
1454-
resolved "https://registry.yarnpkg.com/@tailwindcss/line-clamp/-/line-clamp-0.4.4.tgz#767cf8e5d528a5d90c9740ca66eb079f5e87d423"
1455-
integrity sha512-5U6SY5z8N42VtrCrKlsTAA35gy2VSyYtHWCsg1H87NU1SXnEfekTVlrga9fzUDrrHcGi2Lb5KenUWb4lRQT5/g==
1456-
14571452
"@tootallnate/once@2":
14581453
version "2.0.0"
14591454
resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf"

0 commit comments

Comments
 (0)