class-jul2024-1 / Kostiantyn Kovalchuk / Task-tracker challenge

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}

web/src/App.jsx

@@ -1,9 +1,40 @@
 import { TaskList } from './components/domains/task/TaskList/TaskList';
 
+const taskItems = [
+  {
+    name: 'Re-work UI/UX',
+    priority: 'Low',
+    releaseDate: '12/05/2025',
+    designers: ['Said', 'Rachael'],
+    projectName: 'Time App',
+  },
+  {
+    name: 'Dark mode toggle',
+    priority: 'High',
+    releaseDate: '09/03/2025',
+    designers: ['Umair', 'Precious'],
+    projectName: 'ASA Darkmode Feature',
+  },
+  {
+    name: 'Accessibility checks',
+    priority: 'Medium',
+    releaseDate: '15/04/2025',
+    designers: ['Michael', 'Ricardo'],
+    projectName: 'Time App',
+  },
+  {
+    name: 'Notification integration',
+    priority: 'High',
+    releaseDate: '11/03/2025',
+    designers: ['Ebtesam', 'Deborah'],
+    projectName: 'Time App',
+  },
+];
+
 function App() {
   return (
     <>
-      <TaskList />
+      <TaskList initialTaskItems={taskItems} />
     </>
   );
 }

web/src/components/domains/task/TaskItem/TaskItem.jsx

@@ -1,11 +1,30 @@
 import styles from './TaskItem.module.css';
+import PropTypes from 'prop-types';
 
-/*
-Please create the <TaskItem /> component following the design from the Figma file.
-Please make sure to add styles using CSS Modules.
-Add the necessary props to the component.
-*/
-
-export function TaskItem(props) {
-  return <div className={styles.itemWrapper}></div>;
+export function TaskItem({
+  name,
+  priority,
+  releaseDate,
+  designers,
+  projectName,
+}) {
+  return (
+    <li className={styles.taskItem}>
+      <h3 className="section">{name}</h3>
+      <p className="section">{priority}</p>
+      <p className="section">{releaseDate}</p>
+      <p className="section">{designers.join(', ')}</p>
+      <p className="section">
+        <strong>{projectName}</strong>
+      </p>
+    </li>
+  );
 }
+
+TaskItem.propTypes = {
+  name: PropTypes.string.isRequired,
+  priority: PropTypes.string.isRequired,
+  releaseDate: PropTypes.string.isRequired,
+  designers: PropTypes.arrayOf(PropTypes.string).isRequired,
+  projectName: PropTypes.string.isRequired,
+};

web/src/components/domains/task/TaskItem/TaskItem.module.css

@@ -0,0 +1,14 @@
+.taskItem {
+  display: grid;
+  grid-template-columns: 1.5fr 0.5fr 1fr 1fr 1fr;
+  align-items: center;
+  gap: 10px;
+  padding: 10px;
+  background-color: #e0e4ea;
+  border-radius: 10px;
+  margin: 1rem;
+}
+
+.section {
+  text-align: left;
+}