06_react/uebungen/u06_badge/src/App.jsx

@@ -1,12 +1,18 @@
+import Badge from './components/Badge';
+import ProductList from './components/ProductList';
+
 function App() {
   return (
     <main>
       <div className="container py-5">
         <h1>Badges</h1>
-        {/* <Badge text="Neu" variant="success" />
+        <Badge text="Neu" variant="success" />
         <Badge text="Oh oh" variant="danger" />
         <Badge text="new idea" variant="info" />
-        <Badge text="Rabatt" variant="warning" /> */}
+        <Badge text="Rabatt" variant="warning" />
+        <br />
+        <h2>Product List</h2>
+        <ProductList />
       </div>
     </main>
   );

06_react/uebungen/u06_badge/src/components/Badge.jsx

@@ -0,0 +1,7 @@
+const Badge = (props) => {
+  const { text = '', variant = 'secondary' } = props;
+
+  return <span className={`badge text-bg-${variant} m-1`}>{text}</span>;
+};
+
+export default Badge;

06_react/uebungen/u06_badge/src/components/ProductList.jsx

@@ -9,6 +9,10 @@ const ProductList = (props) => {
       <ProductListItem title="Product 2" price={20}>
         Ipsum lorem
       </ProductListItem>
+      <ProductListItem title="Product 2">Ipsum lorem</ProductListItem>
+      <ProductListItem title="Product 2" price={20}>
+        Ipsum lorem
+      </ProductListItem>
     </ul>
   );
 };

06_react/uebungen/u06_badge/src/components/ProductListItem.jsx

@@ -1,6 +1,8 @@
 // Übung 5: Erweiterung der ProductListItem-Komponente
 // Passe die ProductListItem-Komponente wie folgt an:
 
+import Badge from './Badge';
+
 // Erweitere die ProductListItem-Komponente um ein weiteres Prop namens description, so dass der Produktbeschreibungstext entweder über das description-Prop oder als Kind-Komponente übergeben werden kann.
 
 // Verwende das description-Prop, um den Beschreibungstext anzuzeigen, wenn er übergeben wird.
@@ -8,8 +10,20 @@
 // Erweitere die Komponente um eine optionale Prop namens price, um den Preis des Produkts übergeben und anzuzeigen.
 
 const ProductListItem = (props) => {
-  // const { } = props;
+  const { title, children, description, price = 0 } = props;
 
-  return <></>;
+  return (
+    <li className="list-group-item list-item-product">
+      <h3>{title}</h3>
+      <p>{children || description}</p>
+      {price ? (
+        <span className="price">
+          <strong>Price:</strong> <Badge text={price.toFixed(2)} variant="dark" />
+        </span>
+      ) : (
+        ''
+      )}
+    </li>
+  );
 };
 export default ProductListItem;