Subnet component Api in progress

src/components/SubnetsComponent/Component1.jsx

@@ -10,10 +10,10 @@ import {
 } from "@chakra-ui/react";
 import vector1 from "../../assets/images/vector1.png";
 
-export const Component1 = () => {
+export const Component1 = ({ 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"}
@@ -54,18 +54,18 @@ export const Component1 = () => {
             border: "1px solid #A5A5A5",
           }}
         >
-          P2P
+          {title}
         </Button>
       </Box>
       <UnorderedList color={"#E1E1E1"}>
-        <ListItem fontSize={"14px"}>Only L1 powering full mobile nodes</ListItem>
-        <ListItem fontSize={"14px"}>
+        <ListItem fontSize={"14px"}>{content}</ListItem>
+        {/* <ListItem fontSize={"14px"}>
           Mobile nodes with full state data will settle P2P . Consensus provided
           by nearby node validators.
         </ListItem>
         <ListItem fontSize={"14px"}>
           High scalability, Partition tolerance and portability
-        </ListItem>
+        </ListItem> */}
       </UnorderedList>
     </>
   );