feat(messages): add animations (#31)

components/Application/Messages/Message/EditMessage/EditMessage.tsx

@@ -0,0 +1,48 @@
+import useTranslation from 'next-translate/useTranslation'
+import TextareaAutosize from 'react-textarea-autosize'
+
+import type { MessageProps } from '../Message'
+
+export interface EditMessageProps extends MessageProps {
+  handleEdit: () => Promise<void>
+  handleKeyDown: React.KeyboardEventHandler<HTMLFormElement>
+  textareaRef: React.RefObject<HTMLTextAreaElement>
+}
+
+export const EditMessage: React.FC<
+  React.PropsWithChildren<EditMessageProps>
+> = ({ handleEdit, handleKeyDown, textareaRef, message }) => {
+  const { t } = useTranslation()
+
+  const handleEditSubmit: React.FormEventHandler<HTMLFormElement> = async (
+    event
+  ) => {
+    event.preventDefault()
+    await handleEdit()
+  }
+
+  return (
+    <form
+      className='flex h-full w-full items-center'
+      onSubmit={handleEditSubmit}
+      onKeyDown={handleKeyDown}
+    >
+      <TextareaAutosize
+        className='scrollbar-firefox-support w-full resize-none bg-transparent p-2 tracking-wide outline-none'
+        placeholder={t('application:write-a-message')}
+        wrap='soft'
+        maxRows={6}
+        name='message'
+        defaultValue={message.value}
+        ref={textareaRef}
+        autoFocus
+        onFocus={(event) => {
+          event.currentTarget.setSelectionRange(
+            event.currentTarget.value.length,
+            event.currentTarget.value.length
+          )
+        }}
+      />
+    </form>
+  )
+}

components/Application/Messages/Message/EditMessage/index.ts

@@ -0,0 +1 @@
+export * from './EditMessage'