57 lines
No EOL
1.4 KiB
TypeScript
57 lines
No EOL
1.4 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
|
|
interface TerminalSpinnerProps {
|
|
text?: string;
|
|
size?: 'sm' | 'md' | 'lg';
|
|
fullScreen?: boolean;
|
|
}
|
|
|
|
export default function TerminalSpinner({
|
|
text = 'LOADING',
|
|
size = 'md',
|
|
fullScreen = false
|
|
}: TerminalSpinnerProps) {
|
|
const [dots, setDots] = useState(0);
|
|
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
setDots(prev => (prev + 1) % 4);
|
|
}, 500);
|
|
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
const getDots = () => {
|
|
switch (dots) {
|
|
case 0: return ' ';
|
|
case 1: return '. ';
|
|
case 2: return '.. ';
|
|
case 3: return '...';
|
|
default: return ' ';
|
|
}
|
|
};
|
|
|
|
const sizeClasses = {
|
|
sm: 'text-sm',
|
|
md: 'text-lg',
|
|
lg: 'text-xl'
|
|
};
|
|
|
|
const spinner = (
|
|
<div className="border border-red-500/30 bg-black p-6">
|
|
<span className={`text-red-500 font-mono ${sizeClasses[size]} uppercase tracking-wider`}>
|
|
[SYSTEM] {text}<span className="inline-block w-8">{getDots()}</span>
|
|
</span>
|
|
</div>
|
|
);
|
|
|
|
if (fullScreen) {
|
|
return (
|
|
<div className="min-h-screen bg-black flex items-center justify-center">
|
|
{spinner}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return spinner;
|
|
} |