slate/components/core/FilePreviewBubble.js

import * as React from "react";
import * as Constants from "~/common/constants";

import { css, keyframes } from "@emotion/react";
import { useState } from "react";

const fadeIn = keyframes`
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
`;

const STYLES_FILE_PREVIEW_BUBBLE = css`
  z-index: ${Constants.zindex.tooltip};
  padding: 8px;
  border-radius: 4px;
  background-color: ${Constants.system.black};
  animation: ${fadeIn} 200ms ease-out 1;
  width: 200px;
  position: absolute;
`;

const STYLES_FILE_PREVIEW = css`
  display: block;
  width: 100%;
  height: 100%;
`;

const STYLES_BUBBLE_ANCHOR = css`
  display: inline-flex;
  align-item: center;
  justify-content: center;
  cursor: pointer;
`;

//Jim: the parent of this element needs to be position: relative or this bubble will fly off its position
export const FilePreviewBubble = (props) => {
  const [onHover, setHover] = useState(false);
  const showPreview = props.type && props.type.startsWith("image/") && onHover;

  return (
    <React.Fragment>
      <div
        css={STYLES_BUBBLE_ANCHOR}
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
      >
        {props.children}
      </div>
      {showPreview && (
        <div css={STYLES_FILE_PREVIEW_BUBBLE}>
          <img css={STYLES_FILE_PREVIEW} src={`${Constants.gateways.ipfs}/${props.url}`} />
        </div>
      )}
    </React.Fragment>
  );
};

export default FilePreviewBubble;