| 1 |
import { useEffect, useRef, useState } from '@wordpress/element' |
| 2 |
import { __ } from '@wordpress/i18n' |
| 3 |
import { Icon } from '@wordpress/icons' |
| 4 |
import { send } from '@chat/svg' |
| 5 |
import classnames from 'classnames' |
| 6 |
|
| 7 |
export const Question = ({ setQuestion }) => { |
| 8 |
const queryInput = useRef(null) |
| 9 |
const [inputValue, setInputValue] = useState('') |
| 10 |
|
| 11 |
const submit = (e) => { |
| 12 |
e.preventDefault() |
| 13 |
|
| 14 |
if (!inputValue) { |
| 15 |
return |
| 16 |
} |
| 17 |
|
| 18 |
setQuestion(inputValue) |
| 19 |
} |
| 20 |
|
| 21 |
useEffect(() => { |
| 22 |
// Focus the input when the component mounts |
| 23 |
queryInput.current.focus() |
| 24 |
}, []) |
| 25 |
|
| 26 |
return ( |
| 27 |
<form onSubmit={submit} className="py-20"> |
| 28 |
<p className="text-lg font-medium m-0 mb-1 opacity-80"> |
| 29 |
{__('Hi there!', 'extendify')} |
| 30 |
</p> |
| 31 |
<p className="text-2xl font-medium m-0 mb-6"> |
| 32 |
{__('Ask me any questions about WordPress.', 'extendify')} |
| 33 |
</p> |
| 34 |
<div className="relative"> |
| 35 |
<input |
| 36 |
type="text" |
| 37 |
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" |
| 38 |
placeholder={__( |
| 39 |
'Ask your WordPress question…', |
| 40 |
'extendify', |
| 41 |
)} |
| 42 |
value={inputValue} |
| 43 |
maxLength={255} |
| 44 |
onChange={(e) => setInputValue(e.target.value)} |
| 45 |
ref={queryInput} |
| 46 |
/> |
| 47 |
<button |
| 48 |
type="submit" |
| 49 |
className={classnames( |
| 50 |
'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', |
| 51 |
)} |
| 52 |
disabled={!inputValue}> |
| 53 |
<Icon icon={send} className="w-4 h-4" /> |
| 54 |
</button> |
| 55 |
</div> |
| 56 |
<input type="submit" className="hidden" /> |
| 57 |
</form> |
| 58 |
) |
| 59 |
} |
| 60 |
|
