add modal close

nerdgeschoss · Jan 14, 2025 · 6c82d03 · 6c82d03
1 parent 0e865b7
commit 6c82d03
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 2 deletions.
diff --git a/app/frontend/components/modal/close.svg b/app/frontend/components/modal/close.svg
diff --git a/app/frontend/components/modal/modal.scss b/app/frontend/components/modal/modal.scss
@@ -33,6 +33,20 @@ $animation_time: 0.35s;
   justify-content: flex-end;
   overflow: scroll;
 
+  &__close {
+    position: absolute;
+    z-index: 999;
+    top: 10px;
+    right: 10px;
+    background-image: url(./close.svg);
+    background-size: contain;
+    background-repeat: no-repeat;
+    display: block;
+    width: 12px;
+    height: 12px;
+    cursor: pointer;
+  }
+
   &__background {
     position: absolute;
     top: 0;

diff --git a/app/frontend/components/modal/modal.tsx b/app/frontend/components/modal/modal.tsx
@@ -19,7 +19,7 @@ interface ModalProps {
 }
 
 function Modal(props: ModalProps): JSX.Element {
-  const { children } = props;
+  const { children, onClose } = props;
 
   const [open, setOpen] = useState(false);
 
@@ -43,7 +43,10 @@ function Modal(props: ModalProps): JSX.Element {
           'modal__background--fade-out': !props.open,
         })}
       />
-      <div className="modal__content">{children}</div>
+      <div className="modal__content">
+        <div className="modal__close" onClick={onClose} />
+        {children}
+      </div>
     </div>
   );
 }