Spinner

import { Spinner } from "@nexera-ui/react";

const types = ["ring", "dots", "spokes"] as const;

const tones = ["brand", "neutral", "on-color"] as const;

const sizes = ["xs", "sm", "md", "lg", "xl"] as const;

export function Matrix() {
  return (
    <div className="flex flex-col gap-6">
      {types.map((type) =>
        tones.map((tone) => (
          <div
            key={`${type}${tone}`}
            className={`flex flex-wrap items-center gap-6 rounded-md p-3 ${tone === "on-color" ? "bg-brand-primary" : ""}`}
          >
            <span
              className={`text-body-caption w-32 ${tone === "on-color" ? "text-brand-on-primary" : "text-secondary"}`}
            >
              {type} · {tone}
            </span>
            {sizes.map((size) => (
              <Spinner
                key={size}
                type={type}
                tone={tone}
                size={size}
                label={`${type} ${tone} ${size}`}
              />
            ))}
          </div>
        )),
      )}
    </div>
  );
}