Revize 3df63288

Custom badge component added

webapp/components/common/ABadge.tsx

@@ +1 @@
+import { ReactNode } from 'react';
+import {
+    BORDER_RADIUS,
+    COLOR_ERROR,
+    COLOR_GENERAL,
+    COLOR_SUCCESS,
+    COLOR_WARNING,
+} from '../../constants';
+
+export enum BadgeStyle {
+    GENERAL,
+    SUCCESS,
+    WARNING,
+    ERROR,
+}
+
+export interface BadgeProps {
+    style: BadgeStyle;
+    children: ReactNode | ReactNode[];
+}
+
+export function ABadge(props: BadgeProps) {
+    function getBackgroundColor() {
+        switch (props.style) {
+            case BadgeStyle.GENERAL:
+                return COLOR_GENERAL;
+            case BadgeStyle.ERROR:
+                return COLOR_ERROR;
+            case BadgeStyle.SUCCESS:
+                return COLOR_SUCCESS;
+            case BadgeStyle.WARNING:
+                return COLOR_WARNING;
+        }
+    }
+
+    return (
+        <span
+            style={{
+                backgroundColor: getBackgroundColor(),
+                color: 'white',
+                padding: '5px',
+                borderRadius: BORDER_RADIUS,
+            }}
+        >
+            {props.children}
+        </span>
+    );
+}

webapp/constants.ts

@@ +1 @@
+export const COLOR_GENERAL = 'gray';
+export const COLOR_SUCCESS = 'darkgreen';
+export const COLOR_WARNING = 'darkorange';
+export const COLOR_ERROR = 'indianred';
+
+export const BORDER_RADIUS = 4;