38 lines
1,005 B
TypeScript
38 lines
1,005 B
TypeScript
'use client';
|
|
|
|
import { cn } from '@/lib/utils';
|
|
import { useEffect, useState } from 'react';
|
|
|
|
export default function Console({ text, className }: { text: string; className?: string }) {
|
|
const [message, setMessage] = useState('');
|
|
const [typingIndex, setTypingIndex] = useState(0);
|
|
|
|
const typingDelay = 200; // The delay between each character being typed, in milliseconds
|
|
|
|
useEffect(() => {
|
|
const intervalId = setInterval(() => {
|
|
setTypingIndex((prevIndex) => prevIndex + 1);
|
|
}, typingDelay);
|
|
|
|
return () => clearInterval(intervalId);
|
|
}, [text]);
|
|
|
|
useEffect(() => {
|
|
if (typingIndex <= text.length) {
|
|
setMessage(text.slice(0, typingIndex));
|
|
}
|
|
}, [typingIndex, text]);
|
|
|
|
return (
|
|
<div className="inline-block h-4">
|
|
<span className={cn('text-4xl', className)}>{message}</span>
|
|
<div
|
|
className={cn('relative top-0.5 inline-block', {
|
|
hidden: typingIndex % 2 === 0
|
|
})}
|
|
>
|
|
_
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|