123 lines
2.9 KiB
TypeScript
123 lines
2.9 KiB
TypeScript
import { Input, styled } from '@nextui-org/react'
|
|
import { SyntheticEvent, useState } from 'react'
|
|
|
|
const StyledForm = styled('form', {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
width: '100%',
|
|
padding: '0.5rem',
|
|
zIndex: 3
|
|
} as any)
|
|
|
|
const InputContainer = styled('div', {
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
flexDirection: 'row',
|
|
position: 'sticky'
|
|
} as any)
|
|
|
|
const SendButton = styled('button', {
|
|
// reset button styles
|
|
background: 'transparent',
|
|
border: 'none',
|
|
padding: 0,
|
|
// styles
|
|
width: '24px',
|
|
margin: '0 10px',
|
|
dflex: 'center',
|
|
bg: 'linear-gradient(90deg, $secondary, $primary)',
|
|
borderRadius: '$rounded',
|
|
cursor: 'pointer',
|
|
transition: 'opacity 0.25s ease 0s, transform 0.25s ease 0s',
|
|
svg: {
|
|
size: '100%',
|
|
padding: '4px',
|
|
transition: 'transform 0.25s ease 0s, opacity 200ms ease-in-out 50ms',
|
|
boxShadow: '0 5px 20px -5px rgba(0, 0, 0, 0.1)'
|
|
},
|
|
'&:hover': {
|
|
opacity: 0.8
|
|
},
|
|
'&:active': {
|
|
transform: 'scale(0.9)',
|
|
svg: {
|
|
transform: 'translate(24px, -24px)',
|
|
opacity: 0
|
|
}
|
|
}
|
|
} as any)
|
|
|
|
const SendIcon = ({
|
|
fill = 'currentColor',
|
|
filled,
|
|
size,
|
|
height,
|
|
width,
|
|
label,
|
|
className,
|
|
...props
|
|
}: any) => {
|
|
return (
|
|
<svg
|
|
data-name="Iconly/Curved/Lock"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width={size || width || 24}
|
|
height={size || height || 24}
|
|
viewBox="0 0 24 24"
|
|
className={className}
|
|
{...props}
|
|
>
|
|
<g transform="translate(2 2)">
|
|
<path
|
|
d="M19.435.582A1.933,1.933,0,0,0,17.5.079L1.408,4.76A1.919,1.919,0,0,0,.024,6.281a2.253,2.253,0,0,0,1,2.1L6.06,11.477a1.3,1.3,0,0,0,1.61-.193l5.763-5.8a.734.734,0,0,1,1.06,0,.763.763,0,0,1,0,1.067l-5.773,5.8a1.324,1.324,0,0,0-.193,1.619L11.6,19.054A1.91,1.91,0,0,0,13.263,20a2.078,2.078,0,0,0,.25-.01A1.95,1.95,0,0,0,15.144,18.6L19.916,2.525a1.964,1.964,0,0,0-.48-1.943"
|
|
fill={fill}
|
|
/>
|
|
</g>
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
interface IProps {
|
|
handleSend: (message: string) => void
|
|
}
|
|
|
|
export default function ChatboxInput({ handleSend }: IProps) {
|
|
const [message, setMessage] = useState('')
|
|
|
|
function handleMessageChange(evt: any) {
|
|
setMessage(evt.target.value)
|
|
}
|
|
|
|
function onSend(evt: SyntheticEvent<HTMLButtonElement>) {
|
|
evt.preventDefault()
|
|
if (message.length > 0) {
|
|
handleSend(message)
|
|
// Clear the input post-send.
|
|
setMessage('')
|
|
}
|
|
}
|
|
|
|
return (
|
|
<InputContainer>
|
|
<StyledForm>
|
|
<Input
|
|
fullWidth
|
|
rounded
|
|
clearable
|
|
bordered
|
|
placeholder="Message..."
|
|
aria-label="chatbox-input"
|
|
value={message}
|
|
onChange={handleMessageChange}
|
|
contentRightStyling={false}
|
|
contentRight={
|
|
<SendButton type="submit" onClick={onSend}>
|
|
<SendIcon />
|
|
</SendButton>
|
|
}
|
|
/>
|
|
</StyledForm>
|
|
</InputContainer>
|
|
)
|
|
}
|