mirror of
https://github.com/stackblitz-labs/bolt.diy
synced 2025-01-23 03:07:05 +00:00
29 lines
771 B
TypeScript
29 lines
771 B
TypeScript
|
import { IconButton } from '~/components/ui/IconButton';
|
||
|
import { classNames } from '~/utils/classNames';
|
||
|
import React from 'react';
|
||
|
|
||
|
export const SpeechRecognitionButton = ({
|
||
|
isListening,
|
||
|
onStart,
|
||
|
onStop,
|
||
|
disabled,
|
||
|
}: {
|
||
|
isListening: boolean;
|
||
|
onStart: () => void;
|
||
|
onStop: () => void;
|
||
|
disabled: boolean;
|
||
|
}) => {
|
||
|
return (
|
||
|
<IconButton
|
||
|
title={isListening ? 'Stop listening' : 'Start speech recognition'}
|
||
|
disabled={disabled}
|
||
|
className={classNames('transition-all', {
|
||
|
'text-bolt-elements-item-contentAccent': isListening,
|
||
|
})}
|
||
|
onClick={isListening ? onStop : onStart}
|
||
|
>
|
||
|
{isListening ? <div className="i-ph:microphone-slash text-xl" /> : <div className="i-ph:microphone text-xl" />}
|
||
|
</IconButton>
|
||
|
);
|
||
|
};
|