🚧 Add components ConditionBadge.js and ButtonSmallX.js

Documentation is missing

code/frontend/src/components/ButtonSmallX.js

@@ -0,0 +1,14 @@
+import React from "react"
+import Style from "./ButtonSmallX.module.css"
+import classNames from "classnames"
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
+import { faTimes } from "@fortawesome/free-solid-svg-icons"
+
+
+export default function ButtonSmallX({ children, className, ...props }) {
+    return (
+        <button type={"button"} className={classNames(Style.ButtonSmallX, className)} {...props}>
+            <FontAwesomeIcon icon={faTimes}/>
+        </button>
+    )
+}

code/frontend/src/components/ButtonSmallX.module.css

@@ -0,0 +1,23 @@
+.ButtonSmallX {
+    border-width: 0;
+    border-radius: 9999px;
+    line-height: 0;
+    height: 18px;
+    width: 18px;
+    vertical-align: baseline;
+    background-color: var(--bg-field-off);
+    color: var(--fg-field-off);
+    cursor: pointer;
+    position: relative;
+    top: -1px;
+}
+
+.ButtonSmallX:focus {
+    outline: none;
+    background-color: var(--bg-field-on);
+    color: var(--fg-field-on);
+}
+
+.ButtonSmallX:focus-visible {
+    outline: 2px dashed var(--outline);
+}

code/frontend/src/components/ConditionBadge.js

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

code/frontend/src/components/ConditionBadge.module.css

@@ -0,0 +1,33 @@
+.ConditionBadge {
+    display: inline-flex;
+
+    gap: 5px;
+    padding: 0 5px;
+    border-radius: 25px;
+    margin: 0 2px;
+}
+
+.ConditionBadgeRed {
+    background-color: var(--bg-red);
+    color: var(--fg-red)
+}
+
+.ConditionBadgeYellow {
+    background-color: var(--bg-yellow);
+    color: var(--fg-yellow)
+}
+
+.ConditionBadgeGrey {
+    background-color: var(--bg-grey);
+    color: var(--fg-grey)
+}
+
+.ConditionBadgeGreen {
+    background-color: var(--bg-green);
+    color: var(--fg-green)
+}
+
+.Icon {
+    width: 15px;
+    text-align: center;
+}