From 8267b00dd353c4ce58996b32eadd0ffc5dfe62ea Mon Sep 17 00:00:00 2001 From: Cindy Sydney Bosibori Date: Fri, 9 Aug 2024 12:52:02 +0300 Subject: [PATCH] feat: update nft screen Enhanced UI of the nft screen --- app/play/page.tsx | 3 +- components/game/NFTScreen.tsx | 67 ++++++++++++++++++++++------------ components/ui/nftgallery.tsx | 58 ++++++++++++++++++++++++----- public/assets/test.jpeg | Bin 0 -> 9308 bytes 4 files changed, 94 insertions(+), 34 deletions(-) create mode 100644 public/assets/test.jpeg diff --git a/app/play/page.tsx b/app/play/page.tsx index e3728cd..c2d01e5 100644 --- a/app/play/page.tsx +++ b/app/play/page.tsx @@ -76,7 +76,8 @@ const Play = () => { onRestart={handleRestartGame} /> } - + + ); }; diff --git a/components/game/NFTScreen.tsx b/components/game/NFTScreen.tsx index 90fd91b..98746d2 100644 --- a/components/game/NFTScreen.tsx +++ b/components/game/NFTScreen.tsx @@ -1,39 +1,60 @@ "use client"; -import React, { useState } from 'react'; -import NFTGallery from '../ui/nftgallery'; -import { Button } from '../ui/button'; +import React, { useState } from "react"; +import NFTGallery from "../ui/nftgallery"; +import { Button } from "../ui/button"; interface NFTScreenProps { onViewLeaderboard: () => void; onRestart: () => void; } -const NFTScreen: React.FC = ({ onViewLeaderboard, onRestart }) => { - const [activeTab, setActiveTab] = useState<'all' | 'user'>('all'); +const NFTScreen: React.FC = ({ + onViewLeaderboard, + onRestart, +}) => { + const [activeTab, setActiveTab] = useState<"all" | "user">("all"); return (
-
-
- - +
+ {/* Tabs */} +
+
+ + +
+ + {/* NFT Gallery */} -
- - + + {/* Buttons */} +
+ +
-
); diff --git a/components/ui/nftgallery.tsx b/components/ui/nftgallery.tsx index 275b52e..e96fdab 100644 --- a/components/ui/nftgallery.tsx +++ b/components/ui/nftgallery.tsx @@ -1,30 +1,68 @@ -import React from 'react'; +import React, { useState } from 'react'; + +import Image from 'next/image'; +import { + Dialog, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "../ui/dialog"; interface NFTGalleryProps { filter: 'all' | 'user'; } +interface NFT { + id: number; + image: string; + title: string; + owner?: string; +} + const NFTGallery: React.FC = ({ filter }) => { // Dummy data for demonstration purposes const allNFTs = [ - { id: 1, image: '/nft-placeholder.png', title: 'NFT 1' }, - { id: 2, image: '/nft-placeholder.png', title: 'NFT 2' }, + { id: 1, image: '/assets/cat4.jpeg', title: 'NFT 1', owner: 'Mercy' }, + { id: 2, image: '/assets/cat2.jpeg', title: 'NFT 2', owner: 'Jada' }, + { id: 3, image: '/assets/cat3.jpeg', title: 'NFT 3', owner: 'Mark' }, + { id: 4, image: '/assets/cat4.jpeg', title: 'NFT 4', owner: 'Jonah' }, + { id: 5, image: '/assets/cat2.jpeg', title: 'NFT 5', owner: 'Bezos' }, ]; const userNFTs = [ - { id: 1, image: '/nft-placeholder.png', title: 'User NFT 1' }, + { id: 1, image: '/assets/cat4.jpeg', title: 'User NFT 1', owner: 'You' }, ]; - // Choose which NFTs to display based on the active tab + //filter NFTs to display based on the active tab const nfts = filter === 'all' ? allNFTs : userNFTs; + const [selectedNFT, setSelectedNFT] = useState(null); + return ( -
+
{nfts.map((nft) => ( -
- {nft.title} -

{nft.title}

-
+ open ? setSelectedNFT(nft) : setSelectedNFT(null)}> + +
+ {nft.title} +

{nft.title}

+ {nft.owner &&

by {nft.owner}

} +
+ + + {selectedNFT && ( + <> + + {selectedNFT.title} + {selectedNFT.owner && Owned by {selectedNFT.owner}} + + {selectedNFT.title} + + )} + + ))}
); diff --git a/public/assets/test.jpeg b/public/assets/test.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..35a621a99601af4844d15f7eae93cd5fa7a561cd GIT binary patch literal 9308 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