brandon/uiowaATR
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

add error notice component to resource page

Browse Source
This commit is contained in:
Brandon Egger 2023-08-24 10:13:05 -05:00
parent 9163b13e92
commit d7f5fae14a
2 changed files with 38 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/notice.tsx
View File

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

13
src/pages/resources/index.tsx
View File

@ -35,12 +35,17 @@ const Resources = () => {
if (resourceQuery.isLoading) {
return <LoadingBarChart width={200} height={200} />;
}
if (!resourceQuery.data || resourceQuery.isError) {
return <div className="my-28">
<ErrorNotice icon header="Unable to pull available resources. Please try again."
body="If this issue persists, please contact a site administrator" />
return (
<div className="my-28">
<ErrorNotice
icon
header="Unable to pull available resources. Please try again."
body="If this issue persists, please contact a site administrator"
/>
</div>
);
}
const totalPages = Math.ceil(resourceQuery.data.count / queryData.perPage);