/home/smartbloks/.trash/extendify/src/Chat/components/dialog/Question.js
import { useEffect, useRef, useState } from '@wordpress/element'
import { __ } from '@wordpress/i18n'
import { Icon } from '@wordpress/icons'
import { send } from '@chat/svg'
import classnames from 'classnames'
export const Question = ({ setQuestion }) => {
const queryInput = useRef(null)
const [inputValue, setInputValue] = useState('')
const submit = (e) => {
e.preventDefault()
if (!inputValue) {
return
}
setQuestion(inputValue)
}
useEffect(() => {
// Focus the input when the component mounts
queryInput.current.focus()
}, [])
return (
<form onSubmit={submit} className="py-20">
<p className="text-lg font-medium m-0 mb-1 opacity-80">
{__('Hi there!', 'extendify')}
</p>
<p className="text-2xl font-medium m-0 mb-6">
{__('Ask me any questions about WordPress.', 'extendify')}
</p>
<div className="relative">
<input
type="text"
className="w-full py-4 pl-3 pr-10 placeholder-gray-600 rounded border shadow border-gray-300 bg-white outline-none disabled:border-gray-300 disabled:cursor-default"
placeholder={__(
'Ask your WordPress question…',
'extendify',
)}
value={inputValue}
maxLength={255}
onChange={(e) => setInputValue(e.target.value)}
ref={queryInput}
/>
<button
type="submit"
className={classnames(
'absolute top-0 right-1.5 h-full bg-transparent border-none fill-current flex items-center cursor-pointer text-gray-700 hover:text-gray-900',
)}
disabled={!inputValue}>
<Icon icon={send} className="w-4 h-4" />
</button>
</div>
<input type="submit" className="hidden" />
</form>
)
}