Function Spinner

components/spinner.tsx:64–90

({ size = 'medium', className, label, labelProps = {}, ...rest }: SpinnerProps)

}

export function Spinner({ size = 'medium', className, label, labelProps = {}, ...rest }: SpinnerProps) {
  const { className: labelClassName, ...labelRest } = labelProps;

  return (
    <div className='inline-flex flex-col items-center justify-center gap-3'>
      <div className={clsxMerge(spinnerContainerVariants({ size }))} {...rest}>
        <div className={clsxMerge(spinnerVariants({ size }), className)}></div>
        <svg
          width='100%'
          height='100%'
          fill='none'
          className='absolute animate-spin stroke-blue-700'
          xmlns='http://www.w3.org/2000/svg'
          {...spinSVGProps[size]}
        >
          <path d='M12.5 23c6.075 0 11-4.925 11-11s-4.925-11-11-11-11 4.925-11 11' strokeLinecap='round' />
        </svg>
      </div>
      {label && (
        <span className={clsxMerge('text-xs font-semibold text-blue-700', labelClassName)} {...labelRest}>
          {label}
        </span>
      )}
      {!label && <span className='sr-only'>Loading...</span>}
    </div>
  );
}

Spinner.displayName = 'Spinner';