🔧 Refactor Badge into its own base component

nest_frontend/components/base/Badge.js

@@ -0,0 +1,28 @@
+import React from "react"
+import Style from "./Badge.module.css"
+import classNames from "classnames"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import ButtonSmallX from "./ButtonSmallX"
+
+
+export default function Badge({ icon, color, onClickDelete, children, className, ...props }) {
+    return (
+        <div className={classNames(Style.Badge, Style[`Badge${color}`], className)} {...props}>
+            <div className={Style.Icon}>
+                <FontAwesomeIcon icon={icon}/>
+            </div>
+            <div className={Style.Text}>
+                {children}
+            </div>
+            {
+                onClickDelete ?
+                    <div>
+                        <ButtonSmallX
+                            onClick={onClickDelete}
+                        />
+                    </div>
+                : null
+            }
+        </div>
+    )
+}

nest_frontend/components/base/Badge.module.css

@@ -0,0 +1,38 @@
+.Badge {
+    display: inline-flex;
+
+    gap: 5px;
+    padding: 0 5px;
+    border-radius: 25px;
+    margin: 0 2px;
+}
+
+.BadgeRed {
+    background-color: var(--bg-red);
+    color: var(--fg-red)
+}
+
+.BadgeYellow {
+    background-color: var(--bg-yellow);
+    color: var(--fg-yellow)
+}
+
+.BadgeGrey {
+    background-color: var(--bg-grey);
+    color: var(--fg-grey)
+}
+
+.BadgeGreen {
+    background-color: var(--bg-green);
+    color: var(--fg-green)
+}
+
+.Text {
+    max-width: 350px;
+    overflow-x: hidden;
+}
+
+.Icon {
+    width: 15px;
+    text-align: center;
+}

nest_frontend/components/interactive/BadgeCondition.js

@@ -1,10 +1,11 @@
 import React, { useContext } from "react"
-import Style from "./ConditionBadge.module.css"
+import Style from "./BadgeCondition.module.css"
 import classNames from "classnames"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import ButtonSmallX from "../base/ButtonSmallX"
 import { faAt, faClock, faGlobe, faHashtag, faMapPin } from "@fortawesome/free-solid-svg-icons"
 import ContextRepositoryEditor from "../../contexts/ContextRepositoryEditor"
+import Badge from "../base/Badge"
 
 
 const CONDITION_COLORS = {
@@ -32,7 +33,7 @@ const CONDITION_ICONS = {
  * @returns {JSX.Element}
  * @constructor
  */
-export default function ConditionBadge({ ...condition }) {
+export default function BadgeCondition({ ...condition }) {
     const { id, type, content } = condition
     const color = CONDITION_COLORS[type]
     const icon = CONDITION_ICONS[type]
@@ -53,24 +54,16 @@ export default function ConditionBadge({ ...condition }) {
     }
 
     return (
-        <div
+        <Badge
             title={id ? `💠 Condition ID: ${id}` : "✨ New Condition"}
-            className={classNames(Style.ConditionBadge, Style[`ConditionBadge${color}`])}
+            color={color}
+            icon={icon}
+            onClickDelete={() => {
+                console.debug(`Removing Condition: `, condition)
+                removeRawCondition(condition)
+            }}
         >
-            <div className={Style.Icon}>
+            {displayedContent}
-                <FontAwesomeIcon icon={icon}/>
+        </Badge>
-            </div>
-            <div className={Style.Text}>
-                {displayedContent}
-            </div>
-            <div>
-                <ButtonSmallX
-                    onClick={() => {
-                        console.debug(`Removing Condition: `, condition)
-                        removeRawCondition(condition)
-                    }}
-                />
-            </div>
-        </div>
     )
 }

nest_frontend/components/interactive/BoxConditions.js

@@ -1,12 +1,12 @@
 import React, { useContext } from "react"
 import BoxFull from "../base/BoxFull"
-import ConditionBadge from "./ConditionBadge"
+import BadgeCondition from "./BadgeCondition"
 import useRepositoryEditor from "../../hooks/useRepositoryEditor"
 import ContextLanguage from "../../contexts/ContextLanguage"
 
 
 /**
- * A box which renders all conditions of the {@link RepositoryEditor} as {@link ConditionBadge}s.
+ * A box which renders all conditions of the {@link RepositoryEditor} as {@link BadgeCondition}s.
  *
  * @param props
  * @returns {JSX.Element}
@@ -16,7 +16,7 @@ export default function BoxConditions({ ...props }) {
     const { conditions } = useRepositoryEditor()
     const { strings } = useContext(ContextLanguage)
 
-    const badges = conditions.map((cond, pos) => <ConditionBadge key={pos} {...cond}/>)
+    const badges = conditions.map((cond, pos) => <BadgeCondition key={pos} {...cond}/>)
 
     return (
         <BoxFull header={strings.conditions} {...props}>