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

@@ -1,12 +1,14 @@
+import Badge from './components/Badge';
+
 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" />
       </div>
     </main>
   );

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

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

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

@@ -1,15 +0,0 @@
-import ProductListItem from './ProductListItem';
-
-const ProductList = (props) => {
-  // const { } = props;
-
-  return (
-    <ul className="m-list-products list-group">
-      <ProductListItem title="Product 1" description="lorem ipsum" price={10} />
-      <ProductListItem title="Product 2" price={20}>
-        Ipsum lorem
-      </ProductListItem>
-    </ul>
-  );
-};
-export default ProductList;

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

@@ -1,15 +0,0 @@
-// Übung 5: Erweiterung der ProductListItem-Komponente
-// Passe die ProductListItem-Komponente wie folgt an:
-
-// 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.
-
-// Erweitere die Komponente um eine optionale Prop namens price, um den Preis des Produkts übergeben und anzuzeigen.
-
-const ProductListItem = (props) => {
-  // const { } = props;
-
-  return <></>;
-};
-export default ProductListItem;