use ButtonLink instead of Button+navigate

buildo · Sep 25, 2023 · 1f283a7 · 1f283a7
1 parent ef6cbfe
commit 1f283a7
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 13 deletions.
diff --git a/packages/configuration-builder/src/ColorsSection/SectionCompleted.tsx b/packages/configuration-builder/src/ColorsSection/SectionCompleted.tsx
@@ -1,29 +1,26 @@
-import { Button, Feedback, Inline, Stack } from "@buildo/bento-design-system";
+import { ButtonLink, Feedback, Inline, Stack } from "@buildo/bento-design-system";
 import { useTranslation } from "react-i18next";
 import { IconConfetti } from "../PhosphorIcons";
-import { useNavigate } from "react-router-dom";
 
 export function SectionCompleted() {
-  const navigate = useNavigate();
-
   const { t } = useTranslation();
   return (
     <Stack space={40} align="center">
       <Feedback size="large" title={t("ColorsSection.completed")} icon={IconConfetti} />
       <Inline space={16}>
-        <Button
+        <ButtonLink
           size="large"
           kind="solid"
           hierarchy="secondary"
           label={t("ColorsSection.returnToMyTheme")}
-          onPress={() => navigate("/theme")}
+          href="/theme"
         />
-        <Button
+        <ButtonLink
           size="large"
           kind="solid"
           hierarchy="primary"
           label={t("ColorsSection.goToTypography")}
-          onPress={() => navigate("/theme/typography")}
+          href="/theme/typography"
         />
       </Inline>
     </Stack>

diff --git a/packages/configuration-builder/src/Home.tsx b/packages/configuration-builder/src/Home.tsx
@@ -1,11 +1,17 @@
-import { Body, Button, Columns, Display, Inline, Stack, Inset } from "@buildo/bento-design-system";
+import {
+  Body,
+  Columns,
+  Display,
+  Inline,
+  Stack,
+  Inset,
+  ButtonLink,
+} from "@buildo/bento-design-system";
 import { useTranslation } from "react-i18next";
 import Cover from "./assets/Cover.svg";
-import { useNavigate } from "react-router-dom";
 
 export function Home() {
   const { t } = useTranslation();
-  const navigate = useNavigate();
 
   return (
     <Inset spaceX={120} spaceY={80}>
@@ -16,11 +22,11 @@ export function Home() {
             <Body size="large">{t("App.description")}</Body>
           </Stack>
           <Inline space={0}>
-            <Button
+            <ButtonLink
               kind="solid"
               hierarchy="primary"
               size="large"
-              onPress={() => navigate("/theme")}
+              href="/theme"
               label={t("Home.createTheme")}
             />
           </Inline>