misc_pterodactyl-panel/resources/scripts/components/elements/alert/Alert.tsx

32 lines
993 B
TypeScript
Raw Normal View History

2022-07-02 22:53:03 +00:00
import { ExclamationIcon, ShieldExclamationIcon } from '@heroicons/react/outline';
import React from 'react';
import classNames from 'classnames';
interface AlertProps {
2022-07-02 22:53:03 +00:00
type: 'warning' | 'danger';
className?: string;
children: React.ReactNode;
}
2022-07-02 22:53:03 +00:00
export default ({ type, className, children }: AlertProps) => {
return (
<div
className={classNames(
2022-07-02 22:53:03 +00:00
'flex items-center border-l-8 text-gray-50 rounded-md shadow px-4 py-3',
{
['border-red-500 bg-red-500/25']: type === 'danger',
['border-yellow-500 bg-yellow-500/25']: type === 'warning',
},
className
)}
>
2022-07-02 22:53:03 +00:00
{type === 'danger' ? (
<ShieldExclamationIcon className={'w-6 h-6 text-red-400 mr-2'} />
) : (
<ExclamationIcon className={'w-6 h-6 text-yellow-500 mr-2'} />
)}
{children}
</div>
);
};