Spinner

1'use client'
2 
3import * as React from 'react'
4import { cn } from '@/lib/utils'
5 
6const frames = ['|', '/', '-', '\\'] as const
7const sizeMap = { SM: '0.75rem', MD: '0.875rem', LG: '1rem' }
8 
9export interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {
10  size?: 'SM' | 'MD' | 'LG'
11  label?: string
12}
13 
14function Spinner({ className, size = 'MD', label, style, ...props }: SpinnerProps) {
15  const [frame, setFrame] = React.useState(0)
16 
17  React.useEffect(() => {
18    const id = setInterval(() => setFrame((f) => (f + 1) % frames.length), 120)
19    return () => clearInterval(id)
20  }, [])
21 
22  return (
23    <span
24      className={cn('inline-flex items-center gap-1.5 font-mono', className)}
25      style={{ fontSize: sizeMap[size], color: 'var(--color-green)', ...style }}
26      aria-label={label ?? 'Loading'}
27      role="status"
28      {...props}
29    >
30      <span
31        style={{
32          display:     'inline-block',
33          width:       '1ch',
34          textAlign:   'center',
35          textShadow:  'var(--text-glow-green)',
36          userSelect:  'none',
37        }}
38        aria-hidden="true"
39      >
40        {frames[frame]}
41      </span>
42      {label && (
43        <span
44          style={{
45            letterSpacing: '0.08em',
46            color:         'var(--text-muted)',
47            animation:     'blink-cursor 1.5s step-end infinite',
48          }}
49        >
50          {label}
51        </span>
52      )}
53    </span>
54  )
55}
56 
57export { Spinner }