- 2,856.41
- 0D673a4...2
- 1.17%
- 14.19%
- 30 days
- 2,891.75
-
-
+
+ {tableData.loanValue.toLocaleString("en-us")}
+ {tableData.lender}
+ {tableData.interest}%
+ {tableData.apr}%
+ {tableData.duration}
+ {tableData.repayment.toLocaleString("en-us")}
+
+ handleClick(tableData) } className="bg-[#8b5cf6] hover:bg-[#7c3aed] text-white px-4 py-1 rounded-full text-xs font-medium">
Accept
diff --git a/dapp/src/app/view-listed-asset/component/LoanTable.tsx b/dapp/src/app/view-listed-asset/component/LoanTable.tsx
index 045a31d..f9c5ece 100644
--- a/dapp/src/app/view-listed-asset/component/LoanTable.tsx
+++ b/dapp/src/app/view-listed-asset/component/LoanTable.tsx
@@ -1,31 +1,110 @@
+import React, { useState } from 'react';
import FilterBar from './FilterBar';
import LoanRow from './LoanRow';
+import { tableData } from '../data';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { tableDataProps } from '@/utils/interface';
+
+interface LoanTableProps {
+ setOpenModal: React.Dispatch>;
+ setSelectedNFT: React.Dispatch>
+
+}
+
+export default function LoanTable({ setOpenModal, setSelectedNFT }: LoanTableProps) {
+ const [currentPage, setCurrentPage] = useState(1);
+ const itemsPerPage = 6;
+
+ const totalPages = Math.ceil(tableData.length / itemsPerPage);
+
+ const startIndex = (currentPage - 1) * itemsPerPage;
+ const endIndex = currentPage * itemsPerPage;
+
+ const handlePrev = () => {
+ if (currentPage > 1) {
+ setCurrentPage((prev) => prev - 1);
+ }
+ };
+
+ const handleNext = () => {
+ if (currentPage < totalPages) {
+ setCurrentPage((prev) => prev + 1);
+ }
+ };
+
+ const pages = Array.from({ length: totalPages }, (_, i) => i + 1);
+
+
+
-export default function LoanTable() {
return (
-
+
+
-
- Loan value
- Lender
- Interest
- APR
- Duration
- Repayment
- Action
+
+ Loan value
+ Lender
+ Interest
+ APR
+ Duration
+ Repayment
+ Action
- {[...Array(6)].map((_, i) => (
-
-
- Showing 1 to 6 of 13 items
+
+
+
+ Showing {startIndex + 1} to{' '}
+ {endIndex > tableData.length ? tableData.length : endIndex} of{' '}
+ {tableData.length} items
+
+
+
+
+
+
+
+ {pages.map((page) => (
+ setCurrentPage(page)}
+ className={`px-2.5 py-1.5 rounded cursor-pointer text-sm ${currentPage === page
+ ? 'bg-[#DEDEDE] text-black'
+ : 'text-[#707070] '
+ }`}
+ >
+ {page}
+
+ ))}
+
+
+
= totalPages}
+ className="p-2 disabled:opacity-30"
+ >
+
+
diff --git a/dapp/src/app/view-listed-asset/data.ts b/dapp/src/app/view-listed-asset/data.ts
new file mode 100644
index 0000000..c902cc0
--- /dev/null
+++ b/dapp/src/app/view-listed-asset/data.ts
@@ -0,0 +1,164 @@
+import { tableDataProps } from "@/utils/interface";
+
+export const tableData: tableDataProps[] = [
+ {
+ loanValue: 2856.41,
+ lender: "09b73a42",
+ interest: 1.17,
+ apr: 14.18,
+ duration: "30 days",
+ repayment: 2891.75
+ },
+ {
+ loanValue: 3200.00,
+ lender: "a8e13c29",
+ interest: 1.25,
+ apr: 15.00,
+ duration: "60 days",
+ repayment: 3280.00
+ },
+ {
+ loanValue: 1500.50,
+ lender: "1f63ac84",
+ interest: 0.95,
+ apr: 11.40,
+ duration: "15 days",
+ repayment: 1514.75
+ },
+ {
+ loanValue: 4000.00,
+ lender: "72ce49a1",
+ interest: 2.00,
+ apr: 18.25,
+ duration: "90 days",
+ repayment: 4080.00
+ },
+ {
+ loanValue: 2100.75,
+ lender: "5a3f902c",
+ interest: 1.10,
+ apr: 13.20,
+ duration: "45 days",
+ repayment: 2123.86
+ },
+ {
+ loanValue: 500.00,
+ lender: "d21b3a97",
+ interest: 0.50,
+ apr: 10.00,
+ duration: "7 days",
+ repayment: 502.50
+ },
+ {
+ loanValue: 10000.00,
+ lender: "34df2c10",
+ interest: 3.00,
+ apr: 20.00,
+ duration: "120 days",
+ repayment: 10300.00
+ },
+ {
+ loanValue: 6750.40,
+ lender: "6f48213b",
+ interest: 1.75,
+ apr: 16.00,
+ duration: "60 days",
+ repayment: 6868.51
+ },
+ {
+ loanValue: 950.90,
+ lender: "b89103d2",
+ interest: 0.80,
+ apr: 12.50,
+ duration: "20 days",
+ repayment: 958.50
+ },
+ {
+ loanValue: 3800.00,
+ lender: "29cf3b76",
+ interest: 1.50,
+ apr: 15.75,
+ duration: "75 days",
+ repayment: 3857.00
+ },
+ {
+ loanValue: 2750.25,
+ lender: "aa23cd34",
+ interest: 1.40,
+ apr: 13.85,
+ duration: "30 days",
+ repayment: 2788.76
+ },
+ {
+ loanValue: 1800.00,
+ lender: "cf14ba88",
+ interest: 1.20,
+ apr: 14.50,
+ duration: "25 days",
+ repayment: 1821.60
+ },
+ {
+ loanValue: 7400.00,
+ lender: "de009344",
+ interest: 2.25,
+ apr: 19.00,
+ duration: "90 days",
+ repayment: 7566.50
+ },
+ {
+ loanValue: 600.00,
+ lender: "f3b7e2a9",
+ interest: 0.60,
+ apr: 9.50,
+ duration: "10 days",
+ repayment: 603.60
+ },
+ {
+ loanValue: 8300.80,
+ lender: "81c42a33",
+ interest: 2.10,
+ apr: 17.85,
+ duration: "100 days",
+ repayment: 8475.11
+ },
+ {
+ loanValue: 250.00,
+ lender: "112fe674",
+ interest: 0.25,
+ apr: 8.00,
+ duration: "5 days",
+ repayment: 250.63
+ },
+ {
+ loanValue: 1225.60,
+ lender: "e7a9fbd0",
+ interest: 0.85,
+ apr: 11.00,
+ duration: "14 days",
+ repayment: 1236.01
+ },
+ {
+ loanValue: 4700.00,
+ lender: "90dbba21",
+ interest: 1.65,
+ apr: 14.70,
+ duration: "50 days",
+ repayment: 4777.55
+ },
+ {
+ loanValue: 3500.00,
+ lender: "7c4e5a20",
+ interest: 1.30,
+ apr: 13.90,
+ duration: "40 days",
+ repayment: 3545.50
+ },
+ {
+ loanValue: 2980.00,
+ lender: "a21fbc09",
+ interest: 1.15,
+ apr: 13.50,
+ duration: "35 days",
+ repayment: 3014.27
+ }
+];
diff --git a/dapp/src/app/view-listed-asset/page.tsx b/dapp/src/app/view-listed-asset/page.tsx
index 0a40202..673618a 100644
--- a/dapp/src/app/view-listed-asset/page.tsx
+++ b/dapp/src/app/view-listed-asset/page.tsx
@@ -1,21 +1,46 @@
-import React from 'react';
+"use client"
+
+
+
+import React, { useEffect, useState } from 'react';
import ListingInfo from './component/ListingInfo';
import LoanTable from './component/LoanTable';
+import Image from 'next/image';
+import AcceptOfferComponent from './component/AcceptOfferComponent';
+import { useRouter } from 'next/navigation';
+import { tableDataProps } from '@/utils/interface';
+
const Page = () => {
+const [openModal, setOpenModal] = useState
(false)
+const router = useRouter()
+const [selectedNFT, setSelectedNFT] = useState(null)
+
+
+useEffect(() => {
+
+ document.body.style.overflowY = openModal ? "hidden" : "auto"
+
+
+}, [openModal])
+
+
+
+
return (
-
-
- {'<'} Go Back
+
+
router.back()} className=" text-sm font-medium mb-6 flex items-center gap-4 ">
+
);
};
diff --git a/dapp/src/utils/interface.ts b/dapp/src/utils/interface.ts
new file mode 100644
index 0000000..47a2647
--- /dev/null
+++ b/dapp/src/utils/interface.ts
@@ -0,0 +1,11 @@
+
+
+
+export interface tableDataProps {
+loanValue: number;
+lender: string;
+interest: number;
+apr: number;
+duration: string;
+repayment: number;
+}
\ No newline at end of file
diff --git a/dapp/tailwind.config.ts b/dapp/tailwind.config.ts
index 95de64d..570af2d 100644
--- a/dapp/tailwind.config.ts
+++ b/dapp/tailwind.config.ts
@@ -23,6 +23,9 @@ export default {
backgroundImage: {
'page-bg': "url('/images/bg-image.png')",
},
+ fontFamily: {
+ oxanium: ["var(--font-oxanium)"]
+ }
},
},
plugins: [],