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.
RodionfromHSE · Nov 27, 2023 · 26e341c · 26e341c
1 parent 32b50fb
commit 26e341c
Showing 1 changed file with 20 additions and 3 deletions.
diff --git 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>
     </>