Spinner Component

Spinner

This component provides Spinner functionality.

Props

• prop1: Description of prop1.
• prop2: Description of prop2.

Usage

import { Spinner } from './Spinner';

const props = {};

<Spinner prop1="value1" prop2="value2" />;

import type { FC } from 'react';

import cn from '../cn';

interface SpinnerProps {
  className?: string;
  variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
  size?: 'xs' | 'sm' | 'md' | 'lg';
}

export const Spinner: FC<SpinnerProps> = ({
  className = '',
  variant = 'primary',
  size = 'md'
}) => {
  return (
    <div
      className={cn(
        {
          'border-brand-200 border-t-brand-600': variant === 'primary',
          'border-gray-200 border-t-gray-600': variant === 'secondary',
          'border-green-200 border-t-green-600': variant === 'success',
          'border-yellow-200 border-t-yellow-600': variant === 'warning',
          'border-red-200 border-t-red-600': variant === 'danger',
          'h-4 w-4 border-[2px]': size === 'xs',
          'h-5 w-5 border-2': size === 'sm',
          'h-8 w-8 border-[3px]': size === 'md',
          'h-10 w-10 border-4': size === 'lg'
        },
        'animate-spin rounded-full',
        className
      )}
    />
  );
};