ershisan99/home-works
1
0
Fork 0
mirror of https://github.com/IgnatZakalinsky/home-works.git synced 2025-12-17 04:49:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

hw1

Browse Source
This commit is contained in:
Andres
2022-06-22 20:39:35 +02:00
parent e1642e5f26
commit b590d5b197
8 changed files with 255 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/s1-main/App.module.css
View File

@@ -1,5 +1,6 @@
.App {
padding-top: 107px;
padding-bottom: 63px;
}
.hw {
@@ -7,5 +8,22 @@
}
.hwTitle {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 22px;
line-height: 27px;
margin-bottom: 10px;
margin-left: 70px;
}
.hwContainer {
padding: 0 70px 32px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
hr {
border-top: 1px solid #d9d9d9;
margin: 0
}

6
src/s1-main/App.tsx
View File

@@ -15,14 +15,14 @@ const App = () => {
}, [themeId])
return (
<div className={s.App} data-theme={themeId}>
<div>react homeworks:</div>
{/*<div>react homeworks:</div>*/}
{/*<HW1/>*/}
<HW1/>
{/*<HW2/>*/}
{/*<HW3/>*/}
{/*<HW4/>*/}
<HW5 />
{/*<HW5 />*/}
</div>
)
}

17
src/s2-homeworks/hw01/FriendMessage.tsx
View File

