Files
web/components/MyPages/Blocks/Points/EarnAndBurn/TransactionTable/index.tsx

35 lines
927 B
TypeScript

"use client"
import { useState } from "react"
import DesktopTable from "./Desktop"
import MobileTable from "./Mobile"
import { TableProps } from "@/types/components/myPages/myPage/earnAndBurn"
export function TransactionTable({ transactions }: TableProps) {
const [transactionDisplayCount, setTransactionDisplayCount] = useState(5)
const showMoreTransactions = () => {
setTransactionDisplayCount((count) => count + 5)
}
const displayedTransactions = transactions.slice(0, transactionDisplayCount)
const hasMoreTransactions = transactions.length > transactionDisplayCount
return (
<>
<MobileTable
transactions={displayedTransactions}
showMore={showMoreTransactions}
hasMore={hasMoreTransactions}
/>
<DesktopTable
transactions={displayedTransactions}
showMore={showMoreTransactions}
hasMore={hasMoreTransactions}
/>
</>
)
}