Yu gallery

NotSoSimpleNFT.code-workspace

@@ -0,0 +1,8 @@
+{
+  "folders": [
+    {
+      "path": "client"
+    }
+  ],
+  "settings": {}
+}

client/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "editor.formatOnSave": true
+}

client/components/NftCard/NftCard my.js

@@ -0,0 +1,31 @@
+import React from 'react'
+
+import { useAllTokens } from "queries";
+
+const NFTCard = ( {token}) => {
+  const tokens  = useAllTokens().data
+  console.log(tokens)
+    return ( 
+     <div>{ token }</div> 
+
+//         <div class="flex justify-center">
+//   <div class="rounded-lg shadow-lg bg-white max-w-sm">
+//     <a href="#!">
+//       <img class="rounded-t-lg" src="https://mdbootstrap.com/img/new/standard/nature/184.jpg" alt=""/>
+//     </a>
+//     <div class="p-6">
+//       <h5 class="text-gray-900 text-xl font-medium mb-2">Card title</h5>
+//       <p class="text-gray-700 text-base mb-4">
+//         Some quick example text to build on the card title and make up the bulk of the card's
+//         content.
+//       </p>
+//       <button type="button" class=" inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">Button</button>
+//     </div>
+//   </div>
+// </div>
+
+     )
+}
+
+export default NFTCard;
+

client/components/NftCard/NftCard.js

@@ -0,0 +1,31 @@
+import React from 'react'
+
+import { useAllTokens } from "queries";
+
+const NFTCard = ( { img, title, desc } ) => {
+
+  console.log(NFTCard)
+
+    return ( 
+
+
+        <div class="flex justify-center">
+  <div class="rounded-lg shadow-lg bg-white max-w-sm">
+    <a href="#!">
+      <img class="rounded-t-lg" src= {img} alt=""/>
+    </a>
+
+    <div class="p-6">
+      <h1 class="text-gray-900 text-xl font-bold mb-2"> {title} </h1>
+      <p class="text-gray-700 text-base mb-4"> {desc} </p>
+
+        <button type="button" class=" inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">Button</button>
+      </div>
+    </div>
+</div>
+
+     )
+}
+
+export default NFTCard;
+

client/components/NftCard/NftPage my.js

@@ -0,0 +1,20 @@
+import NFTCard from "./NftCard";
+import { useAllTokens } from "queries";
+
+const NftPage = () => {
+
+    const tok = useAllTokens()
+    console.log (tok)
+
+return ( 
+<div className="container mx-auto">
+    <div className="grid grid-cols-3 gap-4">
+        <NFTCard/>
+        <NFTCard/>
+        <NFTCard/>
+    </div>
+</div>
+ );
+}
+
+export default NftPage;

client/components/NftCard/NftPage.js

@@ -0,0 +1,27 @@
+import NFTCard from "./NftCard";
+import { useAllTokens } from "queries";
+import { useState } from "react";
+
+
+
+const NftPage = () => {
+    const res = useAllTokens().data
+    console.log("", res)
+  const test = res?.map( (el) => {
+        return <NFTCard img={el.image} title={el.name} desc={el.description}/>
+    } 
+    )
+
+
+
+
+return ( 
+<div className="container mx-auto">
+    <div className="grid grid-cols-3 gap-4">
+        { test }
+    </div>
+</div>
+ );
+}
+
+export default NftPage;