@@ -5,6 +5,7 @@ import s from './Message.module.css'
const FriendMessage = (props: any) => {
return (
<div id={'hw1-friend-message-' + props.message.id} className={s.friendMessage}>
<div className={s.friendImageAndMessage}>
<img
id={'hw1-friend-avatar-' + props.message.id}
@@ -14,25 +15,27 @@ const FriendMessage = (props: any) => {
alt={'avatar'}
//
/>
<div>
<div id={'hw1-friend-name-' + props.message.id}>
<div className={s.friendMessageText}>
<div id={'hw1-friend-name-' + props.message.id} className={s.friendName}>
{/*создаёт студент*/}
{props.message.user.name}
{/**/}
</div>
<pre id={'hw1-friend-text-' + props.message.id}>
<div id={'hw1-friend-text-' + props.message.id} className={s.friendText}>
{/*создаёт студент*/}
{props.message.message.text}
{/**/}
</pre>
<div id={'hw1-friend-time-' + props.message.id}>
</div>
</div>
</div>
<div id={'hw1-friend-time-' + props.message.id} className={s.friendTime}>
{/*создаёт студент*/}
{props.message.message.time}
{/**/}
</div>
</div>
</div>
)
}

19
src/s2-homeworks/hw01/HW1.tsx
View File

@@ -4,7 +4,7 @@ import MessageSender from './MessageSender'
import s from './Message.module.css'
import s2 from '../../s1-main/App.module.css'
import FriendMessage from './FriendMessage'
import avatar from './avatar.png'
// нужно создать правильный тип вместо any
export type MessageType = any
@@ -12,18 +12,18 @@ export type MessageType = any
export const message0: MessageType = {
id: 0,
user: {
avatar: 'https://sun9-74.userapi.com/Ph-WiuOtF985il9AvN9JqiCWedmHtSGSSTXrSA/ltEB2Z2-YO4.jpg',
avatar: avatar,
name: 'Some Name',
},
message: {
text: 'some text',
text: 'some textsome textsome textsome textsome textsome textsome text',
time: '22:00',
},
}
export const friendMessage0: MessageType = {
id: 100,
user: {
avatar: 'https://sun9-74.userapi.com/Ph-WiuOtF985il9AvN9JqiCWedmHtSGSSTXrSA/ltEB2Z2-YO4.jpg',
avatar: avatar,
name: 'Friend Name',
},
message: {
@@ -36,19 +36,24 @@ export const friendMessage0: MessageType = {
const HW1 = () => {
return (
<div id={'hw1'} className={s2.hw}>
<hr/>
{/*<hr/>*/}
{/*можно убрать этот тег*/}
<div className={s2.hwTitle}>homeworks 1</div>
<div className={s2.hwTitle}>Homework #1</div>
<hr/>
<div className={s2.hwContainer}>
{/*проверка отображения (не менять)*/}
<div>
<Message message={message0}/>
{/*не обязательно*/}
<FriendMessage message={friendMessage0}/>
</div>
{/*для автоматической проверки дз (не менять)*/}
<MessageSender M={Message}/>
</div>
<hr/>
{/*можно убрать этот тег*/}

166
src/s2-homeworks/hw01/Message.module.css
View File

@@ -1,26 +1,176 @@
.message {
display: flex;
justify-content: right;
border: 1px solid lime;
margin: 10px;
flex-direction: column;
justify-content: flex-start;
align-items: flex-end;
margin: 24px 0 23px;
}
.friendMessage {
display: flex;
border: 1px solid red;
margin: 10px;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
margin: 24px 0 23px;
}
.imageAndMessage {
display: flex;
flex-direction: row-reverse;
align-items: flex-end;
}
.friendImageAndMessage {
display: flex;
align-items: flex-end;
}
.friendName {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 18px;
line-height: 22px;
text-align: start;
}
.name {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 18px;
line-height: 22px;
color: white;
text-align: end;
}
.text {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 20px;
color: white;
}
.friendText {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 20px;
}
.messageText {
position: relative;
width: 100%;
max-width: 70%;
height: 100%;
background-color: #06c;
box-shadow: 0 5px 20px rgba(29, 33, 38, 0.03), 0 1px 2px rgba(29, 33, 38, 0.1);
display: flex;
flex-direction: column;
margin-right: 20px;
padding: 7px 25px 8px 13px;
border-radius: 10px;
}
.messageText:after {
content: ' ';
position: absolute;
width: 0;
height: 0;
right: -15px;
left: auto;
top: auto;
bottom: 0;
border: 16px solid;
border-color: transparent transparent #06c transparent;
}
.friendMessageText {
position: relative;
width: 100%;
max-width: 70%;
height: 100%;
background-color: #f5f7fb;
display: flex;
flex-direction: column;
margin-left: 20px;
padding: 7px 25px 8px 13px;
border-radius: 10px;
}
.friendMessageText:after {
content: ' ';
position: absolute;
width: 0;
height: 0;
right: auto;
left: -15px;
top: auto;
bottom: 0;
border: 16px solid;
border-color: transparent transparent #f5f7fb transparent;
}
.sendForm {
display: flex;
justify-content: right;
margin: 10px;
gap: 44px;
}
.textarea {
box-sizing: border-box;
background: #f5f7fb;
box-shadow: 0 5px 20px rgba(29, 33, 38, 0.03), 0 1px 2px rgba(29, 33, 38, 0.1);
border-radius: 20px;
width: 100%;
border: none;
resize: none;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 16px;
padding: 12px 25px;
}
.button {
width: 120px;
height: 40px;
background: #06c;
border-radius: 20px;
border: none;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: white;
}
.button:hover {
cursor: pointer;
}
.time {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 10px;
line-height: 12px;
margin-top: 5px;
width: 48px;
text-align: center;
}
img {
border-radius: 50%;
width: 48px;
height: 48px;
}
.friendTime {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 10px;
line-height: 12px;
margin-top: 5px;
width: 48px;
text-align: center;
}

17
src/s2-homeworks/hw01/Message.tsx
View File

@@ -8,34 +8,35 @@ export type MessagePropsType = any
const Message = (props: MessagePropsType) => {
return (
<div id={'hw1-message-' + props.message.id} className={s.message}>
<div className={s.imageAndMessage}>
<img
id={'hw1-avatar-' + props.message.id}
// создаёт студент
src={props.message.user.avatar}
width={'50px'} height={'50px'}
alt={'avatar'}
//
/>
<div>
<div id={'hw1-name-' + props.message.id}>
<div className={s.messageText}>
<div id={'hw1-name-' + props.message.id} className={s.name}>
{/*создаёт студент*/}
{props.message.user.name}
{/**/}
</div>
<pre id={'hw1-text-' + props.message.id}>
<div id={'hw1-text-' + props.message.id} className={s.text}>
{/*создаёт студент*/}
{props.message.message.text}
{/**/}
</pre>
<div id={'hw1-time-' + props.message.id}>
</div>
</div>
</div>
<div id={'hw1-time-' + props.message.id} className={s.time}>
{/*создаёт студент*/}
{props.message.message.time}
{/**/}
</div>
</div>
</div>
)
}

10
src/s2-homeworks/hw01/MessageSender.tsx
View File

@@ -1,5 +1,5 @@
import React, {useState} from 'react'
import {message0} from './HW1'
import React, { useState } from 'react'
import { message0 } from './HW1'
import s from './Message.module.css'
// компонента, которая тестирует вашу компоненту (не изменять, any не трогать)
@@ -29,13 +29,15 @@ const MessageSender = (props: any) => {
id={'hw1-textarea'}
value={text}
onChange={e => setText(e.currentTarget.value)}
onKeyPress={e => e.key === 'Enter' && e.shiftKey && addMessage()}
placeholder={'Type your message'}
onKeyDown={e => e.key === 'Enter' && e.shiftKey && addMessage()}
title={'Shift+Enter for send'}
className={s.textarea}
rows={1}
/>
<button id={'hw1-button'} onClick={addMessage} className={s.button}>
{/*текст кнопки могут изменить студенты*/}
send
Send
{/**/}
</button>
</div>

BIN
src/s2-homeworks/hw01/avatar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 57 KiB