06_react/linksammlung.md

@@ -88,3 +88,5 @@
 - [JS CheatSheet](https://dev.to/devsmitra/28-javascript-array-hacks-a-cheat-sheet-for-developer-5769)
 
 - Tipp10
+
+https://stackshare.io/stacks

06_react/uebungen/u05_product-list/src/components/ProductList.jsx

@@ -7,7 +7,13 @@ const ProductList = (props) => {
     <ul className="m-list-products list-group">
       <ProductListItem title="Product 1" description="lorem ipsum" price={10} />
       <ProductListItem title="Product 2" price={20}>
-        Ipsum lorem
+        adipisicing elit. Voluptas commodi, praesentium vel placeat dolorum vero quia unde? Maxime, at quidem.
+      </ProductListItem>
+      <ProductListItem title="Product 2">
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, officiis.
+      </ProductListItem>
+      <ProductListItem title="Product 2" price={30}>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, officiis.
       </ProductListItem>
     </ul>
   );

06_react/uebungen/u05_product-list/src/components/ProductListItem.jsx

@@ -1,7 +1,13 @@
 const ProductListItem = (props) => {
-  // const { } = props;
+  const { description, price, children } = props;
 
-  return <></>;
+  return (
+    <li className="list-group-item">
+      {children || description}
+      <br />
+      {price ? `Jetzt nur ${price}€!` : ''}
+    </li>
+  );
 };
 export default ProductListItem;
 // Übung 5: Erweiterung der ProductListItem-Komponente

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;

06_react/uebungen/u07_product-list-2/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/u07_product-list-2/src/components/ProductListItem.jsx

@@ -1,7 +1,22 @@
-const ProductListItem = (props) => {
+import Badge from './Badge';
-  // const { } = props;
 
-  return <></>;
+const ProductListItem = (props) => {
+  const { title, children, description, price = 0 } = props;
+
+  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={price <= 10 ? 'success' : 'secondary'} />
+        </span>
+      ) : (
+        ''
+      )}
+    </li>
+  );
 };
 export default ProductListItem;
 

06_react/uebungen/u08_badge-2/src/App.jsx

@@ -1,12 +1,16 @@
+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" />
+        <Badge text="Rabatt" color="#0f0f0f" />
+        <Badge text="Achtung" color="orange" />
       </div>
     </main>
   );

06_react/uebungen/u08_badge-2/src/components/Badge.jsx

@@ -0,0 +1,22 @@
+const Badge = (props) => {
+  const { text = '', variant = 'secondary', color } = props;
+  // const inline = typeof color !== 'undefined' ? { backgroundColor: color } : '';
+
+  // if (color) {
+  //   return (
+  //     <span className="badge m-1" style={{ backgroundColor: color }}>
+  //       {text}
+  //     </span>
+  //   );
+  // } else {
+  //   return <span className={`badge text-bg-${variant} m-1`}>{text}</span>;
+  // }
+
+  return (
+    <span className={`badge ${!color ? `text-bg-${variant}` : ''} m-1`} style={{ backgroundColor: color }}>
+      {text}
+    </span>
+  );
+};
+
+export default Badge;

06_react/unterricht/tag34/02_product-list-ar/src/components/ProductList.jsx

@@ -5,12 +5,13 @@ const ProductList = (props) => {
 
   return (
     <ul className="list list-group list-products">
-      {products.map((product, idx) => {
+      {products.length > 0 &&
-        return <ProductListItem key={`product-list-item-${idx}`} {...product} />;
+        products.map((product, idx) => (
+          <ProductListItem key={`product-list-item-${idx}`} {...product} />
           // return (
           //   <ProductListItem key={`product-list-item-${idx}`} title={product.title} description={product.description} />
           // );
-      })}
+        ))}
     </ul>
   );
 };