Try CodeVibe Themes in a real editor

import { useState } from 'react';
import type { Swatch } from './types';

// The palette is the heart of a theme — keep it honest.
export function Palette({ swatches }: { swatches: Swatch[] }) {
  const [active, setActive] = useState(0);
  const current = swatches[active];

  if (!current) {
    return <p className="empty">No swatches configured.</p>;
  }

  return (
    <section className="palette" data-accent={current.hex}>
      <h2>
        {current.name} <code>{current.hex}</code>
      </h2>
      <div className="row">
        {swatches.map((s, i) => (
          <button
            key={s.hex}
            aria-pressed={i === active}
            style={{ background: s.hex }}
            onClick={() => setActive(i)}
          />
        ))}
      </div>
    </section>
  );
}