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

Patreon Studio Design System

'use client';
import cx from 'classnames';
import React from 'react';
import styles from './FloatingAccessory.module.css';
const positionToClassName = {
    'top-left': styles.positionTopLeft,
    'top-right': styles.positionTopRight,
    'bottom-left': styles.positionBottomLeft,
    'bottom-right': styles.positionBottomRight,
};
/**
 * FloatingAccessory is a component that allows you to add and
 * absolute positioned element to a component
 */
export function FloatingAccessory({ children, accessory, shape = 'square', position = 'top-right', offset = 0, }) {
    const classList = cx(styles.root, positionToClassName[position], {
        [styles.shapeCircle]: shape === 'circle',
    });
    return (<div className={classList} style={{ '--FloatingAccessory-offset': `${offset}px` }}>
      <div className={styles.accessoryContainer}>{accessory}</div>

      <div>{children}</div>
    </div>);
}
//# sourceMappingURL=index.jsx.map