spinner.tsx

import classnames from 'classnames'

const sizeMap = {
    small: '16px',
    medium: '32px',
    large: '64px',
}

export interface SpinnerInternalProps {
    /** Sets the width and height of the spinner. */
    size?: keyof typeof sizeMap
}

export default function Spinner({size: sizeKey = 'medium', className, ...props}: SpinnerInternalProps & React.HTMLAttributes<SVGElement>) {
    const size = sizeMap[sizeKey]
    return (
        <svg height={size} width={size} viewBox="0 0 16 16" fill="none" {...props} className={classnames('animate-spinner box-content inline', className)}>
            <circle cx="8" cy="8" r="7" stroke="currentColor" strokeOpacity="0.25" strokeWidth="2" vectorEffect="non-scaling-stroke" />
            <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" vectorEffect="non-scaling-stroke" />
        </svg>
    )
}