messages components added

hipstagram/src/App.js

@@ -32,4 +32,4 @@ function App() {
   );
 }
 
-export default App;
+export default App;

hipstagram/src/Content/Messages/messages.js

@@ -2,31 +2,40 @@ import React from "react";
 import { NavLink } from "react-router-dom";
 import "./messages.css";
 
+const MessageItem = (props) => {
+
+  let path = "/messages/" + props.id;
+
+  return (
+    <div className="dialog">
+      <NavLink to={ path }> { props.name } </NavLink>
+    </div>
+  );
+};
+
+const Message = (props) => {
+  return (
+    <div className="message"> { props.message } </div>
+  )
+}
+
 const Messages = () => {
   return (
     <div className="message-wrapper">
       <div className="dialogs-items">
-        <div className="dialog">
-          <NavLink to="/messages/1">Oleh</NavLink>
-        </div>
-        <div className="dialog">
-          <NavLink to="/messages/2">Victor</NavLink>
-        </div>
-        <div className="dialog">
-          <NavLink to="/messages/3">Maria</NavLink>
-        </div>
-        <div className="dialog">
-          <NavLink to="/messages/4">Valeriy</NavLink>
-        </div>
-        <div className="dialog">
-          <NavLink to="/messages/5">John</NavLink>
-        </div>
+
+        <MessageItem name="Oleh" id="1" />
+        <MessageItem name="Victor" id="2" />
+        <MessageItem name="Maria" id="3" />
+        <MessageItem name="Valeriy" id="4" />
+        <MessageItem name="John" id="5" />
+
       </div>
 
       <div className="messages">
-        <div className="message">Hi</div>
-        <div className="message">How are u guys?</div>
-        <div className="message">Yo</div>
+        <Message message="Hi" />
+        <Message message="How is your project?" />
+        <Message message="Looks not ok" />
       </div>
     </div>
   );

hipstagram/src/Content/Profile/My posts/my posts.css

@@ -0,0 +1,18 @@
+.myposts-block {
+    padding: 10px;
+}
+
+.myposts-content__block {
+    display: grid;
+    margin: 10px;
+}
+
+.myposts-content__block button {
+    margin-top: 10px;
+    width: 156px;
+}
+
+.myposts-content__block textarea {
+    height: 100px;
+    width: 780px;
+}

hipstagram/src/Content/Profile/My posts/my posts.js

@@ -6,11 +6,10 @@ import './my posts.css';
 
 function MyPosts() {
     return(
-        <div>
+        <div className="myposts-block">
             My posts
             <div>
-
-                <div>
+                <div className='myposts-content__block'>
                     <textarea></textarea>
                     <button>Add post</button>
                 </div>

hipstagram/src/Content/Profile/ProfileInfo/profileInfo.css

@@ -0,0 +1,3 @@
+.profile-avatar {
+    padding: 10px;
+}

hipstagram/src/Content/Profile/ProfileInfo/profileInfo.js

@@ -0,0 +1,15 @@
+import './profileInfo.css';
+
+const ProfileInfo = () => {
+  return (
+    <div>
+      <div>
+        <img src="https://images.ctfassets.net/hrltx12pl8hq/6bi6wKIM5DDM5U1PtGVFcP/1c7fce6de33bb6575548a646ff9b03aa/nature-photography-pictures.jpg?fit=fill&w=800&h=300"></img>
+      </div>
+
+      <div className="profile-avatar">ava + description</div>
+    </div>
+  );
+};
+
+export default ProfileInfo;

hipstagram/src/Content/Profile/profile.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import MyPosts from './My posts/my posts';
 import './profile.css';
+import ProfileInfo from './ProfileInfo/profileInfo';
 
 
 
@@ -10,17 +11,8 @@ function Profile() {
         <div className='content-wrapper'>
 
             <div className='content'>
-                
-                <div>
-                    <img src='https://images.ctfassets.net/hrltx12pl8hq/6bi6wKIM5DDM5U1PtGVFcP/1c7fce6de33bb6575548a646ff9b03aa/nature-photography-pictures.jpg?fit=fill&w=800&h=300'></img>
-                </div>
-
-                <div>
-                    ava + description
-                </div>
-
+                <ProfileInfo />
                 <MyPosts />
-
             </div>
        </div>
     );