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

Patreon Studio Design System

import cx from 'classnames';
import React from 'react';
import { BodyText } from '~/components/BodyText';
import { HeadingText } from '~/components/HeadingText';
import styles from './MediaLockup.module.css';
export function MediaLockup({ children, 'data-tag': dataTag, id, size = 'md', variant, leadingMedia, trailingMedia, className, style, ...props }) {
    const classList = cx(styles.root, {
        [styles.variantBody]: variant === 'body',
        [styles.variantHeading]: variant === 'heading',
        [styles.variantCustom]: variant === 'custom',
        [styles.sizeXs]: size === 'xs',
        [styles.sizeSm]: size === 'sm',
        [styles.sizeMd]: size === 'md',
        [styles.sizeLg]: size === 'lg',
    }, className);
    return (<div className={classList} style={style} id={id} data-tag={dataTag} {...props}>
      {leadingMedia && <MediaComponent variant={variant} size={size} media={leadingMedia}/>}

      <ContentComponent variant={variant} size={size}>
        {children}
      </ContentComponent>

      {trailingMedia && <MediaComponent variant={variant} size={size} media={trailingMedia}/>}
    </div>);
}
function MediaComponent({ variant, size, media }) {
    const sizes = getSizesByVariant(variant, size);
    if (media.type === 'icon') {
        return <media.component color="inherit" size={sizes?.icon} {...media.props}/>;
    }
    if (media.type === 'avatar') {
        return <media.component size={sizes?.avatar} {...media.props}/>;
    }
    if (media.type === 'image') {
        return (<div style={{ width: sizes?.image }}>
        <media.component {...media.props}/>
      </div>);
    }
    if (media.type === 'loading') {
        return (<div>
        <media.component size={sizes?.spinner} {...media.props}/>
      </div>);
    }
    return null;
}
function ContentComponent({ variant, size, children }) {
    if (variant === 'body') {
        return (<BodyText as="span" size={bodyVariantToSizes[size].text} color="inherit">
        {children}
      </BodyText>);
    }
    if (variant === 'heading') {
        return (<HeadingText as="span" size={headingVariantToTextSize[size].text} color="inherit">
        {children}
      </HeadingText>);
    }
    return <div>{children}</div>;
}
function getSizesByVariant(variant, size) {
    if (variant === 'heading') {
        return headingVariantToTextSize[size];
    }
    if (variant === 'body') {
        return bodyVariantToSizes[size];
    }
    return null;
}
const bodyVariantToSizes = {
    xs: { text: 'sm', icon: '12px', spinner: 'xxs', avatar: '18px', image: '12px' },
    sm: { text: 'md', icon: '16px', spinner: 'xxs', avatar: '20px', image: '16px' },
    md: { text: 'lg', icon: '20px', spinner: 'xs', avatar: '24px', image: '20px' },
    lg: { text: 'lg', icon: '24px', spinner: 'xs', avatar: '28px', image: '24px' },
};
const headingVariantToTextSize = {
    xs: { text: 'sm', icon: '16px', spinner: 'xxs', avatar: '18px', image: '16px' },
    sm: { text: 'md', icon: '20px', spinner: 'xs', avatar: '20px', image: '20px' },
    md: { text: 'lg', icon: '24px', spinner: 'sm', avatar: '24px', image: '24px' },
    lg: { text: 'xl', icon: '32px', spinner: 'sm', avatar: '32px', image: '32px' },
};
//# sourceMappingURL=index.jsx.map