generic PopUp component init

src/components/generic/DropdownWithPopup.js

@@ -4,10 +4,29 @@ import { Medium } from '../../utils/fonts';
 import theme from '../../utils/theme';
 import ImageButton from './ImageButton';
 import pencilIco from '../../assets/pencil_ico.svg';
+import styled from 'styled-components';
+import PopUp from './PopUp';
+import { createPortal } from 'react-dom';
+
+const DropdownWithPopupStyle = styled(FlexColumn)`
+  cursor: pointer;
+  gap: 8px;
+  width: 100%;
+  align-items: flex-start;
+  * {
+    cursor: pointer;
+  }
+`;
 
 const DropdownWithPopup = (props) => {
+  const [tagsPopUp, setTagsPopUp] = React.useState(false);
+
   return (
-    <FlexColumn gap="8px" width="100%" alignmentX="flex-start">
+    <DropdownWithPopupStyle
+      onClick={() => {
+        if (!tagsPopUp) setTagsPopUp(true);
+      }}
+    >
       <Medium as="label" htmlFor={props.label}>
         {props.label}
       </Medium>
@@ -29,7 +48,12 @@ const DropdownWithPopup = (props) => {
         </FlexRow>
         <ImageButton src={pencilIco} width="20px" height="20px" />
       </Grid>
-    </FlexColumn>
+      {tagsPopUp &&
+        createPortal(
+          <PopUp closeHandler={() => setTagsPopUp(false)}></PopUp>,
+          document.body
+        )}
+    </DropdownWithPopupStyle>
   );
 };
 

src/components/generic/ImageButton.js

@@ -5,6 +5,9 @@ const ImageButtonStyle = styled(FlexRow)`
   cursor: pointer;
   transition: transform ease-in-out 0.3s;
   transform: rotate(${({ rotate }) => (rotate ? rotate : '0')});
+  * {
+    cursor: pointer;
+  }
   &:hover {
     transform: rotate(${({ rotate }) => (rotate ? rotate : '0')}), scale(1.2);
   }

src/components/generic/PopUp.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { FlexColumn } from '../../utils/containers';
+import styled from 'styled-components';
+
+const PopUpStyle = styled(FlexColumn)`
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  width: 100%;
+  height: 100vh;
+  background-color: ${({ theme }) => theme.colors.dark01};
+
+  .PopUpStyle__body {
+    width: ${({ width }) => (width ? width : '60%')};
+    min-height: ${({ minHeight }) => (minHeight ? minHeight : '50%')};
+    padding: ${({ padding }) => (padding ? padding : '48px')};
+    border-radius: 12px;
+    background-color: ${({ theme }) => theme.colors.white};
+  }
+`;
+
+const PopUp = (props) => {
+  const [onHover, setOnHover] = React.useState(false);
+
+  const closePopUp = () => {
+    if (!onHover) props.closeHandler();
+  };
+
+  return (
+    <PopUpStyle
+      padding={props.padding}
+      width={props.width}
+      minHeight={props.minHeight}
+      onClick={closePopUp}
+    >
+      <FlexColumn
+        onMouseEnter={() => setOnHover(true)}
+        onMouseLeave={() => setOnHover(false)}
+        className="PopUpStyle__body"
+      >
+        {props.children}
+      </FlexColumn>
+    </PopUpStyle>
+  );
+};
+
+export default PopUp;