feat: memberships page

Author: agmmtoo

app/(protected)/memberships/page.tsx

@@ -14,18 +14,11 @@ import {
   PaginationNext,
   PaginationPrevious,
 } from '@/components/ui/pagination'
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table'
 import { getListMemberships } from '@/lib/api/membership'
 import Link from 'next/link'
 import type { Metadata } from 'next'
 import { SITE_NAME } from '@/lib/consts'
+import { ListCardMembership } from '@/components/memberships/ListCardMembership'
 
 export const metadata: Metadata = {
   title: `Memberships · ${SITE_NAME}`,
@@ -87,35 +80,11 @@ export default async function Memberships({
         </div>
       </nav>
 
-      <Table>
-        {/* <TableCaption>List of books available in the library.</TableCaption> */}
-        <TableHeader>
-          <TableRow>
-            <TableHead>Name</TableHead>
-            <TableHead>Library</TableHead>
-            <TableHead>Duration</TableHead>
-            <TableHead>Borrow Limit</TableHead>
-            <TableHead>Borrow Period</TableHead>
-            <TableHead>Active Limit</TableHead>
-            <TableHead>Fine per Day</TableHead>
-            <TableHead>Price</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {res.data.map((m) => (
-            <TableRow key={m.id}>
-              <TableCell>{m.name}</TableCell>
-              <TableCell>{m.library.name}</TableCell>
-              <TableCell>{m.duration} D</TableCell>
-              <TableCell>{m.usage_limit ?? '-'}</TableCell>
-              <TableCell>{m.loan_period} D</TableCell>
-              <TableCell>{m.active_loan_limit}</TableCell>
-              <TableCell>{m.fine_per_day ?? '-'} Pts</TableCell>
-              <TableCell>{m.price ?? '-'}</TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+        {res.data.map((m) => (
+          <ListCardMembership key={m.id} membership={m} />
+        ))}
+      </div>
 
       <Pagination>
         <PaginationContent>

components/memberships/ListCardMembership.tsx

@@ -0,0 +1,74 @@
+import { Book, Calendar, CircleDollarSign, Clock, Gavel } from 'lucide-react'
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+import { Membership } from '@/lib/types/membership'
+import { Badge } from '../ui/badge'
+
+export const ListCardMembership: React.FC<{ membership: Membership }> = ({
+  membership,
+}) => {
+  return (
+    <Card
+      key={membership.id}
+      className={`relative ${true ? 'border-primary' : ''}`}
+    >
+      {true && (
+        <Badge className="absolute -top-2 -right-2 bg-primary">Popular</Badge>
+      )}
+      <CardHeader>
+        {/* <Link
+          href={`/memberships/${membership.id}`}
+          className="flex justify-between items-start min-h-20"
+        > */}
+        <div>
+          <CardTitle className="text-lg line-clamp-2">
+            {membership.name}
+          </CardTitle>
+          <CardDescription>{membership.library.name}</CardDescription>
+        </div>
+        {/* </Link> */}
+      </CardHeader>
+      <CardContent className="space-y-3">
+        <div className="flex items-center gap-2 text-sm">
+          <Calendar className="size-4 text-muted-foreground" />
+          <span>
+            Duration: {membership.duration} Days{' '}
+            {membership.usage_limit > 0
+              ? ` - ${membership.usage_limit} Books`
+              : ''}
+          </span>
+        </div>
+        <div className="flex items-center gap-2 text-sm">
+          <Book className="size-4 text-muted-foreground" />
+          <span>Up to {membership.active_loan_limit} Books a time</span>
+        </div>
+        <div className="flex items-center gap-2 text-sm">
+          <Clock className="size-4 text-muted-foreground" />
+          <span>Borrow for {membership.loan_period} Days</span>
+        </div>
+        <div className="flex items-center gap-2 text-sm">
+          <Gavel className="size-4 text-muted-foreground" />
+          <span>
+            Late Return Fine: {membership.fine_per_day ?? '-'} Pts/day
+          </span>
+        </div>
+        <div className="flex items-center gap-2 text-sm">
+          <CircleDollarSign className="size-4 text-muted-foreground" />
+          <span>Price: {membership.price ?? '-'} Pts</span>
+        </div>
+      </CardContent>
+      <CardFooter>
+        {/* <BtnReturnBook variant="outline" className="w-full" borrow={borrow}>
+          Return Book
+        </BtnReturnBook> */}
+      </CardFooter>
+    </Card>
+  )
+}