added classes for attributes and extras containers.

Author: vytjan

lib/api.js

@@ -8,6 +8,15 @@ export const getMetadataById = async (id, contract) => {
     let newUri = tokenUri.replace("ipfs://", ipfs_gateway)
     const meta = await axios.get(newUri)
     let imgUri = meta.data.image.replace("ipfs://", ipfs_gateway)
+    // append class name
+    meta.data.extras.forEach(element => {
+      element['className'] = element.trait_type.toLowerCase().replace(" ", "-").replace("/","-");
+    });
+    meta.data.attributes.forEach(element => {
+      console.log(element);
+      element['className'] = element.trait_type.toLowerCase().replace(" ", "-").replace("/","-");
+    });
+
     let item = {
       tokenId: id,
       image: imgUri,

pages/create-nft.js

@@ -1,8 +1,8 @@
 import { useState, useEffect } from 'react'
 import { ethers } from 'ethers'
 import axios from 'axios'
-import Link from "next/link"
-import { getMetadataById } from "../lib/api";
+// import Link from "next/link"
+// import { getMetadataById } from "../lib/api";
 // import { useRouter } from 'next/router'
 import { trackWindowScroll } from 'react-lazy-load-image-component';
 

pages/dashboard.js

@@ -32,8 +32,8 @@ export default function Nft({meta}) {
                 {/* extras */}
                 {meta.data.extras.map((item, i) => (
                 <div
-                key={item.trait_type} 
-                className="border shadow rounded-xl overflow-hidden">
+                key={item.trait_type}
+                className={"border shadow rounded-xl overflow-hidden "+item.className}>
                         <div className="p-4" >
                             <p className="text-2xl font-semibold">{item.trait_type}</p>
                             <div>
@@ -46,7 +46,7 @@ export default function Nft({meta}) {
                 <div className="border shadow rounded-xl overflow-hidden">
                     <p className="text-2xl font-semibold">Attributes</p>
                     {meta.data.attributes.map((item, i) => (
-                        <div className="p-4" 
+                        <div className={"p-4 "+item.className} 
                         key={item.trait_type}>
                             <p className="text-2l font-semibold">{item.trait_type}</p>
                             <div>

pages/my-nfts.js

@@ -3,3 +3,11 @@
 @tailwind components;
 @tailwind utilities;
 @tailwind variants;
+
+
+.family-description {
+    background-color: theme('colors.orange.300');
+    border-radius: theme('borderRadius.lg');
+    padding: theme('spacing.6');
+    box-shadow: theme('boxShadow.xl');
+}