feat: links

Author: agmmtoo

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

@@ -55,26 +55,25 @@ export default async function BookDetailsPage({
           </BreadcrumbItem>
         </BreadcrumbList>
       </Breadcrumb>
-      <div className="place-self-center flex">
-        <div className="bg-accent shadow-xl [transform:perspective(400px)_rotateY(314deg)] -mr-1 w-10">
-          <h2 className="my-2 text-nowrap text-sm font-bold text-accent-foreground/50 [transform:rotate(90deg)_translateY(-30px)] origin-top-left">
+      <div className="place-self-center flex my-12">
+        <div className="bg-accent [transform:perspective(400px)_rotateY(314deg)] -mr-1 w-10">
+          <span className="my-2 inline-block text-nowrap text-xs font-bold text-accent-foreground/50 [transform:rotate(90deg)_translateY(-30px)] origin-top-left">
             {bookRes.data.title}
-          </h2>
+          </span>
         </div>
         <Image
           src={bookRes.data?.cover ?? '/book-placeholder.svg'}
           alt={bookRes.data.title + "'s cover"}
           width={256}
           height={256}
           className={clsx(
-            'shadow-xl rounded-r-lg w-56 h-auto',
+            'shadow-xl rounded-r-md w-56 h-auto',
             '[transform:perspective(800px)_rotateY(14deg)]'
           )}
           priority
         />
       </div>
-      <div className="place-self-center text-center">
-        {/* <h2 className="text-xl font-semibold">{bookRes.data.title}</h2> */}
+      <div className="place-self-center text-center border-t">
         <p className="text-gray-600">{bookRes.data.author}</p>
         <p className="text-sm text-gray-500">{bookRes.data.code}</p>
       </div>

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

@@ -132,13 +132,15 @@ export default async function BorrowDetailsPage({
                 alt={borrowRes.data.book.title + "'s cover"}
                 width={256}
                 height={256}
-                className="shadow-md rounded-lg w-56 h-auto place-self-center row-span-2"
+                className="shadow-md rounded-md w-56 h-auto hover:shadow-md hover:scale-105 transition-transform"
               />
             </Link>
             <div>
-              <h2 className="text-xl font-semibold">
-                {borrowRes.data.book.title}
-              </h2>
+              <Link href={`/books/${borrowRes.data.book.id}`} className="link">
+                <h2 className="text-xl font-semibold">
+                  {borrowRes.data.book.title}
+                </h2>
+              </Link>
               <p className="text-gray-600">{borrowRes.data.book.author}</p>
               <p className="text-sm text-gray-500">
                 {borrowRes.data.book.code}

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

@@ -118,7 +118,11 @@ export default async function LibraryDetail({
               {bookRes.data.map((book) => (
                 <TableRow key={book.id}>
                   <TableCell className="font-medium">{book.code}</TableCell>
-                  <TableCell>{book.title}</TableCell>
+                  <TableCell>
+                    <Link href={`/books/${book.id}`} className="link">
+                      {book.title}
+                    </Link>
+                  </TableCell>
                   <TableCell>{book.year}</TableCell>
                   <TableCell className="text-right">{book.author}</TableCell>
                 </TableRow>

app/(protected)/libraries/page.tsx

@@ -112,7 +112,9 @@ export default async function Libraries({
                 )}
               </TableCell>
               <TableCell>
-                <Link href={`libraries/${lib.id}`}>{lib.name}</Link>
+                <Link href={`libraries/${lib.id}`} className="link">
+                  {lib.name}
+                </Link>
               </TableCell>
               <TableCell>{formatDate(lib.created_at)}</TableCell>
               <TableCell>{formatDate(lib.updated_at)}</TableCell>

app/(protected)/subscriptions/page.tsx

@@ -119,7 +119,9 @@ export default async function Subscriptions({
           {res.data.map((s) => (
             <TableRow key={s.id}>
               <TableCell>
-                <Link href={`subscriptions/${s.id}`}>{s.user?.name}</Link>
+                <Link href={`subscriptions/${s.id}`} className="link">
+                  {s.user?.name}
+                </Link>
               </TableCell>
               <TableCell>{s.membership?.name}</TableCell>
               <TableCell>{s.membership?.library?.name}</TableCell>

app/globals.css

@@ -53,7 +53,6 @@
   color utility to any element that depends on these defaults.
 */
 @layer base {
-
   *,
   ::after,
   ::before,
@@ -147,4 +146,4 @@
   body {
     @apply bg-background text-foreground;
   }
-}
+}

components/memberships/CardMembership.tsx

@@ -1,5 +1,6 @@
 import { Membership } from '@/lib/types/membership'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import Link from 'next/link'
 import { formatDate } from '@/lib/utils'
 
 export const CardMembership: React.FC<{ membership: Membership }> = ({
@@ -30,7 +31,14 @@ export const CardMembership: React.FC<{ membership: Membership }> = ({
           </div>
           <div className="grid grid-cols-3">
             <dt className="font-medium">Library:</dt>
-            <dd className="col-span-2">{membership.library.name}</dd>
+            <dd className="col-span-2">
+              <Link
+                href={`/libraries/${membership.library_id}`}
+                className="link"
+              >
+                {membership.library.name}
+              </Link>
+            </dd>
           </div>
         </dl>
       </CardContent>