implemented ratings, fixes

app/client/components/ReviewInput.tsx

@@ -0,0 +1,47 @@
+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>
+  );
+}