Spinner

"use client";

import { Button, Spinner } from "@waveinno/ui";

export default function SpinnerDemo() {
  return (
    <div className="space-y-6">
      {(["ring", "dots", "wave"] as const).map((variant) => (
        <div key={variant} className="flex flex-wrap items-center gap-6">
          <p className="w-12 text-[12px] text-muted">{variant}</p>
          {(["xs", "sm", "md", "lg", "xl"] as const).map((size) => (
            <Spinner key={size} variant={variant} size={size} tone="brand" />
          ))}
          <span className="text-muted">
            <Spinner variant={variant} size="md" />
          </span>
        </div>
      ))}
      <div className="flex flex-wrap items-center gap-3">
        <Button disabled>
          <Spinner size="sm" /> Saving
        </Button>
        <Button variant="secondary" disabled>
          <Spinner size="sm" variant="dots" /> Connecting to gate
        </Button>
      </div>
    </div>
  );
}