Migracode|Afere Precious Onome|Task Manager Exercise.

web/src/App.jsx

@@ -1,9 +1,64 @@
-import { TaskList } from './components/domains/task/TaskList/TaskList';
+// import TaskItem from './components/domains/task/TaskItem/TaskItem';
+import TaskList from './components/domains/task/TaskList/TaskList';
 
 function App() {
   return (
     <>
-      <TaskList />
+      <h1>Task Manager</h1>
+      {/* <TaskItem /> */}
+
+      <TaskList
+        tasks={[
+          {
+            id: 1,
+            ProjectName: 'Re-work UI/UX',
+            priority: 'low',
+            dueDate: '12/05/2025',
+            assignee: 'Said & Rachel',
+            project: 'Time App',
+            photos: ['https://cdn-icons-png.flaticon.com/512/430/430485.png'],
+            studentPhotos: [
+              'https://www.svgrepo.com/show/502898/user-group.svg',
+            ],
+          },
+          {
+            id: 2,
+            ProjectName: 'Dark mode toggle',
+            priority: 'high',
+            dueDate: '09/03/2025',
+            assignee: 'Umair & Precious',
+            project: 'Asa Dark-mode Feature',
+            photos: ['https://cdn-icons-png.flaticon.com/512/430/430485.png'],
+            studentPhotos: [
+              'https://www.svgrepo.com/show/502898/user-group.svg',
+            ],
+          },
+          {
+            id: 3,
+            ProjectName: 'Accessibility check',
+            priority: 'medium',
+            dueDate: '15/04/2025',
+            assignee: 'Michel & Ricardo',
+            project: 'Timer App',
+            photos: ['https://cdn-icons-png.flaticon.com/512/430/430485.png'],
+            studentPhotos: [
+              'https://www.svgrepo.com/show/502898/user-group.svg',
+            ],
+          },
+          {
+            id: 4,
+            ProjectName: 'Notification Integration',
+            priority: 'high',
+            dueDate: '11/03/2025',
+            assignee: 'Ebetsam & Deborah',
+            project: 'Timer App',
+            photos: ['https://cdn-icons-png.flaticon.com/512/430/430485.png'],
+            studentPhotos: [
+              'https://www.svgrepo.com/show/502898/user-group.svg',
+            ],
+          },
+        ]}
+      />
     </>
   );
 }

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

@@ -1,11 +1,68 @@
 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>;
+function TaskItem(props) {
+  function colorBox() {
+    if (props.priority === 'low') {
+      return styles.btnGreen;
+    }
+    if (props.priority === 'medium') {
+      return styles.btnYellow;
+    }
+    if (props.priority === 'high') {
+      return styles.btnRed;
+    }
+  }
+  return (
+    <div className={styles.mainContainer}>
+      <h4>{props.ProjectName}</h4>
+      <button className={colorBox()}>{props.priority}</button>
+      <p className={styles.dueDate}>
+        <span>
+          {props.photos.map((photo, index) => (
+            <img
+              key={index}
+              src={photo}
+              alt="Photo"
+              style={{ width: '20px', height: '20px', marginRight: '5px' }}
+            />
+          ))}
+        </span>
+        {props.dueDate}
+      </p>
+
+      <p className={styles.assignee}>
+        <span>
+          {props.studentPhotos.map((pic, index) => (
+            <img
+              key={index}
+              src={pic}
+              alt="Photo"
+              style={{ width: '20px', height: '20px', marginRight: '5px' }}
+            />
+          ))}
+        </span>
+        {props.assignee}
+      </p>
+      <p className={styles.projectItem}>{props.project}</p>
+    </div>
+  );
 }
+
+TaskItem.propTypes = {
+  ProjectName: PropTypes.string.isRequired,
+  priority: PropTypes.oneOf(['low', 'medium', 'high']).isRequired,
+  dueDate: PropTypes.string.isRequired,
+  assignee: PropTypes.string.isRequired,
+  project: PropTypes.string.isRequired,
+  photos: PropTypes.arrayOf(PropTypes.string).isRequired,
+  studentPhotos: PropTypes.arrayOf(PropTypes.string).isRequired,
+};
+
+export default TaskItem;