indicate wrong inputs

Author: lebalz

src/components/VectorLineComparer/VectorInput.tsx

@@ -1,17 +1,28 @@
 import React from 'react';
 import styles from './styles.module.scss';
 import clsx from 'clsx';
+import { parseNumber } from './helper';
 
 interface Props {
     value: [string, string, string];
     onChange: (value: [string, string, string]) => void;
 }
 
 const VectorInput = ({ value, onChange }: Props) => {
+    const [invalidInput, setInvalidInput] = React.useState<Set<number>>(new Set());
     const handleChange = (index: number, newValue: string) => {
         const newVector = [...value] as [string, string, string];
         newVector[index] = newValue;
         onChange(newVector);
+        if (Number.isNaN(parseNumber(newValue))) {
+            setInvalidInput((prev) => new Set(prev.add(index)));
+        } else if (invalidInput.has(index)) {
+            setInvalidInput((prev) => {
+                const newSet = new Set(prev);
+                newSet.delete(index);
+                return newSet;
+            });
+        }
     };
 
     return (
@@ -24,7 +35,7 @@ const VectorInput = ({ value, onChange }: Props) => {
                             type="text"
                             value={component}
                             onChange={(e) => handleChange(index, e.target.value)}
-                            style={{ width: '50px', margin: '0 5px' }}
+                            className={clsx(styles.input, invalidInput.has(index) && styles.invalid)}
                         />
                     ))}
                 </div>
@@ -33,4 +44,4 @@ const VectorInput = ({ value, onChange }: Props) => {
     );
 };
 
-export default VectorInput;
+export default VectorInput;

src/components/VectorLineComparer/styles.module.scss

@@ -30,8 +30,15 @@
     .content {
         display: flex;
         flex-direction: column;
-        input {
+        gap: 1.1px;
+        .input {
             text-align: center;
+            width: 50px;
+            margin: 0 5px;
+            &.invalid {
+                color: var(--ifm-color-danger);
+                outline-color: var(--ifm-color-danger);
+            }
         }
     }
 }
@@ -45,20 +52,20 @@
     position: relative;
     padding-top: 5px; /* Padding to adjust the arrow over the text */
     margin-left: 15px;
+    &::before {
+        content: '→'; /* Unicode for right arrow */
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        margin: auto;
+        text-align: center;
+        font-size: 24px; /* Adjust size as needed */
+        line-height: 0; /* Removes extra space typically added by characters */
+        transform: translateX(-2px) translateY(15px);
+    }
 }
 
-.vectorText::before {
-    content: '→'; /* Unicode for right arrow */
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    margin: auto;
-    text-align: center;
-    font-size: 24px; /* Adjust size as needed */
-    line-height: 0; /* Removes extra space typically added by characters */
-    transform: translateX(-2px) translateY(15px);
-}
 .equals {
     margin: 0 10px;
 }