From 20a15d24c9d43ebd0e01f5b14a12ad9b70c10350 Mon Sep 17 00:00:00 2001
From: Nikita Yutanov <nikitayutanov@gmail.com>
Date: Mon, 15 Jan 2024 19:36:56 +0300
Subject: [PATCH] Add collection list nfts preview

---
 .../collection-card/collection-card.module.scss    | 14 ++++++++++++++
 .../components/collection-card/collection-card.tsx |  9 +++++++++
 2 files changed, 23 insertions(+)

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
index a926d05..ec6319b 100644
--- 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
index ce78a35..b6aa133 100644
--- 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;