diff --git a/src/s2-homeworks/hw01/FriendMessage.tsx b/src/s2-homeworks/hw01/FriendMessage.tsx new file mode 100644 index 0000000..df56ab7 --- /dev/null +++ b/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 ( +
+ {'avatar'} + +
+
+ {/*создаёт студент*/} + {props.message.user.name} + {/**/} +
+
+                    {/*создаёт студент*/}
+                    {props.message.message.text}
+                    {/**/}
+                
+
+ {/*создаёт студент*/} + {props.message.message.time} + {/**/} +
+
+
+ ) +} + +export default FriendMessage diff --git a/src/s2-homeworks/hw01/HW1.tsx b/src/s2-homeworks/hw01/HW1.tsx index 3ac9604..d0bd619 100644 --- a/src/s2-homeworks/hw01/HW1.tsx +++ b/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 = () => { {/*проверка отображения (не менять)*/} + {/*не обязательно*/} + + {/*для автоматической проверки дз (не менять)*/} diff --git a/src/s2-homeworks/hw01/Message.module.css b/src/s2-homeworks/hw01/Message.module.css index 2dc1f88..b70ebcf 100644 --- a/src/s2-homeworks/hw01/Message.module.css +++ b/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 { diff --git a/src/s2-homeworks/hw01/MessageSender.tsx b/src/s2-homeworks/hw01/MessageSender.tsx index f4a217a..24ac10f 100644 --- a/src/s2-homeworks/hw01/MessageSender.tsx +++ b/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} />