ButtonLink: extended component as Link (#184)

Closes: #180 Extended `buttonLink` component to handling the href prop, eg. as Link component
thesis · Jan 26, 2024 · 04b1eb1 · 04b1eb1
2 parents 3b0662e + a163c9d
commit 04b1eb1
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 5 deletions.
diff --git a/dapp/src/components/shared/ButtonLink/index.tsx b/dapp/src/components/shared/ButtonLink/index.tsx
@@ -1,11 +1,12 @@
 import React from "react"
-import { Button, ButtonProps, Icon } from "@chakra-ui/react"
+import { Button, ButtonProps, Icon, Link, LinkProps } from "@chakra-ui/react"
 import { ArrowUpRight } from "#/assets/icons"
 
-type ButtonLinkProps = ButtonProps & {
-  icon?: typeof Icon
-  iconColor?: string
-}
+type ButtonLinkProps = ButtonProps &
+  LinkProps & {
+    icon?: typeof Icon
+    iconColor?: string
+  }
 
 export default function ButtonLink({
   children,
@@ -16,6 +17,7 @@ export default function ButtonLink({
 }: ButtonLinkProps) {
   return (
     <Button
+      as={Link}
       variant={variant}
       justifyContent="flex-start"
       leftIcon={

diff --git a/dapp/src/theme/Button.ts b/dapp/src/theme/Button.ts
@@ -55,6 +55,14 @@ export const buttonTheme: ComponentSingleStyleConfig = {
       }
       return defaultStyles
     },
+    ghost: {
+      _hover: {
+        bg: "transparent",
+      },
+      _active: {
+        bg: "transparent",
+      },
+    },
     // FIXME: It should be removed and replaced by solid/outline variants
     card: ({ colorScheme }: StyleFunctionProps) => {
       const defaultStyles = {

diff --git a/dapp/src/theme/Link.ts b/dapp/src/theme/Link.ts
@@ -0,0 +1,11 @@
+import { defineStyle, defineStyleConfig } from "@chakra-ui/react"
+
+const baseStyle = defineStyle({
+  _hover: {
+    textDecoration: "none",
+  },
+})
+
+export const linkTheme = defineStyleConfig({
+  baseStyle,
+})
diff --git a/dapp/src/theme/index.ts b/dapp/src/theme/index.ts
@@ -20,6 +20,7 @@ import { formErrorTheme } from "./FormError"
 import { tabsTheme } from "./Tabs"
 import { spinnerTheme } from "./Spinner"
 import { tableTheme } from "./Table"
+import { linkTheme } from "./Link"
 
 const defaultTheme = {
   colors,
@@ -47,6 +48,7 @@ const defaultTheme = {
     FormError: formErrorTheme,
     Heading: headingTheme,
     Input: inputTheme,
+    Link: linkTheme,
     Modal: modalTheme,
     Sidebar: sidebarTheme,
     Spinner: spinnerTheme,