From 26e341c91eabc2717139cb8d909d20b7977ee775 Mon Sep 17 00:00:00 2001
From: Alexander Kovrigin <git@alexkovrigin.me>
Date: Mon, 27 Nov 2023 21:22:59 +0100
Subject: [PATCH] Add clear input function to translation module

Introduced a "Clear" button and corresponding 'clearInput' function in TranslationModule component. This allows the user to clear the input and output content in the translation module. Also adjusted the button CSS class and re-ordered disable condition checks for better readability. Modified skeleton CSS to use em for height for better responsiveness.
---
 web/src/components/TranslationModule.tsx | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/web/src/components/TranslationModule.tsx b/web/src/components/TranslationModule.tsx
index 4211b33..f21f52b 100644
--- a/web/src/components/TranslationModule.tsx
+++ b/web/src/components/TranslationModule.tsx
@@ -42,6 +42,14 @@ export default function TranslationModule() {
     });
   }
 
+  function clearInput() {
+    inputSetValue("");
+    inputSetHighlight("");
+    outputSetValue("");
+    outputSetHighlight("");
+    setIsTranslated(false);
+  }
+
   return (
     <>
       {/* Content */}
@@ -59,11 +67,20 @@ export default function TranslationModule() {
           />
           <div className="mt-4">
             <Button
-              className="bg-primary"
+              className="primary"
               onClick={translate}
-              disabled={isTranslated || isLoading}
+              disabled={isLoading || isTranslated}
             >
               Translate
+            </Button>{" "}
+            <Button
+              variant="outline"
+              onClick={() => {
+                clearInput();
+              }}
+              disabled={inputValue === "" || (!isTranslated && isLoading)}
+            >
+              Clear
             </Button>
           </div>
         </div>
@@ -82,7 +99,7 @@ export default function TranslationModule() {
             />
           )}
           {/*  add skeleton */}
-          {isLoading && <Skeleton className={"w-full h-[200px] rounded-3"} />}
+          {isLoading && <Skeleton className={"w-full h-[13em] rounded-3"} />}
         </div>
       </div>
     </>