Add collection list nfts preview

gear-foundation · Jan 15, 2024 · 20a15d2 · 20a15d2
1 parent fe99f58
commit 20a15d2
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 0 deletions.
diff --git a/frontend/src/features/collections/components/collection-card/collection-card.module.scss b/frontend/src/features/collections/components/collection-card/collection-card.module.scss
@@ -72,3 +72,17 @@
 
   border-top: 1px solid #f3f3f3;
 }
+
+.nfts {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 1px;
+
+  // opacity: 25%;
+
+  img {
+    max-width: 100%;
+    height: auto;
+    object-fit: cover;
+  }
+}
diff --git a/frontend/src/features/collections/components/collection-card/collection-card.tsx b/frontend/src/features/collections/components/collection-card/collection-card.tsx
@@ -18,6 +18,13 @@ function CollectionCard({ id }: Props) {
   const collection = useCollection(id);
   const { config, collectionOwner, tokens, totalNumberOfTokens } = collection || {};
 
+  const renderNFTs = () =>
+    tokens?.map(([nftId, { mediaUrl }]) => (
+      <li key={nftId}>
+        <img src={getIpfsLink(mediaUrl)} alt="" />
+      </li>
+    ));
+
   return config && collectionOwner && tokens !== undefined && totalNumberOfTokens !== undefined ? (
     <li className={styles.collection}>
       <Link to={generatePath(ROUTE.COLLECTION, { id })}>
@@ -41,6 +48,8 @@ function CollectionCard({ id }: Props) {
         <div className={styles.cards}>
           <MintLimitInfoCard heading={totalNumberOfTokens} text={tokens.length} color="dark" />
         </div>
+
+        <ul className={styles.nfts}>{renderNFTs()}</ul>
       </Link>
     </li>
   ) : null;