@primer/react/dist/SelectPanel/SelectPanelMessage.js

An implementation of GitHub's Primer Design System using React

import { AlertIcon } from '@primer/octicons-react';
import classes from './SelectPanel.module.css.js';
import { clsx } from 'clsx';
import { jsxs, jsx } from 'react/jsx-runtime';
import Octicon from '../Octicon/Octicon.js';
import Text from '../Text/Text.js';

const SelectPanelMessage = ({
  variant,
  title,
  children,
  className,
  icon: CustomIcon,
  action
}) => {
  const IconComponent = CustomIcon || (variant !== 'empty' ? AlertIcon : undefined);
  return /*#__PURE__*/jsxs("div", {
    className: clsx(classes.Message, className),
    children: [IconComponent && /*#__PURE__*/jsx(Octicon, {
      icon: IconComponent,
      className: classes.MessageIcon,
      "data-variant": variant
    }), /*#__PURE__*/jsx(Text, {
      className: classes.MessageTitle,
      children: title
    }), /*#__PURE__*/jsx(Text, {
      className: classes.MessageBody,
      children: children
    }), action && /*#__PURE__*/jsx("div", {
      className: classes.MessageAction,
      children: action
    })]
  });
};
SelectPanelMessage.displayName = "SelectPanelMessage";

export { SelectPanelMessage };