2026-10-23 14:31:45 +02:00
parent 4a81288194
commit 4036beca67
1237 changed files with 120735 additions and 10 deletions
@@ -0,0 +1,53 @@
+import { useState } from 'react';
+import { FaDollarSign, FaEuroSign, FaYenSign } from 'react-icons/fa6';
+
+const isValidPrice = (value) => {
+  const regex = new RegExp(/^\d*(\.\d{0,2})?$/);
+  return regex.test(value);
+};
+
+const InputPrice = (props) => {
+  const { currency = '$' } = props;
+
+  const [price, setPrice] = useState(0);
+
+  //Evenhandler
+  const handleChange = (e) => {
+    // console.log(`Preis: ${e.target.value}`);
+    // console.log('RegEx: ', isValidPrice(e.target.value));
+    setPrice(e.target.value);
+  };
+
+  return (
+    <div className="m-input-price input-price">
+      <div className="input-group mb-3">
+        {currency === '$' && (
+          <span className="input-group-text">
+            <FaDollarSign />
+          </span>
+        )}
+        <input
+          type="number"
+          name="price"
+          placeholder="0.00"
+          aria-label="Price"
+          className={`form-control input-price ${!isValidPrice(price) ? 'is-invalid' : 'is-valid'}`}
+          step="0.01"
+          value={price}
+          onChange={handleChange}
+        />
+        {currency === '€' && (
+          <span className="input-group-text">
+            <FaEuroSign />
+          </span>
+        )}
+        {currency === '¥' && (
+          <span className="input-group-text">
+            <FaYenSign />
+          </span>
+        )}
+      </div>
+    </div>
+  );
+};
+export default InputPrice;