solid-color/dist/source/components/swatches/SwatchesGroup.jsx

<p> <img width="100%" src="https://assets.solidjs.com/banner?type=solid-color&background=tiles&project=%20" alt="solid-color"> </p>

import { For, mergeProps } from 'solid-js';
import SwatchesColor from './SwatchesColor';
export default function SwatchesGroup(_props) {
    const props = mergeProps({}, _props);
    const styles = {
        group: {
            'padding-bottom': '10px',
            width: '40px',
            float: 'left',
            'margin-right': '10px',
        },
    };
    return (<div style={styles.group}>
      <For each={props.group}>
        {(color, i) => (<SwatchesColor color={color} active={color.toLowerCase() === props.active} first={i() === 0} last={i() === props.group.length - 1} onClick={props.onClick}/>)}
      </For>
    </div>);
}