From e2c32ad9c35333b8969d67bb0648732de8120489 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Tue, 18 May 2021 16:23:54 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Refactor=20Badge=20into=20its=20?=
 =?UTF-8?q?own=20base=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nest_frontend/components/base/Badge.js        | 28 ++++++++++++++
 .../components/base/Badge.module.css          | 38 +++++++++++++++++++
 .../{ConditionBadge.js => BadgeCondition.js}  | 31 ++++++---------
 ...e.module.css => BadgeCondition.module.css} |  0
 .../components/interactive/BoxConditions.js   |  6 +--
 5 files changed, 81 insertions(+), 22 deletions(-)
 create mode 100644 nest_frontend/components/base/Badge.js
 create mode 100644 nest_frontend/components/base/Badge.module.css
 rename nest_frontend/components/interactive/{ConditionBadge.js => BadgeCondition.js} (70%)
 rename nest_frontend/components/interactive/{ConditionBadge.module.css => BadgeCondition.module.css} (100%)

diff --git a/nest_frontend/components/base/Badge.js b/nest_frontend/components/base/Badge.js
new file mode 100644
index 0000000..c339860
--- /dev/null
+++ b/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>
+    )
+}
diff --git a/nest_frontend/components/base/Badge.module.css b/nest_frontend/components/base/Badge.module.css
new file mode 100644
index 0000000..087d8ce
--- /dev/null
+++ b/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;
+}
diff --git a/nest_frontend/components/interactive/ConditionBadge.js b/nest_frontend/components/interactive/BadgeCondition.js
similarity index 70%
rename from nest_frontend/components/interactive/ConditionBadge.js
rename to nest_frontend/components/interactive/BadgeCondition.js
index 973cede..40c40d0 100644
--- a/nest_frontend/components/interactive/ConditionBadge.js
+++ b/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}>
-                <FontAwesomeIcon icon={icon}/>
-            </div>
-            <div className={Style.Text}>
-                {displayedContent}
-            </div>
-            <div>
-                <ButtonSmallX
-                    onClick={() => {
-                        console.debug(`Removing Condition: `, condition)
-                        removeRawCondition(condition)
-                    }}
-                />
-            </div>
-        </div>
+            {displayedContent}
+        </Badge>
     )
 }
diff --git a/nest_frontend/components/interactive/ConditionBadge.module.css b/nest_frontend/components/interactive/BadgeCondition.module.css
similarity index 100%
rename from nest_frontend/components/interactive/ConditionBadge.module.css
rename to nest_frontend/components/interactive/BadgeCondition.module.css
diff --git a/nest_frontend/components/interactive/BoxConditions.js b/nest_frontend/components/interactive/BoxConditions.js
index 92bf5cd..91ab66d 100644
--- a/nest_frontend/components/interactive/BoxConditions.js
+++ b/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}>