05_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="Mega" color="tomato" />
+        <Badge text="Mega" color="#17537b" />
       </div>
     </main>
   );

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

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