add friend

src/s2-homeworks/hw01/FriendMessage.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import s from './Message.module.css'
+
+// создать тип вместо any и отобразить приходящие данные
+const FriendMessage = (props: any) => {
+    return (
+        <div id={'hw1-friend-message-' + props.message.id} className={s.friendMessage}>
+            <img
+                id={'hw1-friend-avatar-' + props.message.id}
+
+                // создаёт студент
+                src={props.message.user.avatar}
+                width={'50px'} height={'50px'}
+                alt={'avatar'}
+                //
+            />
+
+            <div>
+                <div id={'hw1-friend-name-' + props.message.id}>
+                    {/*создаёт студент*/}
+                    {props.message.user.name}
+                    {/**/}
+                </div>
+                <pre id={'hw1-friend-text-' + props.message.id}>
+                    {/*создаёт студент*/}
+                    {props.message.message.text}
+                    {/**/}
+                </pre>
+                <div id={'hw1-friend-time-' + props.message.id}>
+                    {/*создаёт студент*/}
+                    {props.message.message.time}
+                    {/**/}
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default FriendMessage

src/s2-homeworks/hw01/HW1.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import Message from './Message'
 import MessageSender from './MessageSender'
 import s from './Message.module.css'
+import FriendMessage from './FriendMessage'
 
 // структуру объекта не менять
 export const message0 = {
@@ -15,6 +16,18 @@ export const message0 = {
         time: '22:00',
     },
 }
+export const friendMessage0 = {
+    id: 0,
+    user: {
+        avatar: 'https://sun9-74.userapi.com/Ph-WiuOtF985il9AvN9JqiCWedmHtSGSSTXrSA/ltEB2Z2-YO4.jpg',
+        name: 'Friend Name',
+    },
+    message: {
+        text: 'можно добавить зеркальное сообщение для тренировки css',
+        time: '22:00',
+    },
+}
+
 
 const HW1 = () => {
     return (
@@ -26,6 +39,9 @@ const HW1 = () => {
             {/*проверка отображения (не менять)*/}
             <Message message={message0}/>
 
+            {/*не обязательно*/}
+            <FriendMessage message={friendMessage0}/>
+
             {/*для автоматической проверки дз (не менять)*/}
             <MessageSender M={Message}/>
 

src/s2-homeworks/hw01/Message.module.css

@@ -8,16 +8,25 @@
 
 .message {
     display: flex;
+    justify-content: right;
     border: 1px solid lime;
     margin: 10px;
 }
 
-.sendForm {
+.friendMessage {
+    display: flex;
+    border: 1px solid red;
+    margin: 10px;
+}
 
+.sendForm {
+    display: flex;
+    justify-content: right;
+    margin: 10px;
 }
 
 .textarea {
-    margin: 0 10px;
+
 }
 
 .button {

src/s2-homeworks/hw01/MessageSender.tsx

@@ -17,7 +17,7 @@ const MessageSender = (props: any) => {
                 time: new Date().toTimeString().slice(0, 5),
             },
         }])
-        setText('')
+        setTimeout(() => setText(''), 4)
     }
 
     return (
@@ -29,6 +29,8 @@ const MessageSender = (props: any) => {
                     id={'hw1-textarea'}
                     value={text}
                     onChange={e => setText(e.currentTarget.value)}
+                    onKeyPress={e => e.key === 'Enter' && e.shiftKey && addMessage()}
+                    title={'Shift+Enter for send'}
                     className={s.textarea}
                 />
                 <button id={'hw1-button'} onClick={addMessage} className={s.button}>