2026-10-23 10:41:47 +02:00
parent 62b63ff196
commit 7489f4288c
16 changed files with 10144 additions and 18 deletions
@@ -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>
  );
@@ -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;