fix(connect-explorer): Button as Link not working

trezor · Sep 27, 2024 · 76e6c1d · 76e6c1d
1 parent 862fbad
commit 76e6c1d
Showing 1 changed file with 41 additions and 35 deletions.
diff --git a/packages/connect-explorer/src/pages/index.mdx b/packages/connect-explorer/src/pages/index.mdx
@@ -137,16 +137,17 @@ export const ExampleHeading = styled.h3`
         <IconNode />
         <SdkName>Node.js</SdkName>
         <SdkTag></SdkTag>
+        <Link href="/readme/connect" passHref legacyBehavior>
+            <Button
+                variant="tertiary"
+                size="small"
+                icon="bookOpenText"
+                target="_self"
+                href="#">
+                README
+            </Button>
+        </Link>
         <Button
-            as={Link}
-            variant="tertiary"
-            size="small"
-            icon="bookOpenText"
-            href="/readme/connect">
-            README
-        </Button>
-        <Button
-            as="a"
             variant="tertiary"
             size="small"
             icon="github"
@@ -232,14 +233,16 @@ export const ExampleHeading = styled.h3`
         <IconWeb />
         <SdkName>Web</SdkName>
         <SdkTag>DOM required</SdkTag>
-        <Button
-            as={Link}
-            variant="tertiary"
-            size="small"
-            icon="bookOpenText"
-            href="/readme/connect-web">
-            README
-        </Button>
+        <Link href="/readme/connect-web" passHref legacyBehavior>
+            <Button
+                variant="tertiary"
+                size="small"
+                icon="bookOpenText"
+                target="_self"
+                href="#">
+                README
+            </Button>
+        </Link>
         <Button
             as="a"
             variant="tertiary"
@@ -364,14 +367,16 @@ export const ExampleHeading = styled.h3`
         <IconExtension />
         <SdkName>Web extension</SdkName>
         <SdkTag>Using service worker</SdkTag>
-        <Button
-            as={Link}
-            variant="tertiary"
-            size="small"
-            icon="bookOpenText"
-            href="/readme/connect-webextension">
-            README
-        </Button>
+        <Link href="/readme/connect-webextension" passHref legacyBehavior>
+            <Button
+                variant="tertiary"
+                size="small"
+                icon="bookOpenText"
+                target="_self"
+                href="#">
+                README
+            </Button>
+        </Link>
         <Button
             as="a"
             variant="tertiary"
@@ -397,16 +402,17 @@ export const ExampleHeading = styled.h3`
             allowing secure connection to Trezor hardware wallets.
             By the end, you'll have a fully functional web extension.
 
-            <Button
-                as={Link}
-                variant="tertiary"
-                className="nx-mt-4 nx-mb-8"
-                size="small"
-                icon="bookOpenText"
-                target="_self"
-                href="/guides/webextension-implementation-tutorial">
-                Open Tutorial  →
-            </Button>
+            <Link href="/guides/webextension-implementation-tutorial" passHref legacyBehavior>
+                <Button
+                    variant="tertiary"
+                    className="nx-mt-4 nx-mb-8"
+                    size="small"
+                    icon="bookOpenText"
+                    target="_self"
+                    href="#">
+                    Open Tutorial  →
+                </Button>
+            </Link>
         </SdkDescription>
         <ExamplesAside>
             <ExampleHeading>Examples:</ExampleHeading>