34 lines
1.2 KiB
TypeScript
34 lines
1.2 KiB
TypeScript
|
import React from 'react'
|
||
|
|
import { Input } from '../ui/input'
|
||
|
|
import { InputGroup, InputGroupAddon, InputGroupButton } from '../ui/input-group'
|
||
|
|
import { Textarea } from '../ui/textarea'
|
||
|
|
|
||
|
|
export default function ChatBox() {
|
||
|
|
return (
|
||
|
|
<div className='flex flex-col'>
|
||
|
|
<div className='grow flex flex-col'>
|
||
|
|
CHAT MESSAGES
|
||
|
|
<div className='p-1 rounded-2xl border max-w-1/2 self-start'>Placeholder message</div>
|
||
|
|
<div className='p-1 rounded-2xl border max-w-1/2 self-end'>Placeholder message</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div className="grid w-full max-w-sm gap-6">
|
||
|
|
<InputGroup>
|
||
|
|
<Textarea
|
||
|
|
data-slot="input-group-control"
|
||
|
|
className="flex field-sizing-content min-h-16 w-full resize-none rounded-md bg-transparent px-3 py-2.5 text-base transition-[color,box-shadow] outline-none md:text-sm"
|
||
|
|
placeholder="Message..."
|
||
|
|
/>
|
||
|
|
<InputGroupAddon align="block-end">
|
||
|
|
<InputGroupButton className="ml-auto" size="sm" variant="default">
|
||
|
|
Send
|
||
|
|
</InputGroupButton>
|
||
|
|
</InputGroupAddon>
|
||
|
|
</InputGroup>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|