Spinner

'use client';

import { Spinner } from '@akhatmirzo/ui';

export default function SpinnerSizes() {
  return (
    <div className="flex flex-wrap items-center gap-4 text-text-muted">
      <Spinner size="sm" />
      <Spinner size="md" />
      <Spinner size="lg" />
    </div>
  );
}

'use client';

import { Spinner } from '@akhatmirzo/ui';

export default function SpinnerColors() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <Spinner className="text-text" />
      <Spinner className="text-primary" />
      <Spinner className="text-success" />
      <Spinner className="text-danger" />
      <span className="inline-flex size-10 items-center justify-center rounded-lg bg-primary text-primary-foreground">
        <Spinner size="sm" />
      </span>
    </div>
  );
}

'use client';

import { Spinner } from '@akhatmirzo/ui';

export default function SpinnerWithText() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <span className="inline-flex items-center gap-2 text-sm text-text-muted">
        <Spinner size="sm" aria-hidden="true" />
        Buyurtmalar yuklanmoqda...
      </span>
      <div className="flex h-32 items-center justify-center rounded-lg border border-border bg-surface text-text-muted">
        <Spinner size="lg" label="Jadval yuklanmoqda" />
      </div>
    </div>
  );
}