From f428a84fe07d7cb5194dc3863b4cf5b7cefe9129 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A9lcio=20Franco?= <github@helciofranco.com>
Date: Thu, 9 Jan 2025 15:03:21 +0800
Subject: [PATCH] feat: add basic grid for listing NFTs

---
 .../components/BalanceNFTs/BalanceNFTs.tsx    | 112 ++++++++++++++++++
 .../app/src/systems/Home/pages/Home/Home.tsx  |   3 +-
 2 files changed, 114 insertions(+), 1 deletion(-)
 create mode 100644 packages/app/src/systems/Account/components/BalanceNFTs/BalanceNFTs.tsx

diff --git a/packages/app/src/systems/Account/components/BalanceNFTs/BalanceNFTs.tsx b/packages/app/src/systems/Account/components/BalanceNFTs/BalanceNFTs.tsx
new file mode 100644
index 000000000..d598f8449
--- /dev/null
+++ b/packages/app/src/systems/Account/components/BalanceNFTs/BalanceNFTs.tsx
@@ -0,0 +1,112 @@
+import { cssObj } from '@fuel-ui/css';
+import { Accordion, Badge, Box } from '@fuel-ui/react';
+
+export const BalanceNFTs = () => {
+  return (
+    <Box css={styles.root}>
+      <Accordion type="multiple">
+        <Accordion.Item value="item-1">
+          <Accordion.Trigger>
+            <Badge variant="ghost" color="gray" as="span">
+              4
+            </Badge>
+            Collection name
+          </Accordion.Trigger>
+          <Accordion.Content>
+            <Box css={styles.grid}>
+              <img
+                src="https://ipfs.io/ipfs/bafybeicwudiwhs6zanzootxak3bzhxsnoagkglikrbjwucjl5c3y4xne6y/1666.png"
+                alt="NFT 1"
+              />
+              <img
+                src="https://ipfs.io/ipfs/bafybeicwudiwhs6zanzootxak3bzhxsnoagkglikrbjwucjl5c3y4xne6y/1666.png"
+                alt="NFT 2"
+              />
+              <img
+                src="https://ipfs.io/ipfs/bafybeicwudiwhs6zanzootxak3bzhxsnoagkglikrbjwucjl5c3y4xne6y/1666.png"
+                alt="NFT 3"
+              />
+              <img
+                src="https://ipfs.io/ipfs/bafybeicwudiwhs6zanzootxak3bzhxsnoagkglikrbjwucjl5c3y4xne6y/1666.png"
+                alt="NFT 4"
+              />
+            </Box>
+          </Accordion.Content>
+        </Accordion.Item>
+      </Accordion>
+    </Box>
+  );
+};
+
+const styles = {
+  root: cssObj({
+    '.fuel_Accordion-trigger': {
+      fontSize: '$sm',
+      fontWeight: '$semibold',
+      backgroundColor: 'transparent',
+      color: '$intentsBase11',
+      padding: '$0',
+      gap: '$1',
+      flexDirection: 'row-reverse',
+      justifyContent: 'flex-start',
+    },
+    '.fuel_Accordion-trigger:hover': {
+      color: '$intentsBase12',
+    },
+    '.fuel_Accordion-trigger[data-state="open"]': {
+      color: '$intentsBase12',
+    },
+    '.fuel_Accordion-trigger[data-state="closed"] .fuel_Accordion-icon': {
+      transform: 'rotate(-45deg)',
+    },
+    '.fuel_Accordion-trigger[data-state="open"] .fuel_Accordion-icon': {
+      transform: 'rotate(0deg)',
+    },
+    '.fuel_Accordion-item': {
+      backgroundColor: 'transparent',
+      borderBottom: '1px solid $cardBorder',
+      borderRadius: '$none',
+    },
+    '.fuel_Accordion-content': {
+      border: '0',
+      padding: '$0 $0 $2 $0',
+    },
+    '.fuel_Badge': {
+      display: 'inline-block',
+      fontWeight: '$normal',
+      fontSize: '$xs',
+      padding: '$1',
+      pointerEvents: 'none',
+      marginLeft: 'auto',
+      lineHeight: 'normal',
+    },
+  }),
+  grid: cssObj({
+    display: 'grid',
+    gridTemplateColumns: 'repeat(3, 1fr)',
+    gap: '10px',
+
+    img: {
+      width: '100%',
+      aspectRatio: '1 / 1',
+      borderRadius: '12px',
+      objectFit: 'cover',
+      backgroundColor: '$cardBg',
+    },
+  }),
+};
+
+/*
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
+  padding: 10px;
+
+  img {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  border-radius: 12px;
+  object-fit: cover;
+  background-color: #e0e0e0;
+}
+  */
diff --git a/packages/app/src/systems/Home/pages/Home/Home.tsx b/packages/app/src/systems/Home/pages/Home/Home.tsx
index b3e554db6..004befb41 100644
--- a/packages/app/src/systems/Home/pages/Home/Home.tsx
+++ b/packages/app/src/systems/Home/pages/Home/Home.tsx
@@ -6,6 +6,7 @@ import { Layout, Pages, scrollable } from '~/systems/Core';
 import { useBalanceVisibility } from '~/systems/Core/hooks/useVisibility';
 
 import { BalanceAssets } from '~/systems/Account/components/BalanceAssets/BalanceAssets';
+import { BalanceNFTs } from '~/systems/Account/components/BalanceNFTs/BalanceNFTs';
 import { HomeActions } from '../../components';
 
 export function Home() {
@@ -53,7 +54,7 @@ export function Home() {
               />
             </Tabs.Content>
             <Tabs.Content value="nft" css={styles.assetsList}>
-              NFTs here
+              <BalanceNFTs />
             </Tabs.Content>
           </Tabs>
         </Box.Flex>