47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
import { Avatar } from '@app/client/components/ui/avatar';
|
|
import { Button, Icon, Stack, Textarea } from '@chakra-ui/react';
|
|
import { useState } from 'react';
|
|
|
|
export function ReviewInput({
|
|
username,
|
|
onReviewSubmit
|
|
}: {
|
|
readonly username: string;
|
|
readonly onReviewSubmit: (text: string) => Promise<void>;
|
|
}) {
|
|
const [text, setText] = useState<string>('');
|
|
return (
|
|
<Stack direction="row" alignItems="start">
|
|
<Avatar size="sm" fallback={username[0]} />
|
|
<Stack width="100%" position="relative" borderRadius="md">
|
|
<Textarea
|
|
variant="subtle"
|
|
placeholder="Write your review here..."
|
|
resize="none"
|
|
maxLength={700}
|
|
maxLines={10}
|
|
fontSize="md"
|
|
autoresize
|
|
value={text}
|
|
onChange={event => setText(event.target.value)}
|
|
/>
|
|
<Button
|
|
size="sm"
|
|
position="absolute"
|
|
right="2px"
|
|
bottom="5px"
|
|
padding={0}
|
|
variant="ghost"
|
|
onClick={async () => {
|
|
await onReviewSubmit(text);
|
|
setText('');
|
|
}}
|
|
>
|
|
<Icon>
|
|
<i className="nf nf-fa-send" />
|
|
</Icon>
|
|
</Button>
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
}
|