uiowaATR/src/components/notice.tsx
2023-08-24 10:13:05 -05:00

32 lines
841 B
TypeScript

import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
export const ErrorNotice = ({
header,
body,
icon,
}: {
header?: string;
body?: string;
icon?: boolean;
}) => {
return (
<>
{header ? (
<div className="mx-auto w-fit rounded-xl border border-red-300 bg-red-100 px-4 py-4 text-center font-semibold text-red-600">
{icon ? (
<div className="mx-auto grid place-items-center">
<ExclamationTriangleIcon className="h-10 w-10" />
</div>
) : undefined}
<span className="text-lg font-semibold text-red-500">{header}</span>
{body ? (
<p className="mx-8 my-2 text-sm font-normal text-stone-600">
{body}
</p>
) : undefined}
</div>
) : undefined}
</>
);
};