@patreon/studio/module/components/Image/index.jsx

Patreon Studio Design System

'use client';
import cx from 'classnames';
import React from 'react';
import { useSources } from './hooks/useSources';
import styles from './Image.module.css';
export function Image({ src: inputSrc, alt, sizing = 'cover', height: inputHeight, ratio = 1, loading = 'eager', id, 'data-tag': dataTag, onError, placeholder, blurDataUrl, ...props }) {
    const { src, sources } = useSources(inputSrc);
    const height = typeof inputHeight === 'number' ? `${inputHeight}px` : inputHeight;
    const [loaded, setLoaded] = React.useState(false);
    const containerStyle = height ? { height } : { aspectRatio: ratio };
    return (<div className={cx(styles.container, sizing === 'cover' ? styles.sizingCover : styles.sizingContain)} style={containerStyle} id={id} data-tag={dataTag}>
      {!loaded && (!!placeholder || !!blurDataUrl) && (<div className={styles.absolutePlaceholder}>
          {blurDataUrl ? <img src={blurDataUrl} alt={alt} className={styles.placeholderImage}/> : placeholder}
        </div>)}
      <picture>
        {sources.map(({ media, srcSet }) => (<source key={srcSet} media={media} srcSet={srcSet}/>))}

        <img className={styles.image} src={src} alt={alt} loading={loading} onError={onError} onLoad={() => {
            if (placeholder || blurDataUrl) {
                setLoaded(true);
            }
        }} {...props}/>
      </picture>
    </div>);
}
//# sourceMappingURL=index.jsx.map