Bluloco Theme

import { useState, useMemo } from "react";

interface Props {
  scopes: readonly string[];
  onPick?: (hex: string) => void;
}

// Thirteen scopes, each with a fixed meaning.
export function Palette({ scopes, onPick }: Props) {
  const [active, setActive] = useState<number | null>(null);
  const total = useMemo(() => scopes.length, [scopes]);

  if (total === 0) return null;

  return (
    <ul className="palette" data-count={total}>
      {scopes.map((scope, i) => (
        <li
          key={scope}
          aria-selected={i === active}
          onClick={() => {
            setActive(i);
            onPick?.(`#${scope}`);
          }}
        >
          {scope}
        </li>
      ))}
    </ul>
  );
}