From f5f90139a4a1a92684a3e80177b0fb2f94fca439 Mon Sep 17 00:00:00 2001
From: Keith <keithwhisper@gmail.com>
Date: Sat, 30 Nov 2024 14:00:45 +0900
Subject: [PATCH] feat: make the info link in banner more intuitive

---
 src/pages/Home/Banner/index.module.scss |  2 ++
 src/pages/Home/Banner/index.tsx         | 17 ++++++++++-------
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/pages/Home/Banner/index.module.scss b/src/pages/Home/Banner/index.module.scss
index 15cf5895b..710ad8997 100644
--- a/src/pages/Home/Banner/index.module.scss
+++ b/src/pages/Home/Banner/index.module.scss
@@ -145,6 +145,8 @@ $backgroundColor: #232323;
     gap: 8px;
   }
 
+  cursor: default;
+
   @media screen and (width <= 500px) {
     font-size: 30px;
   }
diff --git a/src/pages/Home/Banner/index.tsx b/src/pages/Home/Banner/index.tsx
index 22611a0bf..a4a50d482 100644
--- a/src/pages/Home/Banner/index.tsx
+++ b/src/pages/Home/Banner/index.tsx
@@ -1,4 +1,5 @@
 import { useQuery } from '@tanstack/react-query'
+import { InfoCircledIcon } from '@radix-ui/react-icons'
 import config from '../../../config'
 import styles from './index.module.scss'
 import { getKnowledgeSize } from './utils'
@@ -24,19 +25,21 @@ export default () => {
   )
   return (
     <div className={styles.root}>
-      <a
-        className={styles.knowledgeBase}
-        target="_blank"
-        rel="noopener noreferrer"
-        href="https://talk.nervos.org/t/how-to-get-the-average-occupied-bytes-per-live-cell-in-ckb/7138/2?u=keith"
-      >
+      <div className={styles.knowledgeBase}>
         <span>Knowledge Size</span>
         <br />
         <div className={styles.ticker}>
           <NumberTicker value={size ? +size : null} />
           <span>CKBytes</span>
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            href="https://talk.nervos.org/t/how-to-get-the-average-occupied-bytes-per-live-cell-in-ckb/7138/2?u=keith"
+          >
+            <InfoCircledIcon color="white" />
+          </a>
         </div>
-      </a>
+      </div>
     </div>
   )
 }