"use client"
 
import { useTextToVoice } from "@/hooks/use-speakup"
 
export function Component() {
  const {
    speak,
    pause,
    resume,
    cancel,
    isSpeaking,
    isPaused,
    voices,
    setVoice,
  } = useTextToVoice({
    text: "Hello, this is a long text that will be chunked into smaller parts.",
    pitch: 1.2,
    rate: 1.1,
    volume: 0.8,
    chunkSize: 100,
  })
 
  return (
    <div>
      <button onClick={speak}>Speak</button>
      <button onClick={pause} disabled={!isSpeaking}>
        Pause
      </button>
      <button onClick={resume} disabled={!isPaused}>
        Resume
      </button>
      <button onClick={cancel}>Stop</button>
      <select onChange={(e) => setVoice(e.target.value)}>
        {voices.map((voice) => (
          <option key={voice} value={voice}>
            {voice}
          </option>
        ))}
      </select>
    </div>
  )
}

"use client"
 
import { useVoiceToText } from "@/hooks/use-speakup"
 
export function Component() {
  const {
    startListening,
    stopListening,
    isListening,
    isStopped,
    transcript,
    reset,
    isSupported,
  } = useVoiceToText({ lang: "en-US", continuous: true })
 
  return (
    <div>
      <button onClick={startListening} disabled={isListening}>
        Start Listening
      </button>
      <button onClick={stopListening} disabled={!isListening}>
        Stop Listening
      </button>
      <button onClick={reset}>Reset</button>
      <p>{transcript}</p>
      {!isSupported && <p>Your browser does not support speech recognition.</p>}
      {isStopped && <p>Speech recognition stopped.</p>}
    </div>
  )
}