Active tasks page prepared.

pages/active-tasks.js

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

pages/components/ActiveTask.js

@@ -0,0 +1,29 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTasks } from '@fortawesome/free-solid-svg-icons';
+import ActiveTasks from './ActiveTasks';
+
+const ActiveTask = () => {
+    return (
+        <div className="active-task">
+            <div className="recent-task">
+                <span><FontAwesomeIcon icon={faTasks} /></span>
+                <span className="recent-task-description">
+                    <span>Sortowanie bąbelkowe</span>
+                    <span className="required-programming-languages">Dowolny język programowania</span>
+                </span>
+                <span><image src="/UAM-logo-siw-amu.jpg" alt="" /></span>
+            </div>
+            <div className="active-task-summary">
+                <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>
+            <div>
+                <span>1 godzinę temu</span>
+                <span>Zobacz <FontAwesomeIcon icon={faTasks} /> </span>
+            </div>
+        </div>
+    )
+}
+
+export default ActiveTask;

pages/components/ActiveTasks.js

@@ -0,0 +1,24 @@
+import ActiveTask from "./ActiveTask"
+
+const ActiveTasks = () => {
+    return (
+        <section className="task-description">
+            <div className="task-description">
+                <div className="task-general-info">
+                    <div>
+                        <h2>Zadania</h2>
+                        <h2>Aktywne: 100</h2>
+                        {/* <p>Firmy: 100</p> */}
+                    </div>
+                </div>
+                <div className="task-area">
+                    <ActiveTask />
+                    <ActiveTask />
+                    <ActiveTask />
+                </div>
+            </div>
+        </section>
+    )
+};
+
+export default ActiveTasks;

pages/components/TaskDescription.js

@@ -33,7 +33,7 @@ const TaskDescription = () => {
                             <span>Limit pamięci</span>
                             <span>1024 MB</span>
                         </div> */}
-                        <span>Dowolny język programowania</span>
+                        <span className="required-programming-languages">Dowolny język programowania</span>
                     </div>
                     <div className="task-description-summary">
                         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 wczytywał liczby ze standardowego wejścia, tak długo, aż wczytaną liczbą będzie 0 oraz wypisze wszystkie wczytane liczby w porządku niemalejącym.

style.css

@@ -326,7 +326,7 @@ div.task-description {
     border-bottom: var(--sidebar-border);
 }
 
-.programming-languages span {
+.required-programming-languages {
     padding: 1%;
     border-radius: 10px;
     background: #D7D0F0;
@@ -453,3 +453,64 @@ div.task-description {
     align-self: center;
     color: #838EAB;
 }
+
+/* active task */
+
+.active-task {
+    border-radius: 4px;
+    background: #FFF;
+    font-size: 90%;
+}
+
+.active-task .recent-task {
+    border-bottom: var(--sidebar-border);
+    padding: .5rem;
+}
+
+.active-task .recent-task svg {
+    color: #FE716C;
+}
+
+.active-task img {
+    width: 2em;
+}
+
+.active-task-summary {
+    background: #F6F9FC;
+}
+
+.active-task-summary span {
+    display: inline-block;
+    margin: 1em;
+    padding: .5em;
+    background: #FFF;
+    border-radius: 4px;
+}
+
+.active-task > div:last-of-type {
+    display: flex;
+    justify-content: space-between;
+    padding: .5rem;
+}
+
+.active-task > div:last-of-type span {
+    padding: .5rem;
+}
+
+.active-task > div:last-of-type span:first-of-type {
+    color: #838EAB;
+}
+
+.active-task > div:last-of-type span:last-of-type {
+    border-radius: 4px;
+    color: #FFF;
+    background: #4457F3;
+}
+
+/* active tasks */
+
+.task-area {
+    display: grid;
+    grid: auto / 1fr 1fr;
+    grid-gap: 2em;
+}