05_react/uebungen/u10_input-price/package-lock.json

@@ -1,16 +1,17 @@
 {
-  "name": "02_reusable-components",
+  "name": "u10_input-price",
   "version": "0.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "02_reusable-components",
+      "name": "u10_input-price",
       "version": "0.0.0",
       "dependencies": {
         "bootstrap": "^5.3.8",
         "react": "^19.2.8",
-        "react-dom": "^19.2.8"
+        "react-dom": "^19.2.8",
+        "react-icons": "^5.7.0"
       },
       "devDependencies": {
         "@types/react": "^19.2.17",
@@ -1622,6 +1623,15 @@
         "react": "^19.2.8"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.7.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.7.0.tgz",
+      "integrity": "sha512-LBLy340Rzqy6+/yVhZKT3B/QpP1BZaesGqasf09HPOBzRarcDIFH0WwXlXQfE7q7ipxK4MSiC5DIBWURCny6fw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/readdirp": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.1.1.tgz",

05_react/uebungen/u10_input-price/package.json

@@ -12,7 +12,8 @@
   "dependencies": {
     "bootstrap": "^5.3.8",
     "react": "^19.2.8",
-    "react-dom": "^19.2.8"
+    "react-dom": "^19.2.8",
+    "react-icons": "^5.7.0"
   },
   "devDependencies": {
     "@types/react": "^19.2.17",

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;
+  }
+}