Skip to content

Commit b8d2fd6

Browse files
DioChuksDioChuks
authored
Merge pull request #139 from Jayrodri088/feat-121-NFT-Collections-responsivness
Edit NFTs and collection mobile responsiveness to match Figma design
2 parents 22e4889 + c286c12 commit b8d2fd6

File tree

6 files changed

+438
-166
lines changed

6 files changed

+438
-166
lines changed

‎components/collections/collectionfilter.tsx‎

Lines changed: 203 additions & 72 deletions
Large diffs are not rendered by default.

‎components/collections/collections.tsx‎

Lines changed: 32 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
"use client";
22
import { useState } from "react";
33
import Image from "next/image";
4+
import { ArrowRight } from "lucide-react";
45
import { collectionsData } from "@/lib/collections-data";
56

67
interface CollectionsPageProps {
@@ -44,62 +45,62 @@ export default function CollectionsPage({ activeTab, searchQuery, blockchain }:
4445

4546
return (
4647
<div className="bg-black text-white min-h-screen">
47-
<div className="py-8">
48+
<div className="py-4 md:py-8">
4849
<div className="w-full overflow-x-auto">
49-
<table className="w-full lg:w-full md:w-[1000px] sm:w-[800px] border-collapse">
50+
<table className="w-full min-w-[800px] border-collapse">
5051
<thead>
5152
<tr className="text-gray-400 border-b border-gray-700">
52-
<th className="py-3 text-left px-3 w-16 sticky left-0 bg-black z-30">#</th>
53-
<th className="py-3 sticky text-left bg-black z-30">
53+
<th className="py-2 md:py-3 text-left px-2 md:px-3 w-12 md:w-16 sticky left-0 bg-black z-30 text-xs md:text-sm">#</th>
54+
<th className="py-2 md:py-3 sticky text-left bg-black z-30 min-w-[200px] md:min-w-[250px] text-xs md:text-sm">
5455
COLLECTION
5556
</th>
56-
<th className="py-3 text-left whitespace-nowrap">COLLECTION ID</th>
57-
<th className="py-3 text-left whitespace-nowrap">FLOOR PRICE</th>
58-
<th className="py-3 text-left whitespace-nowrap">VOLUME</th>
59-
<th className="py-3 text-left whitespace-nowrap">SALES</th>
60-
<th className="py-3 text-left whitespace-nowrap">TOP OFFER</th>
61-
<th className="py-3 text-right pr-4 whitespace-nowrap">HOLDERS</th>
57+
58+
<th className="py-2 md:py-3 text-left whitespace-nowrap min-w-[90px] text-xs md:text-sm">FLOOR PRICE</th>
59+
<th className="py-2 md:py-3 text-left whitespace-nowrap min-w-[80px] text-xs md:text-sm">VOLUME</th>
60+
<th className="py-2 md:py-3 text-left whitespace-nowrap min-w-[70px] text-xs md:text-sm">SALES</th>
61+
<th className="py-2 md:py-3 text-left whitespace-nowrap min-w-[90px] text-xs md:text-sm">TOP OFFER</th>
62+
<th className="py-2 md:py-3 text-right pr-2 md:pr-4 whitespace-nowrap min-w-[80px] text-xs md:text-sm">HOLDERS</th>
6263
</tr>
6364
</thead>
6465
<tbody>
6566
{visibleCollections.map((collection) => (
66-
<tr key={collection.id} className="border-b border-gray-800 hover:bg-gray-900 group ">
67-
<td className="py-4 pl-4 sticky left-0 bg-black z-50 group-hover:bg-gray-900 group-hover:z-40 min-w-[100px] sm:w-[150px]">{collection.id}</td>
68-
<td className="py-4 sticky bg-black z-30 min-w-[300px] sm:w-[150px] group-hover:bg-gray-900 group-hover:z-40">
69-
<div className="flex gap-3 items-center">
70-
<div className="relative w-10 h-10">
67+
<tr key={collection.id} className="border-b border-gray-800 hover:bg-gray-900 group">
68+
<td className="py-3 md:py-4 pl-2 md:pl-4 sticky left-0 bg-black z-50 group-hover:bg-gray-900 group-hover:z-40 text-xs md:text-sm">{collection.id}</td>
69+
<td className="py-3 md:py-4 sticky bg-black z-30 group-hover:bg-gray-900 group-hover:z-40">
70+
<div className="flex gap-2 md:gap-3 items-center">
71+
<div className="relative w-8 h-8 md:w-10 md:h-10 flex-shrink-0">
7172
<Image
7273
src={collection.image}
7374
alt={collection.name}
7475
width={60}
7576
height={60}
76-
className="w-10 h-10 rounded-full"
77+
className="w-8 h-8 md:w-10 md:h-10 rounded-full"
7778
/>
7879
<Image
7980
src={collection.chainicon}
8081
alt={`${collection.name} blockchain icon`}
8182
width={60}
8283
height={60}
83-
className="w-4 h-4 rounded-full bg-white absolute bottom-0 right-0 transform translate-x-1/3 translate-y-1/3"
84+
className="w-3 h-3 md:w-4 md:h-4 rounded-full bg-white absolute bottom-0 right-0 transform translate-x-1/3 translate-y-1/3"
8485
/>
8586
</div>
86-
<div className="text-lg font-semibold truncate">{collection.name}</div>
87+
<div className="text-sm md:text-lg font-semibold truncate min-w-0">{collection.name}</div>
8788
</div>
8889
</td>
89-
<td className="py-4 group-hover:bg-gray-900">{collection.floorId}</td>
90-
<td className="py-4 group-hover:bg-gray-900">{collection.floorPrice}</td>
91-
<td className="py-4 group-hover:bg-gray-900">{collection.volume}</td>
92-
<td className={`py-4 group-hover:bg-gray-900 ${
90+
91+
<td className="py-3 md:py-4 group-hover:bg-gray-900 text-xs md:text-sm px-2">{collection.floorPrice}</td>
92+
<td className="py-3 md:py-4 group-hover:bg-gray-900 text-xs md:text-sm px-2">{collection.volume}</td>
93+
<td className={`py-3 md:py-4 group-hover:bg-gray-900 text-xs md:text-sm px-2 ${
9394
collection.change?.startsWith("+")
9495
? "text-green"
9596
: collection.change?.startsWith("-")
9697
? "text-red"
9798
: ""
9899
}`}>{collection.change}</td>
99-
<td className="py-4 group-hover:bg-gray-900">{collection.topOffer}</td>
100-
<td className="py-4 text-right pr-2 group-hover:bg-gray-900">
100+
<td className="py-3 md:py-4 group-hover:bg-gray-900 text-xs md:text-sm px-2">{collection.topOffer}</td>
101+
<td className="py-3 md:py-4 text-right pr-2 group-hover:bg-gray-900">
101102
<div className="flex flex-col items-end">
102-
<div>{collection.holders}</div>
103+
<div className="text-xs md:text-sm">{collection.holders}</div>
103104
<div className="text-xs text-gray-500">{collection.holdersDetail}</div>
104105
</div>
105106
</td>
@@ -108,20 +109,21 @@ export default function CollectionsPage({ activeTab, searchQuery, blockchain }:
108109
</tbody>
109110
</table>
110111
</div>
111-
<div className="mt-8 text-center text-gray-400">
112+
<div className="mt-6 md:mt-8 text-center text-gray-400 text-sm md:text-base px-4">
112113
Showing {visibleCollections.length} of {filteredCollections.length} collections
113114
</div>
114115
{hasMoreCollections && (
115-
<div className="my-8 flex justify-center">
116+
<div className="my-6 md:my-8 flex justify-center px-4">
116117
<button
117118
onClick={loadMore}
118-
className="text-white bg-[#1C1D1F] py-2 px-4 rounded-lg hover:bg-[#2a2b2e] transition-colors"
119+
className="text-white bg-[#1C1D1F] py-2 px-4 rounded-lg hover:bg-[#2a2b2e] transition-colors flex items-center text-sm md:text-base"
119120
>
120-
See more
121+
<span>See more</span>
122+
<ArrowRight size={16} className="ml-2" />
121123
</button>
122124
</div>
123125
)}
124126
</div>
125127
</div>
126128
);
127-
}
129+
}

‎components/nft/NFTCard.tsx‎

Lines changed: 29 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -22,31 +22,31 @@ const NFTCard: React.FC<NFTCardProps> = ({
2222
<div className="flex flex-col rounded-lg overflow-hidden w-full border border-[#292929] transition-colors duration-300 hover:bg-[#292929]">
2323
<div className="p-2">
2424
<div className="flex justify-between items-center mb-2">
25-
<div className="flex items-center gap-2">
25+
<div className="flex items-center gap-1 sm:gap-2">
2626
<Image
2727
src={`/${creatorIcon}`}
2828
alt={creatorName}
29-
width={24}
30-
height={24}
31-
className="rounded-full"
29+
width={20}
30+
height={20}
31+
className="rounded-full sm:w-6 sm:h-6"
3232
/>
33-
<span className="text-white text-sm font-medium">
33+
<span className="text-white text-xs sm:text-sm font-medium truncate">
3434
{creatorName}
3535
</span>
36-
{isVerified && <MdVerified className="text-purple-500" size={14} />}
36+
{isVerified && <MdVerified className="text-purple-500 flex-shrink-0" size={12} />}
3737
</div>
3838
<button
3939
onClick={() => setIsLiked(!isLiked)}
40-
className="text-red-400 hover:text-red-500 transition-colors"
40+
className="text-red-400 hover:text-red-500 transition-colors flex-shrink-0"
4141
>
4242
{isLiked ? (
43-
<BsHeartFill className="text-[#ED434C] bg-red-400" size={16} />
43+
<BsHeartFill className="text-[#ED434C]" size={14} />
4444
) : (
45-
<BsHeart size={16} />
45+
<BsHeart size={14} />
4646
)}
4747
</button>
4848
</div>
49-
<div className="relative w-full h-64 overflow-hidden">
49+
<div className="relative w-full h-40 sm:h-64 overflow-hidden">
5050
<Image
5151
src={`/${image}`}
5252
alt={title}
@@ -56,20 +56,28 @@ const NFTCard: React.FC<NFTCardProps> = ({
5656
</div>
5757
</div>
5858

59-
<div className="p-4">
60-
<h3 className="text-white font-bold text-base mb-2">{title}</h3>
59+
<div className="p-2 sm:p-4">
60+
<h3 className="text-white font-bold text-sm sm:text-base mb-2 truncate">{title}</h3>
6161

62-
63-
<div className="flex justify-between items-center">
64-
<div className="text-gray-400 text-xs mb-2">Current Bid</div>
65-
<div className="text-gray-400 text-xs">{likes} likes</div>
62+
{/* Mobile: Simple layout - only Current Bid and Amount */}
63+
<div className="sm:hidden flex justify-between items-center">
64+
<div className="text-gray-400 text-xs">Current Bid</div>
65+
<div className="text-white font-bold text-sm">{currentBid} ETH</div>
6666
</div>
6767

68-
<div className="flex justify-between mt-2 text-xs text-gray-400">
69-
<div className="text-white font-bold text-sm">{currentBid} ETH</div>
70-
<div className="">
71-
<span className="border-r-2 pr-2">{minted} minted</span>
72-
<span className="pl-2" >{timeLeft}</span>
68+
{/* Desktop: Full layout with all details */}
69+
<div className="hidden sm:block">
70+
<div className="flex justify-between items-center mb-1">
71+
<div className="text-gray-400 text-xs">Current Bid</div>
72+
<div className="text-gray-400 text-xs">{likes} likes</div>
73+
</div>
74+
75+
<div className="flex justify-between items-end">
76+
<div className="text-white font-bold text-base">{currentBid} ETH</div>
77+
<div className="text-xs text-gray-400 text-right">
78+
<span className="border-r-2 pr-2">{minted} minted</span>
79+
<span className="pl-2">{timeLeft}</span>
80+
</div>
7381
</div>
7482
</div>
7583
</div>

0 commit comments

Comments
 (0)