From f685c684ea6ad9560bf587af78bf7bf2e0c65c3f Mon Sep 17 00:00:00 2001
From: rockyeverlast <rockyeverlast@gmail.com>
Date: Fri, 17 May 2024 15:08:53 +0530
Subject: [PATCH] Subnet Api integrated

---
 .../SubnetsComponent/Component1.jsx           |  1 +
 .../SubnetsComponent/Component2.jsx           | 17 +++--
 .../SubnetsComponent/Component3.jsx           |  7 +-
 .../SubnetsComponent/Component4.jsx           |  3 +-
 .../SubnetsComponent/NewSubnetComp.jsx        | 66 ++++++++++++++++++-
 5 files changed, 84 insertions(+), 10 deletions(-)

diff --git a/src/components/SubnetsComponent/Component1.jsx b/src/components/SubnetsComponent/Component1.jsx
index 5f9ece4..360f1c3 100644
--- a/src/components/SubnetsComponent/Component1.jsx
+++ b/src/components/SubnetsComponent/Component1.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 /* eslint-disable no-unused-vars */
 import { Box, Button, Image, Text, Grid, GridItem } from "@chakra-ui/react";
 import { Container } from "@chakra-ui/react";
diff --git a/src/components/SubnetsComponent/Component2.jsx b/src/components/SubnetsComponent/Component2.jsx
index fc6f795..66635e9 100644
--- a/src/components/SubnetsComponent/Component2.jsx
+++ b/src/components/SubnetsComponent/Component2.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 /* eslint-disable no-unused-vars */
 import { Box, Button, Image, Text, Grid, GridItem } from "@chakra-ui/react";
 import { Container } from "@chakra-ui/react";
@@ -10,10 +11,10 @@ import {
 } from "@chakra-ui/react";
 import vector2 from "../../assets/images/vector2.png";
 
-export const Component2 = () => {
+export const Component2 = ({ id, title, content }) => {
   return (
     <>
-      <Box display={"flex"} position={"absolute"} top={"-70px"}>
+      <Box display={"flex"} position={"absolute"} top={"-70px"} key={id}>
         <Button
           position={"relative"}
           background={"transparent"}
@@ -43,13 +44,17 @@ export const Component2 = () => {
             border: "1px solid #A5A5A5",
           }}
         >
-          Easier
+          {title}
         </Button>
       </Box>
       <UnorderedList color={"#E1E1E1"}>
-        <ListItem fontSize={"14px"}>Leverage own infrastructure for block space</ListItem>
-        <ListItem fontSize={"14px"}>Smart contracts in Rust , GoLang and C/C++</ListItem>
-        <ListItem fontSize={"14px"}>WASM compiler for smooth code migration</ListItem>
+        <ListItem fontSize={"14px"}>{content}</ListItem>
+        {/* <ListItem fontSize={"14px"}>
+          Smart contracts in Rust , GoLang and C/C++
+        </ListItem>
+        <ListItem fontSize={"14px"}>
+          WASM compiler for smooth code migration
+        </ListItem> */}
       </UnorderedList>
     </>
   );
diff --git a/src/components/SubnetsComponent/Component3.jsx b/src/components/SubnetsComponent/Component3.jsx
index 981b5f1..b5d5d5e 100644
--- a/src/components/SubnetsComponent/Component3.jsx
+++ b/src/components/SubnetsComponent/Component3.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 /* eslint-disable no-unused-vars */
 import { Box, Button, Image, Text, Grid, GridItem } from "@chakra-ui/react";
 import { Container } from "@chakra-ui/react";
@@ -10,7 +11,7 @@ import {
 } from "@chakra-ui/react";
 import vector3 from "../../assets/images/vector3.png";
 
-export const Component3 = () => {
+export const Component3 = ({ id, title, content }) => {
   return (
     <>
       <Box
@@ -60,7 +61,9 @@ export const Component3 = () => {
       >
         <UnorderedList color={"#E1E1E1"}>
           <ListItem fontSize={"14px"}>No GAS fees</ListItem>
-          <ListItem fontSize={"14px"}>Incremental and modular infrastructure ask</ListItem>
+          <ListItem fontSize={"14px"}>
+            Incremental and modular infrastructure ask
+          </ListItem>
           <ListItem fontSize={"14px"}>
             No expensive re training of development <br />
             resources
diff --git a/src/components/SubnetsComponent/Component4.jsx b/src/components/SubnetsComponent/Component4.jsx
index 67999ea..e023bcc 100644
--- a/src/components/SubnetsComponent/Component4.jsx
+++ b/src/components/SubnetsComponent/Component4.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 /* eslint-disable no-unused-vars */
 import { Box, Button, Image, Text, Grid, GridItem } from "@chakra-ui/react";
 import { Container } from "@chakra-ui/react";
@@ -10,7 +11,7 @@ import {
 } from "@chakra-ui/react";
 import vector4 from "../../assets/images/vector4.png";
 
-export const Component4 = () => {
+export const Component4 = ({ id, title, content }) => {
   return (
     <>
       <Box
diff --git a/src/components/SubnetsComponent/NewSubnetComp.jsx b/src/components/SubnetsComponent/NewSubnetComp.jsx
index 62d5363..eb0880c 100644
--- a/src/components/SubnetsComponent/NewSubnetComp.jsx
+++ b/src/components/SubnetsComponent/NewSubnetComp.jsx
@@ -161,7 +161,71 @@ export const NewSubnetComp = () => {
                     },
                   }}
                 />
-                {item?.decenters.map((data) => console.log(data[0]))}
+                {item?.decenters.map((data, index) => (
+                  <>
+                    {index === 0 && (
+                      <Box
+                        gridColumn={"1/2"}
+                        textAlign={"left"}
+                        position={"relative"}
+                        width={"383px"}
+                      >
+                        <Component1
+                          id={data.id}
+                          title={data.title}
+                          content={data.content}
+                        />
+                      </Box>
+                    )}
+
+                    {index === 1 && (
+                      <Box
+                        gridColumn={"1/2"}
+                        gridRow={"2"}
+                        textAlign={"left"}
+                        position={"relative"}
+                        width={"383px"}
+                      >
+                        <Component2
+                          id={data.id}
+                          title={data.title}
+                          content={data.content}
+                        />
+                      </Box>
+                    )}
+
+                    {index === 2 && (
+                      <Box
+                        gridColumn={"2/2"}
+                        gridRow={"2"}
+                        textAlign={"left"}
+                        position={"relative"}
+                        width={"383px"}
+                      >
+                        <Component3
+                          id={data.id}
+                          title={data.title}
+                          content={data.content}
+                        />
+                      </Box>
+                    )}
+
+                    {index === 3 && (
+                      <Box
+                        gridColumn={"2/2"}
+                        textAlign={"left"}
+                        position={"relative"}
+                        width={"383px"}
+                      >
+                        <Component4
+                          id={data.id}
+                          title={data.title}
+                          content={data.content}
+                        />
+                      </Box>
+                    )}
+                  </>
+                ))}
               </Box>
             </Container>
           </Box>