@primer/react/lib-esm/experimental/IssueLabel/IssueLabel.js

An implementation of GitHub's Primer Design System using React

import React from 'react';
import { getColorsFromHex } from './getColorFromHex.js';
import { useTheme } from '../../ThemeProvider.js';
import { clsx } from 'clsx';
import classes from './IssueLabel.module.css.js';

function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function IssueLabel({
  className,
  fillColor,
  variant = 'gray',
  href,
  onClick,
  onFocus,
  text,
  as,
  id,
  ...rest
}) {
  // Error handling: `href` and `onClick` should not be set simultaneously
  if (href && onClick) {
    throw new Error('`href` and `onClick` cannot both be set. Choose either a link (`<a>`) or a button (`<button>`).');
  }
  const {
    resolvedColorScheme
  } = useTheme();
  const mode = resolvedColorScheme !== null && resolvedColorScheme !== undefined && resolvedColorScheme.startsWith('dark') ? 'dark' : 'light';
  // TODO: get the bgColor, getting it from theme.colorScheme seems a bit sketchy
  const bgColors = {
    light: '#ffffff',
    dark: '#0d1117'
  };

  // Determine the component type: Prioritize `as`, then fallback to `href` or `onClick` logic
  let Component = 'span'; // Default to <span>

  if (as) {
    Component = as; // use 'as' prop if provided
  } else if (href) {
    Component = 'a'; // render as <a> if `href` is provided
  } else if (onClick) {
    Component = 'button'; // render as <button> if `onClick` is provided
  }
  const anchorProps = href ? {
    href
  } : {};
  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, anchorProps, {
    onClick: onClick,
    onFocus: onFocus,
    id: id === null || id === undefined ? undefined : id.toString(),
    className: clsx(classes.IssueLabel, className),
    "data-variant": fillColor ? undefined : variant,
    style: fillColor ? getColorsFromHex(fillColor, resolvedColorScheme, bgColors[mode]) : undefined
  }), text);
}
IssueLabel.displayName = "IssueLabel";

export { IssueLabel };