chore: use monorepo organization

packages/admin-ui/src/components/ImagePopper.jsx

@@ -0,0 +1,56 @@
+import ClickAwayListener from '@mui/material/ClickAwayListener'
+import classnames from 'classnames'
+import React, { memo, useState } from 'react'
+import Popper from 'src/components/Popper'
+import ZoomIconInverse from 'src/styling/icons/circle buttons/search/white.svg?react'
+import ZoomIcon from 'src/styling/icons/circle buttons/search/zodiac.svg?react'
+
+import { FeatureButton } from 'src/components/buttons'
+
+const ImagePopper = memo(
+  ({ className, width, height, popupWidth, popupHeight, src }) => {
+    const [popperAnchorEl, setPopperAnchorEl] = useState(null)
+
+    const handleOpenPopper = event => {
+      setPopperAnchorEl(popperAnchorEl ? null : event.currentTarget)
+    }
+
+    const handleClosePopper = () => {
+      setPopperAnchorEl(null)
+    }
+
+    const popperOpen = Boolean(popperAnchorEl)
+
+    const Image = ({ className, style }) => (
+      <img className={classnames(className)} style={style} src={src} alt="" />
+    )
+
+    return (
+      <ClickAwayListener onClickAway={handleClosePopper}>
+        <div className={classnames('flex flex-row', className)}>
+          <Image
+            className="object-cover rounded-tl-lg"
+            style={{ width, height }}
+          />
+          <FeatureButton
+            Icon={ZoomIcon}
+            InverseIcon={ZoomIconInverse}
+            className="rounded-none rounded-tr-lg rounded-br-lg"
+            style={{ height }}
+            onClick={handleOpenPopper}
+          />
+          <Popper open={popperOpen} anchorEl={popperAnchorEl} placement="top">
+            <div className="py-2 px-4">
+              <Image
+                className="object-cover"
+                style={{ width: popupWidth, height: popupHeight }}
+              />
+            </div>
+          </Popper>
+        </div>
+      </ClickAwayListener>
+    )
+  }
+)
+
+export default ImagePopper