frontend2/src/components/layout/MagicImage.tsx

import React from "react";

import styles from "./MagicImage.module.sass";

interface MagicImageProps {
  src: string
  alignH?: "left" | "center" | "right"
  alignV?: "top" | "middle" | "bottom"
  full?: boolean
  banner?: boolean
  fixed?: boolean
  opacity?: number
  children?: React.ReactNode
}

export default function MagicImage(props: MagicImageProps) {
  let containerClass = [styles.magicImageContainer]
  let imageClass = [styles.magicImage]
  let overlayClass = [styles.magicImageOverlay]

  if (props.fixed) {
    containerClass.push(styles.fixed);
    imageClass.push(styles.fixed);
  }
  if (props.full) {
    containerClass.push(styles.full);
    imageClass.push(styles.full);
  }
  if (props.banner) {
    imageClass.push(styles.banner)
    overlayClass.push(styles.banner)
  }

  const imageStyle = {
    background: `url(${JSON.stringify(props.src)}) no-repeat fixed center`,
    backgroundPositionX: props.alignH || "left",
    backgroundPositionY: props.alignV || "middle",
  };

  const overlayStyle = {
    backgroundColor: `rgba(0,0,0,${1.0 - (props.opacity || 0.25)})`,
  };

  return (
    <div className={containerClass.join(" ")}>
      <div className={imageClass.join(" ")} style={imageStyle}>
        <div className={overlayClass.join(" ")} style={overlayStyle}>
          {props.children}
        </div>
      </div>
    </div>
  );
}