Spinner

const spinnerFixture = {
  id: "spinner",
  sizes: ["sm", "md"],
  labelledSize: "sm",
  labelledText: "Provisioning…",
} satisfies {
  id: string;
  sizes: Array<"sm" | "md" | "lg">;
  labelledSize: "sm" | "md" | "lg";
  labelledText: string;
};
 
import { Spinner } from "@grassroot/ui-react";
 
export default function SpinnerDemo() {
  return (
    <div>
      {spinnerFixture.sizes.map((size) => (
        <Spinner key={size} size={size} />
      ))}
      <span className="inline-flex items-center gap-2 text-muted">
        <Spinner size={spinnerFixture.labelledSize} className="text-muted" />
        {spinnerFixture.labelledText}
      </span>
    </div>
  );
}

<script setup lang="ts">
const spinnerFixture = {
  id: "spinner",
  sizes: ["sm", "md"],
  labelledSize: "sm",
  labelledText: "Provisioning…",
} satisfies {
  id: string;
  sizes: Array<"sm" | "md" | "lg">;
  labelledSize: "sm" | "md" | "lg";
  labelledText: string;
};
 
import { Spinner } from "@grassroot/ui-vue";
</script>
 
<template>
  <div>
    <Spinner v-for="size in spinnerFixture.sizes" :key="size" :size="size" />
    <span class="inline-flex items-center gap-2 text-muted">
      <Spinner :size="spinnerFixture.labelledSize" class-name="text-muted" />
      {{ spinnerFixture.labelledText }}
    </span>
  </div>
</template>

import { Component } from "@angular/core";
const spinnerFixture = {
  id: "spinner",
  sizes: ["sm", "md"],
  labelledSize: "sm",
  labelledText: "Provisioning…",
} satisfies {
  id: string;
  sizes: Array<"sm" | "md" | "lg">;
  labelledSize: "sm" | "md" | "lg";
  labelledText: string;
};
 
import { GrassrootSpinner } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-spinner-demo",
  standalone: true,
  imports: [GrassrootSpinner],
  template: `
    <div>
      @for (size of fixture.sizes; track size) {
        <grassroot-spinner [size]="size" />
      }
      <span class="inline-flex items-center gap-2 text-muted">
        <grassroot-spinner [size]="fixture.labelledSize" className="text-muted" />
        {{ fixture.labelledText }}
      </span>
    </div>
  `,
})
export class SpinnerDemoComponent {
  protected readonly fixture = spinnerFixture;
}
 
export default SpinnerDemoComponent;

<script lang="ts">
  import { Spinner } from "@grassroot/ui-svelte";
  const spinnerFixture = {
    id: "spinner",
    sizes: ["sm", "md"],
    labelledSize: "sm",
    labelledText: "Provisioning…",
  } satisfies {
    id: string;
    sizes: Array<"sm" | "md" | "lg">;
    labelledSize: "sm" | "md" | "lg";
    labelledText: string;
  };
 
  </script>
 
<div>
  {#each spinnerFixture.sizes as size (size)}<Spinner {size} />{/each}<span
    class="inline-flex items-center gap-2 text-muted"
    ><Spinner
      size={spinnerFixture.labelledSize}
      className="text-muted"
    />{spinnerFixture.labelledText}</span
  >
</div>

/** @jsxImportSource solid-js */
import { Spinner } from "@grassroot/ui-solid";
const spinnerFixture = {
  id: "spinner",
  sizes: ["sm", "md"],
  labelledSize: "sm",
  labelledText: "Provisioning…",
} satisfies {
  id: string;
  sizes: Array<"sm" | "md" | "lg">;
  labelledSize: "sm" | "md" | "lg";
  labelledText: string;
};
 
export default function SpinnerDemo() {
  return (
    <div>
      {spinnerFixture.sizes.map((size) => (
        <Spinner size={size} />
      ))}
      <span class="inline-flex items-center gap-2 text-muted">
        <Spinner size={spinnerFixture.labelledSize} className="text-muted" />
        {spinnerFixture.labelledText}
      </span>
    </div>
  );
}