Tasks page layout prepared.

pages/components/RecentTask.js

@@ -0,0 +1,16 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTasks, faCloud } from '@fortawesome/free-solid-svg-icons';
+
+
+const RecentTask = () => {
+    return (
+        <div>
+            <FontAwesomeIcon icon={faTasks} />
+            <span>Sortowanie bąbelkowe</span>
+            <span>Napisać algorytm sortowania bąbelkowego z implementacją…</span>
+            <FontAwesomeIcon icon={faCloud} />
+        </div>
+    )
+}
+
+export default RecentTask;

pages/components/Sidebar.js

@@ -0,0 +1,21 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSearch } from '@fortawesome/free-solid-svg-icons';
+import RecentTask from './RecentTask';
+
+const Sidebar = () => {
+    return (
+        <section className="sidebar">
+            <div>
+                <FontAwesomeIcon icon={faSearch} />
+                <input type="text" placeholder="Wyszukaj"/>
+            </div>
+            <div>
+                Ostatnie zadania
+            </div>
+            <RecentTask />
+            <RecentTask />
+        </section>
+    )
+}
+
+export default Sidebar;

pages/components/TaskDescription.js

@@ -0,0 +1,42 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faLightbulb, faCommentAlt, faThumbsUp } from '@fortawesome/free-solid-svg-icons';
+
+
+const TaskDescription = () => {
+    return (
+        <section>
+            <div>
+               <FontAwesomeIcon icon={faLightbulb} />
+               <span>Opis zadania</span>
+               {/* <div>
+                   <span><FontAwesomeIcon icon={faCommentAlt} /></span>
+                   <span>100%</span>
+               </div>
+               <div>
+                   <span><FontAwesomeIcon icon={faThumbsUp} /></span>
+                   <span>1000</span>
+               </div> */}
+            </div>
+            <div>
+                {/* <div>
+                    <span>Limit pamięci</span>
+                    <span>1024 MB</span>
+                </div> */}
+                <span>Dowolny język programowania</span>
+            </div>
+            <div>
+                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.
+            </div>
+            <div>
+                <h2>Szczegóły zadania</h2>
+                <div>
+                    <p>Napisz program, który: wczyta ze standardowego ciąg liczb całkowitych nieujemnych zakończony liczbą 0, wypisze wszystkie wszystkie liczby z tego ciągu (wraz z końcowym zerem) w porządku niemalejącym.</p>
+                    <p>Wejście zawiera pewną ilość liczb całkowitych nieujemnych, nie większych niż . Każda z tych liczb zapisana będzie w osobnym wierszu. W ostatnim wierszu zapisana będzie liczba 0. Możesz założyć, że liczba 0 nie pojawi się nigdzie wcześniej wśród podanych elementów.</p>
+                    <p>Wyjście Twojego programu powinno stanowić dokładnie tyle samo wierszy, ile liczb było na standardowym wejściu. Liczby te muszą być wypisane w porządku niemalejącym.</p>
+                </div>
+            </div>
+        </section>
+    )
+}
+
+export default TaskDescription;

pages/tasks.js

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

style.css

@@ -230,3 +230,13 @@ form button:last-of-type {
     color: #8F9DBE;
     text-align: end;
 }
+
+/* tasks */
+
+main {
+    display: flex;
+}
+
+.sidebar {
+    position: absolute;
+}