From 55a61a4d569895e20231b092eb4f4f462868343c Mon Sep 17 00:00:00 2001
From: TwilightLogic <twilightlogic@gmail.com>
Date: Fri, 19 Apr 2024 14:31:14 +0800
Subject: [PATCH] feat: add pagination logic and component

---
 .../assets-details/tabs/coin/assets-coin.tsx  | 157 +++++++++++-------
 1 file changed, 98 insertions(+), 59 deletions(-)

diff --git a/rooch-portal-v1/src/pages/assets/assets-details/tabs/coin/assets-coin.tsx b/rooch-portal-v1/src/pages/assets/assets-details/tabs/coin/assets-coin.tsx
index 75fa68d104..188bb45091 100644
--- a/rooch-portal-v1/src/pages/assets/assets-details/tabs/coin/assets-coin.tsx
+++ b/rooch-portal-v1/src/pages/assets/assets-details/tabs/coin/assets-coin.tsx
@@ -2,7 +2,6 @@ import {
   Table,
   TableBody,
   TableCell,
-  TableFooter,
   TableHead,
   TableHeader,
   TableRow,
@@ -17,10 +16,19 @@ import {
   DropdownMenuShortcut,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from '@/components/ui/pagination'
 import { NoData } from '@/components/no-data'
 import { Button } from '@/components/ui/button'
 
 import { GripVerticalIcon } from 'lucide-react'
+import { useState } from 'react'
 
 interface Coin {
   coin: string
@@ -29,19 +37,25 @@ interface Coin {
 }
 
 const coins: Coin[] = [
-  // {
-  //   coin: 'ROOCH',
-  //   balance: 288.88,
-  //   value: '$1,146.98',
-  // },
-  {
-    coin: '',
-    balance: 0,
-    value: '',
-  },
+  { coin: 'ROOCH', balance: 288.88, value: '$1,146.98' },
+  { coin: 'BTC', balance: 2.5, value: '$95,000.00' },
+  { coin: 'ETH', balance: 10, value: '$30,000.00' },
+  { coin: 'LTC', balance: 100, value: '$10,000.00' },
+  { coin: 'XRP', balance: 2000, value: '$1,200.00' },
+  { coin: 'DOGE', balance: 15000, value: '$4,500.00' },
 ]
 
 export const AssetsCoin = () => {
+  const [currentPage, setCurrentPage] = useState(0)
+  const itemsPerPage = 5
+
+  const pageCount = Math.ceil(coins.length / itemsPerPage)
+  const currentItems = coins.slice(currentPage * itemsPerPage, (currentPage + 1) * itemsPerPage)
+
+  const handlePageChange = (selectedPage: number) => {
+    setCurrentPage(selectedPage)
+  }
+
   const hasValidData = (coins: Coin[]): boolean => {
     return coins.some((coin) => coin.coin.trim() !== '' && coin.balance !== 0)
   }
@@ -51,55 +65,80 @@ export const AssetsCoin = () => {
   }
 
   return (
-    <div className="rounded-lg border overflow-hidden">
-      <Table>
-        <TableHeader>
-          <TableRow>
-            <TableHead className="w-[120px]">Asset</TableHead>
-            <TableHead>Balance</TableHead>
-            <TableHead>Value</TableHead>
-            <TableHead className="text-right">Action</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {coins.map((coin) => (
-            <TableRow key={coin.coin}>
-              <TableCell className="font-medium">{coin.coin}</TableCell>
-              <TableCell>{coin.balance}</TableCell>
-              <TableCell>{coin.value}</TableCell>
-              <TableCell className="text-right">
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button size="icon" variant="ghost" className="hover:rounded-lg">
-                      <GripVerticalIcon className="w-5 h-5" />
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent className="w-56">
-                    <DropdownMenuLabel>Action</DropdownMenuLabel>
-                    <DropdownMenuSeparator />
-                    <DropdownMenuGroup>
-                      <DropdownMenuItem onClick={() => {}}>
-                        Transfer
-                        <DropdownMenuShortcut>⇧⌘F</DropdownMenuShortcut>
-                      </DropdownMenuItem>
-                      <DropdownMenuItem onClick={() => {}}>
-                        Swap
-                        <DropdownMenuShortcut>⇧⌘S</DropdownMenuShortcut>
-                      </DropdownMenuItem>
-                    </DropdownMenuGroup>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </TableCell>
+    <>
+      <div className="rounded-lg border overflow-hidden w-full">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-[120px]">Asset</TableHead>
+              <TableHead>Balance</TableHead>
+              <TableHead>Value</TableHead>
+              <TableHead className="text-right">Action</TableHead>
             </TableRow>
+          </TableHeader>
+          <TableBody>
+            {currentItems.map((coin) => (
+              <TableRow key={coin.coin}>
+                <TableCell className="font-medium">{coin.coin}</TableCell>
+                <TableCell>{coin.balance}</TableCell>
+                <TableCell>{coin.value}</TableCell>
+                <TableCell className="text-right">
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button size="icon" variant="ghost" className="hover:rounded-lg">
+                        <GripVerticalIcon className="w-5 h-5" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent className="w-56">
+                      <DropdownMenuLabel>Action</DropdownMenuLabel>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuGroup>
+                        <DropdownMenuItem onClick={() => {}}>
+                          Transfer
+                          <DropdownMenuShortcut>⇧⌘F</DropdownMenuShortcut>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem onClick={() => {}}>
+                          Swap
+                          <DropdownMenuShortcut>⇧⌘S</DropdownMenuShortcut>
+                        </DropdownMenuItem>
+                      </DropdownMenuGroup>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+      <Pagination className="justify-end mt-4">
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationPrevious
+              href="#"
+              onClick={() => handlePageChange(Math.max(0, currentPage - 1))}
+            />
+          </PaginationItem>
+          {Array.from({ length: pageCount }, (_, index) => (
+            <PaginationItem key={index}>
+              <PaginationLink
+                href="#"
+                onClick={() => handlePageChange(index)}
+                isActive={index === currentPage}
+              >
+                {index + 1}
+              </PaginationLink>
+            </PaginationItem>
           ))}
-        </TableBody>
-        <TableFooter>
-          <TableRow>
-            <TableCell colSpan={3}>Total</TableCell>
-            <TableCell className="text-right">$25,000.00</TableCell>
-          </TableRow>
-        </TableFooter>
-      </Table>
-    </div>
+          {currentPage < pageCount - 1 && (
+            <PaginationItem>
+              <PaginationNext
+                href="#"
+                onClick={() => handlePageChange(Math.min(pageCount - 1, currentPage + 1))}
+              />
+            </PaginationItem>
+          )}
+        </PaginationContent>
+      </Pagination>
+    </>
   )
 }