create code and styling for each individual item

src/assets/integrations.json

@@ -3,14 +3,21 @@
     {
       "name": "Safe",
       "url": "https://safe.scroll.xyz/",
-      "network": ["sepolia", "mainnet"]
+      "network": ["sepolia", "mainnet"],
+      "logo": "https://docs.attest.sh/img/eas-logo.png",
+      "tags": ["indexer", "test1", "test2", "Test3"]
     },
     {
       "name": "The Graph",
       "url": "https://edgeandnode.notion.site/The-Graph-Subgraph-Studio-Non-Rate-Limited-Chain-Integration-889fe061ee6b4423a7f8e2c8070b9294?pvs=4",
-      "network": ["sepolia", "mainnet"],
-      "tags": ["indexer"],
+      "network": ["mainnet", "sepolia"],
+      "tags": ["indexer", "test1", "test2"],
       "comment": "Use the latest version of The Graph's cli."
+    },
+    {
+      "name": "Wagmi",
+      "logo": "https://github.com/wevm/wagmi/blob/main/docs/public/favicons/light.png?raw=true",
+      "network": ["mainnet"]
     }
   ]
 }

src/components/IntegrationItem.module.css

@@ -0,0 +1,61 @@
+.container {
+  border-radius: 27px;
+  background: #fff8f3;
+  flex-direction: column;
+  width: 298px;
+  /* height: 404px; */
+  padding: 30px;
+}
+.flexRow {
+  display: flex;
+  flex-direction: row;
+}
+.logo {
+  height: 54px;
+  padding-right: 16px;
+}
+.name {
+  color: #101010;
+  /* font-family: Trans Sans Premium; */
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 30px; /* 125% */
+  letter-spacing: 0.24px;
+  align-self: center;
+}
+.url {
+  height: 15px;
+}
+.comment {
+  color: #101010;
+  font-family: Roboto Flex;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 25px; /* 156.25% */
+  margin-top: 24px;
+  margin-bottom: 31px;
+}
+.network {
+  color: #878787;
+  font-family: Roboto Flex;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 25px; /* 208.333% */
+  letter-spacing: 0.36px;
+}
+.tag {
+  border-radius: 5px;
+  background: #fff0dd;
+  padding: 5px 7px;
+  margin: 10px;
+  color: #84623a;
+  text-align: center;
+  font-family: Roboto Flex;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0.16px;
+}

src/components/IntegrationItem.tsx

@@ -0,0 +1,46 @@
+import React from "react"
+import styles from "./IntegrationItem.module.css"
+
+// TODO: write sidebar name of page
+
+type ToolingData = {
+  name: string
+  logo?: string
+  network: string[]
+  comment?: string
+  tags?: string[]
+}
+
+enum Networks {
+  sepolia = "Sepolia",
+  mainnet = "Mainnet"
+}
+
+export function IntegrationItem({
+  data
+}: {
+  data: ToolingData
+}) {
+
+  // TODO: check that the network string is in the enum
+  const networkList = data.network.length === 1 ? Networks[data.network[0]] : 
+    data.network.reduce((x, y) => Networks[x] + ", " + Networks[y])
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.flexRow} style={{justifyContent: "space-between"}}>
+        <div className={styles.flexRow}>
+          <img src={data.logo} className={styles.logo}/>
+          <div className={styles.name}>{data.name}</div>
+        </div>
+        <img src={"../../svgs/home-link-arrow.svg"} className={styles.url}/>
+      </div>
+      <div className={styles.comment}>{data.comment}</div>
+      <div className={styles.network}>NETWORK</div>
+      <div>{networkList}</div>
+      <div className={styles.flexRow} style={{marginTop: "25px", flexWrap:"wrap"}}>
+        {data.tags && data.tags.map((tag) => <div className={styles.tag}>{tag}</div>)}
+      </div>
+    </div>
+  )
+}

src/components/IntegrationsList.astro

@@ -1,5 +1,6 @@
 ---
+import { IntegrationItem } from "./IntegrationItem"
 const { data } = Astro.props
 ---
 
-{data.map((item) => <p>{item["name"]}</p>)}
+{data.map((item) => <IntegrationItem data={item} />)}