Skip to content

Edit NFTs and collection mobile responsiveness to match Figma design #139

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
DioChuks merged 5 commits into from
Aug 3, 2025
Merged

Edit NFTs and collection mobile responsiveness to match Figma design #139

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4364127
Merge pull request #1 from StarkBid/main
Jayrodri088 Aug 1, 2025
6f0cbe9
feat: Edit NFTs and collection mobile responsiveness to match Figma d…
Jayrodri088 Aug 2, 2025
2602d8b
clean and neat code
Jayrodri088 Aug 3, 2025
6401b88
fixed bugs per request
Jayrodri088 Aug 3, 2025
c286c12
removed the collection id column
Jayrodri088 Aug 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
275 changes: 203 additions & 72 deletions components/collections/collectionfilter.tsx
View file
Open in desktop

Large diffs are not rendered by default.

62 changes: 32 additions & 30 deletions components/collections/collections.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
"use client";
import { useState } from "react";
import Image from "next/image";
import { ArrowRight } from "lucide-react";
import { collectionsData } from "@/lib/collections-data";

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

return (
<div className="bg-black text-white min-h-screen">
<div className="py-8">
<div className="py-4 md:py-8">
<div className="w-full overflow-x-auto">
<table className="w-full lg:w-full md:w-[1000px] sm:w-[800px] border-collapse">
<table className="w-full min-w-[800px] border-collapse">
<thead>
<tr className="text-gray-400 border-b border-gray-700">
<th className="py-3 text-left px-3 w-16 sticky left-0 bg-black z-30">#</th>
<th className="py-3 sticky text-left bg-black z-30">
<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>
<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">
COLLECTION
</th>
<th className="py-3 text-left whitespace-nowrap">COLLECTION ID</th>
<th className="py-3 text-left whitespace-nowrap">FLOOR PRICE</th>
<th className="py-3 text-left whitespace-nowrap">VOLUME</th>
<th className="py-3 text-left whitespace-nowrap">SALES</th>
<th className="py-3 text-left whitespace-nowrap">TOP OFFER</th>
<th className="py-3 text-right pr-4 whitespace-nowrap">HOLDERS</th>

<th className="py-2 md:py-3 text-left whitespace-nowrap min-w-[90px] text-xs md:text-sm">FLOOR PRICE</th>
<th className="py-2 md:py-3 text-left whitespace-nowrap min-w-[80px] text-xs md:text-sm">VOLUME</th>
<th className="py-2 md:py-3 text-left whitespace-nowrap min-w-[70px] text-xs md:text-sm">SALES</th>
<th className="py-2 md:py-3 text-left whitespace-nowrap min-w-[90px] text-xs md:text-sm">TOP OFFER</th>
<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>
</tr>
</thead>
<tbody>
{visibleCollections.map((collection) => (
<tr key={collection.id} className="border-b border-gray-800 hover:bg-gray-900 group ">
<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>
<td className="py-4 sticky bg-black z-30 min-w-[300px] sm:w-[150px] group-hover:bg-gray-900 group-hover:z-40">
<div className="flex gap-3 items-center">
<div className="relative w-10 h-10">
<tr key={collection.id} className="border-b border-gray-800 hover:bg-gray-900 group">
<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>
<td className="py-3 md:py-4 sticky bg-black z-30 group-hover:bg-gray-900 group-hover:z-40">
<div className="flex gap-2 md:gap-3 items-center">
<div className="relative w-8 h-8 md:w-10 md:h-10 flex-shrink-0">
<Image
src={collection.image}
alt={collection.name}
width={60}
height={60}
className="w-10 h-10 rounded-full"
className="w-8 h-8 md:w-10 md:h-10 rounded-full"
/>
<Image
src={collection.chainicon}
alt={`${collection.name} blockchain icon`}
width={60}
height={60}
className="w-4 h-4 rounded-full bg-white absolute bottom-0 right-0 transform translate-x-1/3 translate-y-1/3"
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"
/>
</div>
<div className="text-lg font-semibold truncate">{collection.name}</div>
<div className="text-sm md:text-lg font-semibold truncate min-w-0">{collection.name}</div>
</div>
</td>
<td className="py-4 group-hover:bg-gray-900">{collection.floorId}</td>
<td className="py-4 group-hover:bg-gray-900">{collection.floorPrice}</td>
<td className="py-4 group-hover:bg-gray-900">{collection.volume}</td>
<td className={`py-4 group-hover:bg-gray-900 ${

<td className="py-3 md:py-4 group-hover:bg-gray-900 text-xs md:text-sm px-2">{collection.floorPrice}</td>
<td className="py-3 md:py-4 group-hover:bg-gray-900 text-xs md:text-sm px-2">{collection.volume}</td>
<td className={`py-3 md:py-4 group-hover:bg-gray-900 text-xs md:text-sm px-2 ${
collection.change?.startsWith("+")
? "text-green"
: collection.change?.startsWith("-")
? "text-red"
: ""
}`}>{collection.change}</td>
<td className="py-4 group-hover:bg-gray-900">{collection.topOffer}</td>
<td className="py-4 text-right pr-2 group-hover:bg-gray-900">
<td className="py-3 md:py-4 group-hover:bg-gray-900 text-xs md:text-sm px-2">{collection.topOffer}</td>
<td className="py-3 md:py-4 text-right pr-2 group-hover:bg-gray-900">
<div className="flex flex-col items-end">
<div>{collection.holders}</div>
<div className="text-xs md:text-sm">{collection.holders}</div>
<div className="text-xs text-gray-500">{collection.holdersDetail}</div>
</div>
</td>
Expand All @@ -108,20 +109,21 @@ export default function CollectionsPage({ activeTab, searchQuery, blockchain }:
</tbody>
</table>
</div>
<div className="mt-8 text-center text-gray-400">
<div className="mt-6 md:mt-8 text-center text-gray-400 text-sm md:text-base px-4">
Showing {visibleCollections.length} of {filteredCollections.length} collections
</div>
{hasMoreCollections && (
<div className="my-8 flex justify-center">
<div className="my-6 md:my-8 flex justify-center px-4">
<button
onClick={loadMore}
className="text-white bg-[#1C1D1F] py-2 px-4 rounded-lg hover:bg-[#2a2b2e] transition-colors"
className="text-white bg-[#1C1D1F] py-2 px-4 rounded-lg hover:bg-[#2a2b2e] transition-colors flex items-center text-sm md:text-base"
>
See more
<span>See more</span>
<ArrowRight size={16} className="ml-2" />
</button>
</div>
)}
</div>
</div>
);
}
}
50 changes: 29 additions & 21 deletions components/nft/NFTCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,31 +22,31 @@ const NFTCard: React.FC<NFTCardProps> = ({
<div className="flex flex-col rounded-lg overflow-hidden w-full border border-[#292929] transition-colors duration-300 hover:bg-[#292929]">
<div className="p-2">
<div className="flex justify-between items-center mb-2">
<div className="flex items-center gap-2">
<div className="flex items-center gap-1 sm:gap-2">
<Image
src={`/${creatorIcon}`}
alt={creatorName}
width={24}
height={24}
className="rounded-full"
width={20}
height={20}
className="rounded-full sm:w-6 sm:h-6"
/>
<span className="text-white text-sm font-medium">
<span className="text-white text-xs sm:text-sm font-medium truncate">
{creatorName}
</span>
{isVerified && <MdVerified className="text-purple-500" size={14} />}
{isVerified && <MdVerified className="text-purple-500 flex-shrink-0" size={12} />}
</div>
<button
onClick={() => setIsLiked(!isLiked)}
className="text-red-400 hover:text-red-500 transition-colors"
className="text-red-400 hover:text-red-500 transition-colors flex-shrink-0"
>
{isLiked ? (
<BsHeartFill className="text-[#ED434C] bg-red-400" size={16} />
<BsHeartFill className="text-[#ED434C]" size={14} />
) : (
<BsHeart size={16} />
<BsHeart size={14} />
)}
</button>
</div>
<div className="relative w-full h-64 overflow-hidden">
<div className="relative w-full h-40 sm:h-64 overflow-hidden">
<Image
src={`/${image}`}
alt={title}
Expand All @@ -56,20 +56,28 @@ const NFTCard: React.FC<NFTCardProps> = ({
</div>
</div>

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


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

<div className="flex justify-between mt-2 text-xs text-gray-400">
<div className="text-white font-bold text-sm">{currentBid} ETH</div>
<div className="">
<span className="border-r-2 pr-2">{minted} minted</span>
<span className="pl-2" >{timeLeft}</span>
{/* Desktop: Full layout with all details */}
<div className="hidden sm:block">
<div className="flex justify-between items-center mb-1">
<div className="text-gray-400 text-xs">Current Bid</div>
<div className="text-gray-400 text-xs">{likes} likes</div>
</div>

<div className="flex justify-between items-end">
<div className="text-white font-bold text-base">{currentBid} ETH</div>
<div className="text-xs text-gray-400 text-right">
<span className="border-r-2 pr-2">{minted} minted</span>
<span className="pl-2">{timeLeft}</span>
</div>
</div>
</div>
</div>
Expand Down
Loading
Loading