From 1f8c6e0c5bc262b7c8e280dce11fd20b34d6e3a0 Mon Sep 17 00:00:00 2001
From: Jun-te Kim <junte.kim@mealcraft.com>
Date: Mon, 19 Jan 2026 13:43:58 +0000
Subject: [PATCH] button fix

---
 src/app/components/signin/Button.tsx | 21 +++++++++------------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/src/app/components/signin/Button.tsx b/src/app/components/signin/Button.tsx
index 2159c777..6f9c4fff 100644
--- a/src/app/components/signin/Button.tsx
+++ b/src/app/components/signin/Button.tsx
@@ -2,6 +2,7 @@
 
 import { ReactNode, forwardRef } from "react";
 import clsx from "clsx";
+import type { ComponentPropsWithoutRef } from "react";
 
 const baseStyles = {
   solid:
@@ -39,27 +40,23 @@ const variantStyles: VariantStylesType = {
 };
 
 type ButtonInput = {
-  variant: "solid" | "outline";
+  variant?: "solid" | "outline";
   color: "cyan" | "white" | "gray";
-  href: string;
-} & JSX.IntrinsicElements["button"];
+  href?: string;
+} & ComponentPropsWithoutRef<"button">;
 
-interface Props {
-  children?: ReactNode;
-}
 export type Ref = HTMLButtonElement;
 
-// write me a forwardRef to use the Button component
 const Button = forwardRef<Ref, ButtonInput>(
-  ({ variant = "solid", color, className, href, ...props }, ref) => {
-    className = clsx(
+  ({ variant = "solid", color, className, ...props }, ref) => {
+    const classes = clsx(
       baseStyles[variant],
       variantStyles[variant][color],
-      className
+      className,
     );
 
-    return <button ref={ref} className={className} {...props} />;
-  }
+    return <button ref={ref} className={classes} {...props} />;
+  },
 );
 
 Button.displayName = "Button";