update compenent with new features

[ruimarcosjoao]

Spinner component

import { cn } from "@/lib/utils";
import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";
import * as React from "react";

const spinnerVariants = cva("relative block opacity-[0.65]", {
  variants: {
    size: {
      sm: "w-4 h-4",
      md: "w-6 h-6",
      lg: "w-8 h-8",
    },
  },
  defaultVariants: {
    size: "sm",
  },
});

export interface SpinnerProps
  extends React.HTMLAttributes<HTMLSpanElement>,
    VariantProps<typeof spinnerVariants> {
  loading?: boolean;
  asChild?: boolean;
  children?: React.ReactNode;
  defaultText?: string;
  fallback?: string;
}

const Spinner = React.forwardRef<HTMLSpanElement, SpinnerProps>(
  (
    {
      className,
      size,
      loading = false,
      asChild = false,
      children,
      defaultText,
      fallback,
      ...props
    },
    ref
  ) => {
    const Comp = asChild ? Slot : "span";

    const renderSpinnerIcon = () => (
      <Comp className={cn(spinnerVariants({ size }))} ref={ref} {...props}>
        {Array.from({ length: 8 }).map((_, i) => (
          <span
            key={i}
            className="absolute top-0 left-1/2 w-[12.5%] h-full animate-spinner-leaf-fade"
            style={{
              transform: `rotate(${i * 45}deg)`,
              animationDelay: `${-(7 - i) * 100}ms`,
            }}
          >
            <span
              className={cn("block w-full h-[30%] rounded-full", className)}
            ></span>
          </span>
        ))}
      </Comp>
    );

    if (loading) {
      if (fallback) {
        return (
          <span className="flex items-center gap-2">
            {renderSpinnerIcon()}
            <span>{fallback}</span>
          </span>
        );
      }
      return renderSpinnerIcon();
    }

    return (
      <span className="flex items-center gap-2">
        {defaultText && <span>{defaultText}</span>}
        {children}
      </span>
    );
  }
);

Spinner.displayName = "Spinner";

export { Spinner };

Use Case

import React, { useState } from 'react';
import { Spinner } from './Spinner'; // Certifique-se de importar o componente Spinner corretamente

const SpinnerDemo = () => {
  const [loading, setLoading] = useState(false);

  return (
    <div className="flex flex-col items-center gap-4">
      <h2>Spinner Demo</h2>

      {/* Caso 1: Spinner sem loadingText e com text */}
      <div>
        <Spinner loading={false} text="Enviar dados" />
      </div>

      {/* Caso 2: Spinner sem loadingText e com children */}
      <div>
        <Spinner loading={false}>
          <span>Enviar</span>
        </Spinner>
      </div>

      {/* Caso 3: Spinner com loadingText */}
      <div>
        <Spinner loading={true} loadingText="Carregando..." />
      </div>

      {/* Caso 4: Spinner com loadingText e text */}
      <div>
        <Spinner loading={false} text="Enviar dados" loadingText="Enviando..." />
      </div>

      {/* Caso 5: Spinner com loadingText e children */}
      <div>
        <Spinner loading={false} loadingText="Enviando...">
          <span>Enviar</span>
        </Spinner>
      </div>

      {/* Caso 6: Spinner com loadingText, text e children */}
      <div>
        <Spinner loading={false} text="Enviar dados" loadingText="Enviando...">
          <span>Enviar</span>
        </Spinner>
      </div>

      {/* Caso 7: Spinner sem text e children */}
      <div>
        <Spinner loading={false} />
      </div>

      {/* Botão para simular carregamento */}
      <button
        onClick={() => {
          setLoading(true);
          setTimeout(() => setLoading(false), 2000); // Simula um carregamento de 2 segundos
        }}
        className="mt-4 px-4 py-2 bg-blue-500 text-white rounded"
      >
        Simular Carregamento
      </button>
    </div>
  );
};

export default SpinnerDemo;