evo/Evo.External.App
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

apps/web: add close button to Overlay

Browse Source
This commit is contained in:
vchikalkin 2023-11-30 11:59:56 +03:00
parent 2ff3589715
commit aaaa6fffbb
2 changed files with 38 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
apps/web/components/Form/Overlay.tsx
View File

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

1
packages/ui/button.tsx
View File

@ -22,6 +22,7 @@ const variants = cva(
'border border-primary text-primary-500 hover:bg-primary-500 hover:text-white', 'border border-primary text-primary-500 hover:bg-primary-500 hover:text-white',
secondary: secondary:
'bg-primary-50 text-primary-500 border border-transparent hover:bg-primary-100 hover:text-primary-600', 'bg-primary-50 text-primary-500 border border-transparent hover:bg-primary-100 hover:text-primary-600',
text: 'bg-none text-primary-500 hover:bg-primary-50',
}, },
}, },
} }