45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
'use client';
|
||
import { FormContext } from './context/form-context';
|
||
import { CheckCircleIcon, XCircleIcon } from '@heroicons/react/24/solid';
|
||
import { Background, LoadingSpinner } from '@repo/ui';
|
||
import type { PropsWithChildren } from 'react';
|
||
import { useContext } from 'react';
|
||
|
||
function OverlayWrapper({ children }: PropsWithChildren) {
|
||
return (
|
||
<Background className="absolute left-0 top-0 grid h-full w-full place-items-center bg-opacity-80 backdrop-blur-sm">
|
||
<div className="absolute bottom-[50vh] flex flex-row items-center gap-2 md:relative md:bottom-0">
|
||
{children}
|
||
</div>
|
||
</Background>
|
||
);
|
||
}
|
||
export function Overlay() {
|
||
const { formState } = useContext(FormContext);
|
||
const { status, text } = formState;
|
||
|
||
if (status === 'pending')
|
||
return (
|
||
<OverlayWrapper>
|
||
{LoadingSpinner} <p className="font-medium">Загрузка...</p>
|
||
</OverlayWrapper>
|
||
);
|
||
if (status === 'success')
|
||
return (
|
||
<OverlayWrapper>
|
||
<CheckCircleIcon className="h-10 w-10 fill-green-500" title="OK" />{' '}
|
||
<p className="font-medium">Данные сохранены</p>
|
||
</OverlayWrapper>
|
||
);
|
||
if (status === 'error') {
|
||
return (
|
||
<OverlayWrapper>
|
||
<XCircleIcon className="h-10 w-10 fill-red-500" title="Error" />{' '}
|
||
<p className="font-medium">{text}</p>
|
||
</OverlayWrapper>
|
||
);
|
||
}
|
||
|
||
return false;
|
||
}
|