function SidebarHuesList({ namespace, colors }) {
  let { isDarkMode, selectedView, setSelectedView } = useContext(GlobalContext);
  return <>{Object.entries(colors).map(([hue, hueObj]) =>
    <button key={hue} className={cn(styles.hue, {
      [styles.isSelected]: selectedView.hue === hue && selectedView.namespace === namespace
    })}
      onClick={() => setSelectedView({ type: 'hue', namespace, hue })}>
      <div className={styles.hueIcon}
        style={{
          backgroundColor: 'currentColor',
          color: isDarkMode
            ? hueObj._selectorDark || hueObj['300'].hex
            : hueObj._selectorLight || hueObj['500'].hex
        }}>
        <div className={styles.ring} style={{ backgroundColor: 'currentColor' }} />
      </div>
      <div className={styles.tooltip}>
        {displayLabelForHue(hue)}
      </div>
    </button>
  )}</>;
}
Renders a list of hue buttons in the sidebar