05_react/uebungen/u10_input-price/src/App.jsx

@@ -1,4 +1,5 @@
 import InputAmount from './components/inputs/InputAmount';
+import InputPrice from './components/inputs/InputPrice';
 
 function App(props) {
   // const { } = props;
@@ -6,6 +7,10 @@ function App(props) {
   return (
     <div className="container py-5">
       <InputAmount />
+      <InputPrice />
+      <InputPrice currency="€" price={10.5} />
+      <InputPrice currency="$" price={19.5} />
+      <InputPrice currency="¥" price={21.5} />
     </div>
   );
 }

05_react/uebungen/u10_input-price/src/components/inputs/InputPrice.jsx

@@ -0,0 +1,36 @@
+import { FaDollarSign, FaEuroSign, FaYenSign } from 'react-icons/fa6';
+
+const InputPrice = (props) => {
+  const { currency = '$' } = props;
+
+  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"
+          step="0.01"
+        />
+        {currency === '€' && (
+          <span className="input-group-text">
+            <FaEuroSign />
+          </span>
+        )}
+        {currency === '¥' && (
+          <span className="input-group-text">
+            <FaYenSign />
+          </span>
+        )}
+      </div>
+    </div>
+  );
+};
+export default InputPrice;

05_react/uebungen/u10_input-price/src/styles/05_modules/_index.scss

@@ -5,3 +5,4 @@
 // @import 'product-manager';
 @import 'button';
 @import 'inputAmount';
+@import 'inputPrice';

05_react/uebungen/u10_input-price/src/styles/05_modules/_inputPrice.scss

@@ -0,0 +1,6 @@
+.m-input-price {
+  max-width: 200px;
+  input {
+    text-align: center;
+  }
+}