aswi20220x00-gitlab/webapp/components/common/ABadge.tsx @ c3b99cdb

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>
    );
}