Function ColorItem

packages/dev/s2-docs/src/ColorSearchView.tsx:327–436

({
  item,
  sectionId,
  isCopied = false,
  isBestMatch = false,
  isExactMatch = false
}: ColorItemProps)

}

function ColorItem({
  item,
  sectionId,
  isCopied = false,
  isBestMatch = false,
  isExactMatch = false
}: ColorItemProps) {
  let ref = useRef(null);

  // Look up the pre-generated swatch class for this color
  const swatchClass =
    sectionId === 'text'
      ? textSwatches[item.name]
      : backgroundSwatches[item.name] || scaleSwatches[item.name] || '';

  return (
    <ListBoxItem
      id={item.id}
      textValue={item.name}
      className={itemStyle}
      ref={ref}
      style={pressScale(ref)}>
      <div
        className={`${swatchClass || swatchStyle} ${style({position: 'relative'})}`}
        style={
          {
            width: '48px',
            height: '48px',
            '--s2-container-bg': 'var(--v)'
          } as React.CSSProperties
        }>
        <div
          className={style({
            position: 'absolute',
            inset: 0,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            borderRadius: 'inherit',
            color: 'auto',
            '--iconPrimary': {
              type: 'fill',
              value: 'currentColor'
            },
            transition: 'default'
          })}
          style={{
            opacity: isCopied ? 1 : 0,
            transform: isCopied ? 'scale(1)' : 'scale(0.5)'
          }}>
          <CheckmarkCircle styles={iconStyle({size: 'XL'})} />
        </div>
      </div>
      {isBestMatch && !isCopied ? (
        <Badge
          size="S"
          variant={isExactMatch ? 'positive' : 'informative'}
          UNSAFE_style={{width: 'max-content'}}>