Keystroke Text

'use client'import { useEffect, useRef } from 'react'import { cn } from '@/lib/utils'export type KeystrokeTextProps = {  phrases: string[]  prefix?: string  typeSpeed?: number  deleteSpeed?: number  holdDelay?: number  gapDelay?: number  startDelay?: number  jitter?: number  loop?: boolean  caret?: boolean  caretChar?: string  caretBlink?: number  hideCaretWhileTyping?: boolean  label?: string  onPhraseChange?: (index: number, phrase: string) => void  as?: ElementType  prefixClassName?: string  textClassName?: string  caretClassName?: string  className?: string}export function KeystrokeText({  phrases,  prefix,  typeSpeed = 78,  deleteSpeed = 34,  holdDelay = 1700,  gapDelay = 380,  startDelay = 400,  jitter = 0.5,  loop = true,  caret = true,  caretChar = '|',  caretBlink = 1050,  hideCaretWhileTyping = false,  label,  onPhraseChange,  as = 'span',  prefixClassName,  textClassName,  caretClassName,  className,}: KeystrokeTextProps) {  const ref = useRef<HTMLDivElement>(null)  useEffect(() => {    const el = ref.current    if (!el) return  }, [])  return <div ref={ref} className={cn('relative', className)} />}