feat: create view_listed_assets ui #21
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
|
|
||
|
|
||
| export default function FilterBar() { | ||
| return ( | ||
| <div className="flex flex-wrap w-[770px] h-[18px] items-center gap-[8px]"> | ||
| <p className="w-[35px] h-[15px] font-oxanium font-bold text-[12px] leading-[100%] tracking-[0%] text-center ">filter:</p> | ||
| <button className="flex gap-4 bg-[#080A1F] w-[89px] h-[32px] px-[14px] py-[8px] rounded-[8px] border border-[#1C1F3F] text-sm text-white items-center"> | ||
| % <span className='text-[#8080808C] gap-8 '>8 x</span> | ||
| </button> | ||
| <button className="bg-[#080A1F] w-[89px] h-[32px] gap-2 flex items-center px-[14px] py-[8px] rounded-[8px] border border-[#1C1F3F] text-sm text-white">30days | ||
| <span className='text-[#8080808C]'> x</span> | ||
| </button> | ||
| <button className="bg-[#080A1F] w-[89px] h-[32px] gap-2 flex items-center px-[14px] py-[8px] rounded-[8px] border border-[#1C1F3F] text-sm text-white">USDC | ||
| <span className='text-[#8080808C]'>v</span> | ||
| </button> | ||
| <div className="ml-auto flex gap-2"> | ||
| <button className="bg-[#191919] px-3 py-1 rounded text-white text-sm">📊 Grid</button> | ||
| <button className="bg-[#0D0D0D] px-3 py-1 rounded text-white text-sm">📋 List</button> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| import Image from "next/image"; | ||
| import Punk from "@/assets/punk.png"; | ||
| import Net from "@/assets/net.png"; | ||
| import Reload from "@/assets/reload.png"; | ||
| import Angle from "@/assets/angle.png"; | ||
|
|
||
| export default function ListingInfo() { | ||
| return ( | ||
| <div className="bg-[##121428] border border-[#1C1F3F] rounded-[16px] p-[16px] w-[310px] h-[543px] gap-[24px] text-white font-sans flex flex-col"> | ||
| <div className="flex justify-between items-center w-[278px] h-[20px] mr-[12px] mb-4"> | ||
| <h3 className="w-[195.33px] h-[20px] font-[Oxanium] font-semibold text-base leading-none tracking-normal bg [#B2B3BA] ">Listing Information</h3> | ||
| <div className="flex gap-[5.33px] w-[70.67px] h-[20px] "> | ||
| <Image src={Net} alt="network" width={20} height={20} /> | ||
| <Image src={Angle} alt="angle" width={20} height={20} /> | ||
| <Image src={Reload} alt="reload" width={20} height={20} /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="relative w-[277px] h-[1432px] aspect-[4/3] overflow-hidden rounded-lg mb-4"> | ||
| <Image | ||
| src={Punk} | ||
| alt="CryptoPunk" | ||
| fill | ||
| className="w-[277px] h-[240px] object-cover rounded-[9.55px]" | ||
| /> | ||
| <div className="absolute bottom-0 left-0 w-[278px] h[219px] gap-[20px] bg-gradient-to-t from-black/80 to-transparent p-4 flex justify-between items-end"> | ||
| <div> | ||
| <h2 className="text-base font-semibold">Cryptopunk #1232</h2> | ||
| <p className="text-sm text-gray-300">Cryptopunk VQ (STRK)</p> | ||
| </div> | ||
| <span className="bg-[#182A32] text-[#42CC7E] text-xs px-3 py-1 rounded-full"> | ||
| Listed | ||
| </span> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="w-[278px] h-[219px] gap-[20px] bg-[#1c1c2b] "> | ||
| <div className="w-[278px] h-[159px] gap-[16px] "> | ||
| <div className="w-[278px] h-[128px] bg-[#080A1F] text-[12px] rounded-[12px] p-[16px] gap-[12px]"> | ||
| <div className="flex justify-between"> | ||
| <span className="text-gray-300">Currency</span> | ||
| <span className="text-white">All</span> | ||
| </div> | ||
| <div className="flex justify-between "> | ||
| <span className="text-gray-300">Acceptable Amount</span> | ||
| <span className="font-medium">0.001 STRK</span> | ||
| </div> | ||
| <div className="flex justify-between"> | ||
| <span className="text-gray-300">Loan Duration</span> | ||
| <span className="font-medium">14 days</span> | ||
| </div> | ||
| <div className="flex justify-between"> | ||
| <span className="text-gray-300">APR</span> | ||
| <span className="font-medium">8%</span> | ||
| </div> | ||
| </div> | ||
|
|
||
| <p className="flex w-[203px] h-[15px] text-[#8D8E98] font-oxanium font-medium text-[12px] leading-[100%] tracking-[0%] items-center mt-2 ml-8"> | ||
| You can unlist your item at any time. | ||
| </p> | ||
| </div> | ||
| <div className="w-[278px] h-[40px] flex gap-[12px]"> | ||
| <button className="flex-1 items-center w-[133px] h-[40px] rounded-[12px] border border-[#8358FF] text-[#8358FF] py-[12px] px-[24px] font-satoshi font-medium text-[11px] leading-[100%] tracking-[0%]"> | ||
| Remove Listing | ||
| </button> | ||
| <button className="flex-1 items-center w-[133px] h-[40px] rounded-[12px] border border-[#8358FF] bg-[#8358FF] text-[#FFFFFF] py-[12px] px-[24px] font-satoshi font-medium text-[11px] leading-[100%] tracking-[0%]"> | ||
| Update Listing | ||
| </button> | ||
| </div> | ||
| </div> | ||
|
|
||
|
|
||
| </div> | ||
| ); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| export default function LoanRow() { | ||
| return ( | ||
| <tr className="border-b border-gray-700 hover:bg-[#2a2a3d] transition"> | ||
| <td className="py-4 px-4">2,856.41</td> | ||
| <td className="py-4 px-4">0D673a4...2</td> | ||
| <td className="py-4 px-4">1.17%</td> | ||
| <td className="py-4 px-4">14.19%</td> | ||
| <td className="py-4 px-4">30 days</td> | ||
| <td className="py-4 px-4">2,891.75</td> | ||
| <td className="py-4 px-4"> | ||
| <button className="bg-[#8b5cf6] hover:bg-[#7c3aed] text-white px-4 py-1 rounded-full text-xs font-medium"> | ||
| Accept | ||
| </button> | ||
| </td> | ||
| </tr> | ||
| ); | ||
| } |
|
Collaborator
There was a problem hiding this comment. This just looks wrong! nothing like the actual design
Collaborator
There was a problem hiding this comment. What about pagination? |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import FilterBar from './FilterBar'; | ||
| import LoanRow from './LoanRow'; | ||
| import Pagination from './Pagination'; | ||
|
|
||
| export default function LoanTable() { | ||
| return ( | ||
| <div className="w-full overflow-x-auto"> | ||
| <div className="w-[802px] h-[543px] bg-[#121428] rounded-[16px] border border-[#1C1F3F] p-[16px] gap-[16px]"> | ||
| <FilterBar /> | ||
| <div className="overflow-x-auto mt-6 flex-1"> | ||
| <table className="min-w-full text-sm text-left text-white"> | ||
| <thead className="text-gray-400 border-b border-gray-600"> | ||
| <tr className="uppercase text-xs"> | ||
| <th className="py-8 px-4">Loan value</th> | ||
| <th className="py-8 px-4">Lender</th> | ||
| <th className="py-8 px-4">Interest</th> | ||
| <th className="py-8 px-4">APR</th> | ||
| <th className="py-8 px-4">Duration</th> | ||
| <th className="py-8 px-4">Repayment</th> | ||
| <th className="py-8 px-4">Action</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| {[...Array(6)].map((_, i) => ( | ||
| <LoanRow key={i} /> | ||
| ))} | ||
| </tbody> | ||
| </table> | ||
|
|
||
| <Pagination /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import React from "react"; | ||
|
|
||
| const Pagination = () => { | ||
| return ( | ||
| <div className=" text-gray-400 px-4 py-3 rounded flex items-center gap-4 ml-[150px] w-fit"> | ||
| <span className="text-sm"> | ||
| Showing <span className="text-white">1 to 06</span> of{" "} | ||
| <span className="text-white">3</span> items | ||
| </span> | ||
| <div className="flex items-center gap-2"> | ||
| <button className="text-white text-sm px-2"><</button> | ||
|
|
||
| <button className="bg-white text-black font-semibold rounded-xl px-2.5 py-1 text-sm"> | ||
| 1 | ||
| </button> | ||
| <button className="text-white text-sm px-2.5 py-1">2</button> | ||
| <button className="text-white text-sm px-2.5 py-1">3</button> | ||
|
|
||
| <button className="text-white text-sm px-2">></button> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default Pagination; |
|
Collaborator
There was a problem hiding this comment. Go back button doesn't match what's in figma |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import React from 'react'; | ||
| import Image from 'next/image'; | ||
| import Back from '@/assets/back.png'; | ||
| import ListingInfo from './component/ListingInfo'; | ||
| import LoanTable from './component/LoanTable'; | ||
|
|
||
| const Page = () => { | ||
| return ( | ||
| <div className="min-h-screen w-full bg-[#0f0f20] text-white font-sans p-4 sm:p-6"> | ||
| <div className="max-w-[1136px] mx-auto"> | ||
| <button className="w-[104px] h-[24px] flex items-center gap-[12px] text-[#6c63ff] text-sm font-medium mb-6 hover:underline"> | ||
| <Image src={Back} alt="" /> | ||
| <span className="w-full h-[23px] text-[#F3EEFF] font-oxanium font-semibold text-[18px] leading-[100%] tracking-[0%]"> | ||
| Go Back | ||
| </span> | ||
| </button> | ||
|
|
||
| <div className="flex flex-col lg:flex-row gap-6 overflow-x-auto"> | ||
| <div className="w-full lg:w-auto"> | ||
| <ListingInfo /> | ||
| </div> | ||
|
|
||
| <div className="w-full overflow-x-auto lg:w-auto"> | ||
| <LoanTable /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default Page; |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
|
Collaborator
There was a problem hiding this comment. Filter mechanism don't actually work and is just hardcoded |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| export default function FilterBar() { | ||
| return ( | ||
| <div className="flex flex-wrap items-center gap-2"> | ||
| <p>filter:</p> | ||
| <div className="flex gap-1"> | ||
| <button className="bg-[#080A1F] w-[89px] h-[32px] px-[14px] py-[8px] rounded-[8px] border border-[#1C1F3F] text-sm text-white "> 8% ✖</button> | ||
| <button className="bg-[#080A1F] w-[89px] h-[32px] px-[14px] py-[8px] rounded-[8px] border border-[#1C1F3F] text-sm text-white">30days </button> | ||
| <button className="bg-[#080A1F] w-[89px] h-[32px] px-[14px] py-[8px] rounded-[8px] border border-[#1C1F3F] text-sm text-white">USDC</button> | ||
| </div> | ||
| <div className="ml-auto flex gap-2"> | ||
| <button className="bg-[#191919] px-3 py-1 rounded text-white text-sm">📊 Grid</button> | ||
| <button className="bg-[#0D0D0D] px-3 py-1 rounded text-white text-sm">📋 List</button> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
|
Collaborator
There was a problem hiding this comment. Text colors or text size don't match at all |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| import Image from "next/image"; | ||
| import Punk from "@/assets/punk.png"; | ||
| import Net from "@/assets/net.png"; | ||
| import Reload from "@/assets/reload.png"; | ||
| import Angle from "@/assets/angle.png"; | ||
|
|
||
| export default function ListingInfo() { | ||
| return ( | ||
| <div className="bg-[#1a1a2e] rounded-xl p-4 w-full md:flex-1 text-white font-sans flex flex-col"> | ||
| <div className="flex justify-between items-center mb-4"> | ||
| <h3 className="text-sm font-semibold">Listing Information</h3> | ||
| <div className="flex gap-2"> | ||
| <Image src={Net} alt="network" width={22} height={22} /> | ||
| <Image src={Angle} alt="angle" width={22} height={22} /> | ||
| <Image src={Reload} alt="reload" width={22} height={22} /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="relative w-full aspect-[4/3] overflow-hidden rounded-lg mb-4"> | ||
| <Image | ||
| src={Punk} | ||
| alt="CryptoPunk" | ||
| fill | ||
| className="object-cover rounded-lg" | ||
| /> | ||
| <div className="absolute bottom-0 left-0 w-full bg-gradient-to-t from-black/80 to-transparent p-4 flex justify-between items-end"> | ||
| <div> | ||
| <h2 className="text-base font-semibold">Cryptopunk #1232</h2> | ||
| <p className="text-sm text-gray-300">Cryptopunk VQ (STRK)</p> | ||
| </div> | ||
| <span className="bg-[#182A32] text-[#42CC7E] text-xs px-3 py-1 rounded-full"> | ||
| Listed | ||
| </span> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="bg-[#1c1c2b] p-3 rounded-lg text-sm space-y-2"> | ||
| <div className="flex justify-between"> | ||
| <span className="text-gray-400">Currency</span> | ||
| <span className="text-white">All</span> | ||
| </div> | ||
| <div className="flex justify-between"> | ||
| <span className="text-gray-400">Acceptable Amount</span> | ||
| <span className="font-medium">0.001 STRK</span> | ||
| </div> | ||
| <div className="flex justify-between"> | ||
| <span className="text-gray-400">Loan Duration</span> | ||
| <span className="font-medium">14 days</span> | ||
| </div> | ||
| <div className="flex justify-between"> | ||
| <span className="text-gray-400">APR</span> | ||
| <span className="font-medium">8%</span> | ||
| </div> | ||
| </div> | ||
|
|
||
| <p className="text-center text-gray-400 text-xs mt-3"> | ||
| You can unlist your item at any time. | ||
| </p> | ||
|
|
||
| <div className="flex gap-2 mt-4"> | ||
| <button className="flex-1 bg-[#343456] hover:bg-red-600 transition-all px-4 py-2 rounded-lg text-sm border border-[#8358FF] text-[#8358FF]"> | ||
| Remove Listing | ||
| </button> | ||
| <button className="flex-1 bg-[#8a4dff] hover:bg-purple-700 transition-all px-4 py-2 rounded-lg text-sm text-white"> | ||
| Update Listing | ||
| </button> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| export default function LoanRow() { | ||
| return ( | ||
| <tr className="border-b border-gray-700 hover:bg-[#2a2a3d] transition"> | ||
| <td className="py-2 px-4">2,856.41</td> | ||
| <td className="py-2 px-4">0D673a4...2</td> | ||
| <td className="py-2 px-4">1.17%</td> | ||
| <td className="py-2 px-4">14.19%</td> | ||
| <td className="py-2 px-4">30 days</td> | ||
| <td className="py-2 px-4">2,891.75</td> | ||
| <td className="py-2 px-4"> | ||
| <button className="bg-[#8b5cf6] hover:bg-[#7c3aed] text-white px-4 py-1 rounded-full text-xs font-medium"> | ||
| Accept | ||
| </button> | ||
| </td> | ||
| </tr> | ||
| ); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import FilterBar from './FilterBar'; | ||
| import LoanRow from './LoanRow'; | ||
|
|
||
| export default function LoanTable() { | ||
| return ( | ||
| <div className="bg-[#1a1a2e] rounded-xl px-10 py-12 w-full md:flex-1 h-full flex flex-col"> | ||
| <FilterBar /> | ||
| <div className="overflow-x-auto mt-6 flex-1"> | ||
| <table className="min-w-full text-sm text-left text-white"> | ||
| <thead className="text-gray-400 border-b border-gray-600"> | ||
| <tr className="uppercase text-xs"> | ||
| <th className="py-8 px-4">Loan value</th> | ||
| <th className="py-8 px-4">Lender</th> | ||
| <th className="py-8 px-4">Interest</th> | ||
| <th className="py-8 px-4">APR</th> | ||
| <th className="py-8 px-4">Duration</th> | ||
| <th className="py-8 px-4">Repayment</th> | ||
| <th className="py-8 px-4">Action</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| {[...Array(6)].map((_, i) => ( | ||
| <LoanRow key={i} /> | ||
| ))} | ||
| </tbody> | ||
| </table> | ||
| <div className="text-center text-gray-500 text-xs mt-6"> | ||
| Showing 1 to 6 of 13 items | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import React from 'react'; | ||
| import ListingInfo from './component/ListingInfo'; | ||
| import LoanTable from './component/LoanTable'; | ||
|
|
||
| const Page = () => { | ||
| return ( | ||
| <div className="min-h-screen bg-[#0f0f20] text-white font-sans p-6"> | ||
| <button className="text-[#6c63ff] text-sm font-medium mb-6 hover:underline"> | ||
| {'<'} Go Back | ||
| </button> | ||
|
|
||
| <div className="flex flex-col lg:flex-row gap-6"> | ||
| <ListingInfo /> | ||
|
|
||
| <div className="w-full lg:w-2/3 bg-[#1a1a2e] rounded-2xl p-5 shadow-lg"> | ||
| <LoanTable /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default Page; |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks nothing like the actual design