feat: update nft screen

app/play/page.tsx

@@ -6,7 +6,6 @@ import MintScreen from '@/components/game/MintScreen';
 import NFTScreen from '@/components/game/NFTScreen';
 import Leaderboard from '@/components/game/Leaderboard';
 import AppBar from '@/components/layout/AppBar';
-import Dashboard from '@/components/game/Dashboard';
 
 const Play = () => {
   const [currentScreen, setCurrentScreen] = useState('game'); // Default to 'game'
@@ -77,12 +76,8 @@ const Play = () => {
           onRestart={handleRestartGame} 
         />
       }
-      {currentScreen === 'dashboard' && (
-        <Dashboard 
-          onGoBack={handleGoBack}
-        />
-      )}
-    </div>
+
+  </div>
   );
 };
 

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<NFTScreenProps> = ({ onViewLeaderboard, onRestart }) => {
-  const [activeTab, setActiveTab] = useState<'all' | 'user'>('all');
+const NFTScreen: React.FC<NFTScreenProps> = ({
+  onViewLeaderboard,
+  onRestart,
+}) => {
+  const [activeTab, setActiveTab] = useState<"all" | "user">("all");
 
   return (
     <div className="flex flex-col items-center p-4">
-      <div className="w-full max-w-4xl mt-10">
-        <div className="flex border-b border-gray-300 mb-4">
-          <button
-            className={`py-2 px-4 text-lg font-medium ${activeTab === 'all' ? 'border-b-2 border-blue-500' : 'text-gray-500'}`}
-            onClick={() => setActiveTab('all')}
-          >
-            All NFTs
-          </button>
-          <button
-            className={`py-2 px-4 text-lg font-medium ${activeTab === 'user' ? 'border-b-2 border-blue-500' : 'text-gray-500'}`}
-            onClick={() => setActiveTab('user')}
-          >
-            Your NFTs
-          </button>
+      <div className="w-full max-w-4xl mt-14">
+        {/* Tabs */}
+        <div className="flex justify-center mb-4">
+          <div className="inline-flex bg-gray-100 rounded-lg p-1">
+            <button
+              className={`py-2 px-4 rounded-lg text-sm font-medium w-40 ${
+                activeTab === "all"
+                  ? "bg-white text-black font-bold"
+                  : "text-gray-500"
+              }`}
+              onClick={() => setActiveTab("all")}
+            >
+              All NFTs
+            </button>
+            <button
+              className={`py-2 px-4 rounded-lg text-sm font-medium w-40 ${
+                activeTab === "user"
+                  ? "bg-white text-black font-bold"
+                  : "text-gray-500"
+              }`}
+              onClick={() => setActiveTab("user")}
+            >
+              Your NFTs
+            </button>
+          </div>
         </div>
+
+        {/* NFT Gallery */}
         <NFTGallery filter={activeTab} />
-        <div className='flex gap-5'>
-        <Button onClick={onViewLeaderboard} className="mt-4">View Leaderboard</Button>
-        <Button onClick={onRestart} className="mt-4">Restart Game</Button>
+
+        {/* Buttons */}
+        <div className="flex gap-5">
+          <Button onClick={onViewLeaderboard} className="mt-4">
+            View Leaderboard
+          </Button>
+          <Button onClick={onRestart} className="mt-4">
+            Restart Game
+          </Button>
         </div>
-
       </div>
     </div>
   );

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<NFTGalleryProps> = ({ 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<NFT | null>(null);
+
   return (
-    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-2">
       {nfts.map((nft) => (
-        <div key={nft.id} className="border border-gray-300 rounded p-4">
-          <img src={nft.image} alt={nft.title} className="w-full h-auto mb-2" />
-          <h3 className="text-lg">{nft.title}</h3>
-        </div>
+        <Dialog key={nft.id} onOpenChange={(open) => open ? setSelectedNFT(nft) : setSelectedNFT(null)}>
+        <DialogTrigger asChild>
+          <div className="cursor-pointer border border-gray-300 rounded-lg p-4 shadow-lg overflow-hidden">
+            <Image src={nft.image} alt={nft.title} width={500} height={500} className="w-full h-auto object-cover mb-2" />
+            <h3 className="text-lg font-semibold">{nft.title}</h3>
+            {nft.owner && <p className="text-sm text-gray-600">by {nft.owner}</p>}
+          </div>
+        </DialogTrigger>
+        <DialogContent>
+          {selectedNFT && (
+            <>
+              <DialogHeader>
+                <DialogTitle>{selectedNFT.title}</DialogTitle>
+                {selectedNFT.owner && <DialogDescription>Owned by {selectedNFT.owner}</DialogDescription>}
+              </DialogHeader>
+              <Image src={selectedNFT.image} alt={selectedNFT.title} width={500} height={500} className="w-full h-auto mt-4 rounded-lg" />
+            </>
+          )}
+        </DialogContent>
+      </Dialog>
       ))}
     </div>
   );