Added tasks page prepared.

pages/added-tasks.js

@@ -0,0 +1,13 @@
+import Sidebar from './components/Sidebar';
+import ActiveTasks from './components/ActiveTasks';
+
+const AddedTasksPage = () => {
+    return (
+        <main>
+            <Sidebar />
+            <ActiveTasks ownTasks="ownTasks"/>
+        </main>
+    )
+};
+
+export default AddedTasksPage;

pages/components/ActiveTask.js

@@ -1,7 +1,9 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faTasks } from '@fortawesome/free-solid-svg-icons';
+import { faTasks, faPaperPlane } from '@fortawesome/free-solid-svg-icons';
+
+const ActiveTask = props => {
+    const isOwnTask = props.ownTask === "ownTask"; 
 
-const ActiveTask = () => {
     return (
         <div className="active-task">
             <div className="recent-task">
@@ -13,10 +15,21 @@ const ActiveTask = () => {
                 <span><image src="/UAM-logo-siw-amu.jpg" alt="" /></span>
             </div>
             <div className="active-task-summary">
+                {isOwnTask ?
+                <span>
+                    Autor rozwiązania: Jan Kowalski
+                </span>
+                :
                 <span>
                     Twoim zadaniem będzie posortowanie ciągu liczb całkowitych. Jednakże nie podajemy ograniczenia na liczbę elementów tego ciągu. Napisz program, który będzie fajny. 
                 </span>
+                }
             </div>
+            {isOwnTask &&
+            <div className="solution-add-message-bottom">
+                <button><FontAwesomeIcon icon={faPaperPlane} /> Wyślij wiadomość</button>
+            </div>
+            }
             <div>
                 <span>1 godzinę temu</span>
                 <span>Zobacz <FontAwesomeIcon icon={faTasks} /> </span>

pages/components/ActiveTasks.js

@@ -1,9 +1,12 @@
 import ActiveTask from "./ActiveTask"
 
-const ActiveTasks = () => {
+const ActiveTasks = props => {
+    const isOwnTask = props.ownTasks === "ownTasks"; 
+
     return (
         <section className="task-description">
             <div className="task-description">
+                {!isOwnTask &&
                 <div className="task-general-info">
                     <div>
                         <h2>Zadania</h2>
@@ -11,10 +14,11 @@ const ActiveTasks = () => {
                         {/* <p>Firmy: 100</p> */}
                     </div>
                 </div>
+                }
                 <div className="task-area">
-                    <ActiveTask />
-                    <ActiveTask />
-                    <ActiveTask />
+                    <ActiveTask ownTask={isOwnTask && "ownTask"}/>
+                    <ActiveTask ownTask={isOwnTask && "ownTask"}/>
+                    <ActiveTask ownTask={isOwnTask && "ownTask"}/>
                 </div>
             </div>
         </section>

style.css

@@ -261,6 +261,10 @@ main {
 
 }
 
+section.task-description{
+    width: 100%;
+}
+
 div.task-description {
     /* position: absolute;
     left: 350px; */