You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
53 lines
1.3 KiB
53 lines
1.3 KiB
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>
|
|
);
|
|
}
|