connectRatingMenu

import { connectRatingMenu } from 'instantsearch.js/es/connectors';

const customRatingMenu = connectRatingMenu(
  (renderOptions, isFirstRender) => {
    const { items, refine, widgetParams } = renderOptions;
    const { container } = widgetParams;
    
    container.innerHTML = `
      <ul>
        ${items.map(item => `
          <li>
            <a 
              href="#" 
              data-value="${item.value}"
              style="${item.isRefined ? 'font-weight: bold' : ''}"
            >
              ${item.stars.map((filled, index) => 
                filled ? '★' : '☆'
              ).join('')} & Up (${item.count})
            </a>
          </li>
        `).join('')}
      </ul>
    `;
    
    container.querySelectorAll('a').forEach(link => {
      link.addEventListener('click', (e) => {
        e.preventDefault();
        refine(e.target.dataset.value);
      });
    });
  }
);

search.addWidgets([
  customRatingMenu({
    container: document.querySelector('#rating-menu'),
    attribute: 'rating',
  }),
]);