add links

scroll-tech · Jan 22, 2024 · d96a4c8 · d96a4c8
1 parent 3561dbd
commit d96a4c8
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 3 deletions.
diff --git a/src/components/IntegrationItem.module.css b/src/components/IntegrationItem.module.css
@@ -5,6 +5,8 @@
   width: 298px;
   /* height: 404px; */
   padding: 30px;
+  margin-left: 22px;
+  margin-bottom: 22px;
 }
 /* If you want every element inside the container to apply the 'trans-sans' font, just use this style */
 .container * {
@@ -44,6 +46,13 @@
   margin-top: 24px;
   margin-bottom: 31px;
 }
+.tutorial {
+  padding-bottom: 15px;
+  color: var(--orange-300);
+}
+.tutorial:hover {
+  color: var(--orange-400);
+}
 .network {
   color: #878787;
   font-family: Roboto Flex;
@@ -57,7 +66,7 @@
   border-radius: 5px;
   background: #fff0dd;
   padding: 5px 7px;
-  margin: 10px;
+  margin: 10px 10px 10px 0px;
   color: #84623a;
   text-align: center;
   font-family: Roboto Flex;

diff --git a/src/components/IntegrationItem.tsx b/src/components/IntegrationItem.tsx
@@ -6,9 +6,11 @@ import styles from "./IntegrationItem.module.css"
 type ToolingData = {
   name: string
   logo?: string
+  url: string
   network: string[]
   comment?: string
   tags?: string[]
+  guide?: string
 }
 
 enum Networks {
@@ -30,14 +32,25 @@ export function IntegrationItem({
     <div className={styles.container}>
       <div className={styles.flexRow} style={{justifyContent: "space-between"}}>
         <div className={styles.flexRow}>
-          <img src={data.logo} className={styles.logo}/>
+          {data.logo && (<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}/>
+        <a href={data.url}>
+          <img src={"../../svgs/home-link-arrow.svg"} className={styles.url}/>
+        </a>
       </div>
+
       <div className={styles.comment}>{data.comment}</div>
+
+      {data.guide && (
+        <a href={data.guide}>
+          <div className={styles.tutorial}>TUTORIAL</div>
+        </a>
+      )}
+
       <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>