comicbox/components/Banner.tsx

import { ReactNode } from 'react';

type Style = 'error' | 'warning' | 'info';

interface Props {
    children: ReactNode;
    style: Style;
}

const COLOUR_MAP: { [P in Style]: string } = {
    info: 'bg-blue-400 border-blue-600',
    error: 'bg-red-900 border-red-700',
    warning: 'bg-orange-900 border-orange-700',
};

export default function Banner(props: Props) {
    return (
        <div className={'border-2 rounded-lg p-3 ' + COLOUR_MAP[props.style]}>
            {props.children}
        </div>
    );
}