From 125733468e1279884683036982dd04315b52adbb Mon Sep 17 00:00:00 2001
From: typist <git@mail.typist.cc>
Date: Thu, 30 Oct 2025 09:11:15 +0800
Subject: [PATCH] refactor: enhance currency badge interaction and styling

- Updated the Badge component to improve user interaction with currency removal.
- Enhanced styling for better visual feedback on hover and click actions.
- Simplified the removal button functionality by integrating it into the Badge component.
---
 src/components/tool/currency.tsx | 27 ++++++++++++++-------------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/components/tool/currency.tsx b/src/components/tool/currency.tsx
index 1376f6f..b447d6f 100644
--- a/src/components/tool/currency.tsx
+++ b/src/components/tool/currency.tsx
@@ -376,21 +376,22 @@ const Tool: FC = () => {
               <Badge
                 key={code}
                 variant={isRequired ? "default" : "secondary"}
-                className="gap-1 pr-1"
+                className={`relative gap-1 px-2.5 py-1 transition-all duration-200 ${
+                  !isRequired 
+                    ? "cursor-pointer hover:bg-destructive hover:text-destructive-foreground hover:border-destructive group" 
+                    : ""
+                }`}
+                onClick={() => {
+                  if (!isRequired) {
+                    removeCurrency(code);
+                  }
+                }}
               >
-                <span>{currency?.symbol} {code}</span>
+                <span className={!isRequired ? "group-hover:opacity-0 transition-opacity duration-200" : ""}>
+                  {currency?.symbol} {code}
+                </span>
                 {!isRequired && (
-                  <button
-                    type="button"
-                    className="ml-1 rounded-sm opacity-70 hover:opacity-100 hover:text-destructive transition-opacity"
-                    onClick={(e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      removeCurrency(code);
-                    }}
-                  >
-                    <X className="size-3 pointer-events-auto" />
-                  </button>
+                  <X className="absolute inset-0 m-auto size-4 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none" />
                 )}
               </Badge>
             );