62 lines
1.9 KiB
TypeScript
62 lines
1.9 KiB
TypeScript
'use client';
|
||
import { FormContext } from './context/form-context';
|
||
import { CheckCircleIcon, XCircleIcon } from '@heroicons/react/24/solid';
|
||
import { Background, Button, 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-col items-center gap-2 md:relative md:bottom-0">
|
||
{children}
|
||
</div>
|
||
</Background>
|
||
);
|
||
}
|
||
|
||
function StateContentWrapper({ children }: PropsWithChildren) {
|
||
return <div className="flex flex-row items-center gap-2">{children}</div>;
|
||
}
|
||
|
||
export function Overlay() {
|
||
const { formState, setFormState } = useContext(FormContext);
|
||
const { status, text } = formState;
|
||
|
||
let stateContent: JSX.Element | false = false;
|
||
|
||
if (status === 'pending') {
|
||
stateContent = (
|
||
<StateContentWrapper>
|
||
{LoadingSpinner} <p className="font-medium">Загрузка...</p>
|
||
</StateContentWrapper>
|
||
);
|
||
}
|
||
if (status === 'success') {
|
||
stateContent = (
|
||
<StateContentWrapper>
|
||
<CheckCircleIcon className="h-10 w-10 fill-green-500" title="OK" />
|
||
<p className="font-medium">Данные сохранены</p>
|
||
</StateContentWrapper>
|
||
);
|
||
}
|
||
|
||
if (status === 'error') {
|
||
stateContent = (
|
||
<>
|
||
<StateContentWrapper>
|
||
<XCircleIcon className="h-10 w-10 fill-red-500" title="Error" />
|
||
<p className="font-medium">{text}</p>
|
||
</StateContentWrapper>{' '}
|
||
<Button type="button" intent="text" onClick={() => setFormState({ status: 'edit' })}>
|
||
Закрыть
|
||
</Button>
|
||
</>
|
||
);
|
||
}
|
||
|
||
if (!stateContent) return false;
|
||
|
||
return <OverlayWrapper>{stateContent}</OverlayWrapper>;
|
||
}
|