39 lines
2.2 KiB
TypeScript
39 lines
2.2 KiB
TypeScript
import useTranslation from 'next-translate/useTranslation'
|
|
import TextareaAutosize from 'react-textarea-autosize'
|
|
|
|
export const SendMessage: React.FC = () => {
|
|
const { t } = useTranslation()
|
|
|
|
return (
|
|
<div className='p-6 pb-4'>
|
|
<div className='w-full h-full py-1 flex rounded-lg bg-gray-200 dark:bg-gray-800 text-gray-600 dark:text-gray-200'>
|
|
<form className='w-full h-full flex items-center'>
|
|
<TextareaAutosize
|
|
className='w-full scrollbar-firefox-support p-2 px-6 my-2 bg-transparent outline-none font-paragraph tracking-wide resize-none'
|
|
placeholder={t('application:write-a-message')}
|
|
wrap='soft'
|
|
maxRows={6}
|
|
/>
|
|
</form>
|
|
<div className='h-full flex items-center justify-around pr-6'>
|
|
<button className='w-full h-full flex items-center justify-center p-1 text-2xl transition hover:-translate-y-1'>
|
|
🙂
|
|
</button>
|
|
<button className='relative w-full h-full flex items-center justify-center p-1 text-green-800 dark:text-green-400 transition hover:-translate-y-1'>
|
|
<input
|
|
type='file'
|
|
className='absolute w-full h-full opacity-0 cursor-pointer'
|
|
/>
|
|
<svg width='25' height='25' viewBox='0 0 22 22'>
|
|
<path
|
|
d='M11 0C4.925 0 0 4.925 0 11C0 17.075 4.925 22 11 22C17.075 22 22 17.075 22 11C22 4.925 17.075 0 11 0ZM12 15C12 15.2652 11.8946 15.5196 11.7071 15.7071C11.5196 15.8946 11.2652 16 11 16C10.7348 16 10.4804 15.8946 10.2929 15.7071C10.1054 15.5196 10 15.2652 10 15V12H7C6.73478 12 6.48043 11.8946 6.29289 11.7071C6.10536 11.5196 6 11.2652 6 11C6 10.7348 6.10536 10.4804 6.29289 10.2929C6.48043 10.1054 6.73478 10 7 10H10V7C10 6.73478 10.1054 6.48043 10.2929 6.29289C10.4804 6.10536 10.7348 6 11 6C11.2652 6 11.5196 6.10536 11.7071 6.29289C11.8946 6.48043 12 6.73478 12 7V10H15C15.2652 10 15.5196 10.1054 15.7071 10.2929C15.8946 10.4804 16 10.7348 16 11C16 11.2652 15.8946 11.5196 15.7071 11.7071C15.5196 11.8946 15.2652 12 15 12H12V15Z'
|
|
fill='currentColor'
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|