fix: button component with asChild (#162)

* fix: `asChild` prop for button * fix: remove ts-expect-error for href button
RSSNext · Jul 28, 2024 · 984d2de · 984d2de
1 parent 3681810
commit 984d2de
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 9 deletions.
diff --git a/src/renderer/src/components/ui/button/index.tsx b/src/renderer/src/components/ui/button/index.tsx
@@ -1,4 +1,4 @@
-import { Slot } from "@radix-ui/react-slot"
+import { Slot, Slottable } from "@radix-ui/react-slot"
 import { stopPropagation } from "@renderer/lib/dom"
 import { cn } from "@renderer/lib/utils"
 import type { VariantProps } from "class-variance-authority"
@@ -55,7 +55,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         {isLoading && (
           <i className="i-mgc-loading-3-cute-re mr-2 animate-spin" />
         )}
-        {props.children}
+        <Slottable>{props.children}</Slottable>
       </Comp>
     )
   },
@@ -72,6 +72,7 @@ interface ActionButtonProps {
   active?: boolean
   shortcut?: string
   as?: keyof React.JSX.IntrinsicElements
+  asChild?: boolean
 }
 
 export const ActionButton = React.forwardRef<
@@ -89,6 +90,7 @@ export const ActionButton = React.forwardRef<
       active,
       shortcut,
       as,
+      asChild,
     },
     ref,
   ) => {
@@ -107,6 +109,7 @@ export const ActionButton = React.forwardRef<
           <TooltipTrigger asChild>
             <Button
               as={as}
+              asChild={asChild}
               ref={buttonRef}
               // @see https://github.com/radix-ui/primitives/issues/2248#issuecomment-2147056904
               onFocusCapture={stopPropagation}

diff --git a/src/renderer/src/modules/settings/tabs/about.tsx b/src/renderer/src/modules/settings/tabs/about.tsx
@@ -94,17 +94,16 @@ export const SettingAbout = () => (
       <div className="mt-2 flex flex-wrap gap-2">
         {SocialMediaLinks.map((link) => (
           <Button
-            as="a"
+            asChild
             key={link.url}
             variant="outline"
             className="flex flex-1 cursor-pointer items-center gap-2"
-            // @ts-expect-error
-            href={link.url}
-            target="_blank"
-            rel="noreferrer"
+
           >
-            <i className={link.icon} />
-            {link.label}
+            <a href={link.url} target="_blank" rel="noreferrer">
+              <i className={link.icon} />
+              {link.label}
+            </a>
           </Button>
         ))}
       </div>