comicbox/components/Banner.tsx

22 lines
516 B
TypeScript

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