34 lines
1.1 KiB
TypeScript
34 lines
1.1 KiB
TypeScript
'use client';
|
||
import { FormContext } from './context/form-context';
|
||
import { CheckCircleIcon } from '@heroicons/react/24/solid';
|
||
import type { PropsWithChildren } from 'react';
|
||
import { useContext } from 'react';
|
||
import { Background, LoadingSpinner } from 'ui';
|
||
|
||
function OverlayWrapper({ children }: PropsWithChildren) {
|
||
return (
|
||
<Background className="absolute grid h-full w-full items-center justify-center border-none bg-opacity-80 backdrop-blur-sm">
|
||
<div className="flex flex-row items-center gap-2">{children} </div>
|
||
</Background>
|
||
);
|
||
}
|
||
export function Overlay() {
|
||
const { formStatus } = useContext(FormContext);
|
||
|
||
if (formStatus === 'pending')
|
||
return (
|
||
<OverlayWrapper>
|
||
{LoadingSpinner} <p className="font-medium">Загрузка...</p>
|
||
</OverlayWrapper>
|
||
);
|
||
if (formStatus === 'success')
|
||
return (
|
||
<OverlayWrapper>
|
||
<CheckCircleIcon className="h-10 w-10 fill-green-500" title="OK" />{' '}
|
||
<p className="font-medium">Данные сохранены</p>
|
||
</OverlayWrapper>
|
||
);
|
||
|
||
return false;
|
||
}
|