Merge pull request #42 from web3community/fix_missing_cards

fix: missing items sold cards
WebXDAO · Dec 15, 2021 · f43fcf4 · f43fcf4
2 parents edcaf4d + 3df45b5
commit f43fcf4
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -15,3 +15,9 @@ To use DevNFT you need to setup mumbai testnet network on metamask.
 
 To mint NFT you need test matic 
 - Take them from : https://faucet.polygon.technology/
+
+Tools we are using
+- IPFS infura node
+- Contract templates by [Nader Dabit](https://github.com/dabit3)
+- Nextjs for building Client
+- Hardhat for abi generation
diff --git a/pages/dashboard/my-creations.js b/pages/dashboard/my-creations.js
@@ -106,13 +106,27 @@ export default function MyCreation() {
           Boolean(sold.length) && (
             <div>
               <h2 className="text-2xl py-2">Items sold</h2>
-              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 pt-4">
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 pt-4 pb-4">
                 {
                   sold.map((nft, i) => (
-                    <div key={i} className="border shadow rounded-xl overflow-hidden">
-                      <img src={nft.image} className="rounded" />
-                      <div className="p-4 bg-black">
-                        <p className="text-2xl font-bold text-white">Price - {nft.price} MATIC</p>
+                    <div key={i} className="border shadow-md rounded-xl overflow-hidden">
+                      <div className="w-full h-full flex justify-center items-center">
+                          <div className="relative flex flex-col justify-center rounded-xl w-full">
+                              <div className="top-0 left-0 mt-5 px-1 mx-5 rounded-lg absolute z-30 bg-green-500 text-gray-100 text-xs md:text-sm font-medium md:block">{nft.price} MATIC</div>
+                                  <div className="relative m-4">
+
+                                      {/*<!-- :src="image.largeImageURL"     -->*/}
+                                      <img src={nft.image} className="object-contain rounded-t-xl w-full" alt=""/>
+                                  </div>
+                                  <div className="px-2 py-1 ">
+
+                                      {/*<!-- Product Title -->*/}
+                                      <div className="mx-auto px-2 py-2">
+                                          <div className="text-sm md:text-base font-bold pr-2">{nft.name}</div>
+                                          <p  className="h-16 pb-1 md:pb-2 text-xs md:text-sm text-gray-500">{nft.description}</p>
+                                      </div>
+                                  </div>
+                          </div> 
                       </div>
                     </div>
                   ))

diff --git a/pages/index.js b/pages/index.js
@@ -113,7 +113,7 @@ const home = ({ session }) => {
                   <span className="sr-only">DevNFT</span>
                   <span className="text-2xl font-bold text-purple-600">DevNFT </span>
                   <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">
-                    Beta
+                    Mumbai Testnet
                   </span>
 
                   {/* If we need a logo, put it here !