From aaaa6fffbb81d42836d8ceb51c5d8d13d3de1422 Mon Sep 17 00:00:00 2001
From: vchikalkin <djchikalkin@gmail.com>
Date: Thu, 30 Nov 2023 11:59:56 +0300
Subject: [PATCH] apps/web: add close button to Overlay

---
 apps/web/components/Form/Overlay.tsx | 57 ++++++++++++++++++----------
 packages/ui/button.tsx               |  1 +
 2 files changed, 38 insertions(+), 20 deletions(-)

diff --git a/apps/web/components/Form/Overlay.tsx b/apps/web/components/Form/Overlay.tsx
index dc50706..5a32dde 100644
--- a/apps/web/components/Form/Overlay.tsx
+++ b/apps/web/components/Form/Overlay.tsx
@@ -1,44 +1,61 @@
 'use client';
 import { FormContext } from './context/form-context';
 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 { 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">
+      <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 } = useContext(FormContext);
+  const { formState, setFormState } = useContext(FormContext);
   const { status, text } = formState;
 
-  if (status === 'pending')
-    return (
-      <OverlayWrapper>
+  let stateContent: JSX.Element | false = false;
+
+  if (status === 'pending') {
+    stateContent = (
+      <StateContentWrapper>
         {LoadingSpinner} <p className="font-medium">Загрузка...</p>
-      </OverlayWrapper>
+      </StateContentWrapper>
     );
-  if (status === 'success')
-    return (
-      <OverlayWrapper>
-        <CheckCircleIcon className="h-10 w-10 fill-green-500" title="OK" />{' '}
+  }
+  if (status === 'success') {
+    stateContent = (
+      <StateContentWrapper>
+        <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>
+      </StateContentWrapper>
     );
   }
 
-  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>;
 }
diff --git a/packages/ui/button.tsx b/packages/ui/button.tsx
index 701af2e..030504f 100644
--- a/packages/ui/button.tsx
+++ b/packages/ui/button.tsx
@@ -22,6 +22,7 @@ const variants = cva(
           'border border-primary text-primary-500 hover:bg-primary-500 hover:text-white',
         secondary:
           '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',
       },
     },
   }