30 lines
1.1 KiB
TypeScript
30 lines
1.1 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import { CheckIcon, ExclamationIcon, InformationCircleIcon, ShieldExclamationIcon } from '@heroicons/react/outline';
|
||
|
|
import classNames from 'classnames';
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
type: 'danger' | 'info' | 'success' | 'warning';
|
||
|
|
className?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default ({ type, className }: Props) => {
|
||
|
|
const [ Component, styles ] = (function (): [ (props: React.ComponentProps<'svg'>) => JSX.Element, string ] {
|
||
|
|
switch (type) {
|
||
|
|
case 'danger':
|
||
|
|
return [ ShieldExclamationIcon, 'bg-red-500 text-red-50' ];
|
||
|
|
case 'warning':
|
||
|
|
return [ ExclamationIcon, 'bg-yellow-600 text-yellow-50' ];
|
||
|
|
case 'success':
|
||
|
|
return [ CheckIcon, 'bg-green-600 text-green-50' ];
|
||
|
|
case 'info':
|
||
|
|
return [ InformationCircleIcon, 'bg-primary-500 text-primary-50' ];
|
||
|
|
}
|
||
|
|
})();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={classNames('flex items-center justify-center w-10 h-10 rounded-full', styles, className)}>
|
||
|
|
<Component className={'w-6 h-6'}/>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|