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

Patreon Studio Design System

import cx from 'classnames';
import React from 'react';
import { BodyText } from '~/components/BodyText';
import { Button } from '~/components/Button';
import { IconInfo } from '~/components/Icon';
import { tokens } from '~/tokens';
import styles from './ActionBar.module.css';
export function ActionBar({ icon = IconInfo, action, secondaryAction, messageDisplay = 'default', children, 'data-tag': dataTag, id, }) {
    const Icon = icon;
    const classList = cx(styles.root, {
        [styles.messageHideMobile]: messageDisplay === 'hide-mobile',
    });
    return (<div className={classList}>
      <div className={styles.container} aria-live="polite" data-tag={dataTag} id={id}>
        <div className={styles.wrapper}>
          <div className={styles.contentContainer}>
            <Icon size="20px" color={tokens.global.content.regular.default}/>
            <BodyText size="lg">{children}</BodyText>
          </div>

          <div className={styles.actionContainer}>
            {action && (<Button loggerId="slime" data-tag="action" variant="primary" {...action}>
                {action.label}
              </Button>)}

            {secondaryAction && (<Button loggerId="slime" data-tag="secondary-action" variant="tertiary" {...secondaryAction}>
                {secondaryAction.label}
              </Button>)}
          </div>
        </div>
      </div>
    </div>);
}
//# sourceMappingURL=index.jsx.map