Task list table

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

@@ -1,11 +1,57 @@
 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>;
+// assigning styling for priorities
+export function TaskItem({
+  title,
+  priority,
+  realiseDate,
+  designers,
+  projectName,
+}) {
+  const getPriorityClass = () => {
+    if (priority === 'Low') return `${styles.lowPriority}`;
+    if (priority === 'Medium') return `${styles.mediumPriority}`;
+    if (priority === 'High') return `${styles.highPriority}`;
+    return '';
+  };
+
+  return (
+    <div className={styles.itemWrapper}>
+      <div className={`${styles.titleStyle}`}>{title}</div>
+      <div>
+        <div className={`${styles.priorityStyle} ${getPriorityClass()}`}>
+          {priority}
+        </div>
+      </div>
+      <div className={`${styles.dateStyle}`}>
+        <img
+          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAlUlEQVR4nOWRMQ6DMAxF30QZWIN6QzZWRjrCubhBK3GDFm4RlMqVrOAALWOfFDlx/v+JZNjGy/oZ/8cBPrEO0xjmds9UAE6db8oc9h+caFfmAXgAZRSizaVohjjEyYWXmhs/zCON/u2b0LgDNWkqYASuKcFFagb0wAt4Ap30tGaTzphC6JlYcw4vxwFTymMFzN8EnGIBv75ESzHoS2YAAAAASUVORK5CYII="
+          alt="sunset"
+        />
+        <div>{realiseDate}</div>
+      </div>
+      <div className={`${styles.designersStyle}`}>
+        <img
+          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAABaElEQVR4nO2Vy0rDQBSGPxQvYG3dCfoIoq60j6H2Lbw+g2sR1KK+h7gUlxJFFDda3eoDKCpWxBsjf0vaycQkTsFFPjgEcv7/5JxkMgM5OTn/lD5gGTgGnhUBsAT0dsDXwihwAXw54hwY8eizJmgUuQRmgEHFLFBT7qxtoqw+ixUJr4CSnf651yi26MFncSKRmcDFnDSBB5/Fk0Tm1bkoSvPowWfxkKBQSZp7Dz6LQCKzcFxUpDny4LNYkKjmWExDwI008x58Fj36VYzwWgunqKiEipxK+1dfJMMq4tpQatL48rVgNpQq8B5TyOQ2Izai33xvwGrcG+gG9iWu6yHTwICiDGwBr9Ic6MH9wGEK3x7QFdXAugS3wLirS2ASuJN2B9jN4FtrT04AH5ogrki4mJnoU5HWZz7VWDixrc42SE419H2z+My1SeOgmCI55VADWXzm1GxS180CySmEGsjie0nhycnJoWN8A4H+uwQ/ulm4AAAAAElFTkSuQmCC"
+          alt="user-group-man-man--v1"
+        />
+        <div>{designers}</div>
+      </div>
+      <div className={`${styles.projectStyle}`}>{projectName}</div>
+    </div>
+  );
 }
+
+TaskItem.propTypes = {
+  title: PropTypes.string.isRequired,
+  priority: PropTypes.string.isRequired,
+  realiseDate: PropTypes.string.isRequired,
+  designers: PropTypes.string.isRequired,
+  projectName: PropTypes.string.isRequired,
+};

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

@@ -0,0 +1,57 @@
+.itemWrapper {
+  background-color: var(--light-blue);
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  width: 100%;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  border-radius: 10px;
+}
+
+.itemWrapper > div {
+  width: 25%;
+  padding-left: 20px;
+}
+
+.titleStyle {
+  font-weight: bold;
+}
+
+.priorityStyle {
+  text-align: center;
+  border-radius: 15px;
+  width: fit-content;
+  padding: 5px;
+}
+
+.lowPriority {
+  color: white;
+  background-color: var(--green);
+}
+
+.mediumPriority {
+  color: white;
+  background-color: var(--orange);
+}
+
+.highPriority {
+  color: white;
+  background-color: var(--red);
+}
+
+.dateStyle {
+  gap: 5px;
+  display: flex;
+  align-items: center;
+}
+
+.designersStyle {
+  gap: 5px;
+  display: flex;
+  align-items: center;
+}
+
+.projectStyle {
+  font-weight: bold;
+}

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

@@ -1,3 +1,4 @@
+import { TaskItem } from '../TaskItem/TaskItem';
 import styles from './TaskList.module.css';
 
 /*
@@ -8,7 +9,43 @@ Create a taskItems array and return a list of <TaskItem /> components.
 
 export function TaskList() {
   // create some task items here and return one task list for each item you have
-  const taskItems = [];
 
-  return <div className={styles.listWrapper}></div>;
+  const taskItems = [
+    {
+      title: 'Re-work UI/UX',
+      priority: 'Low',
+      realiseDate: '12/05/2025',
+      designers: 'Said, Rachael',
+      projectName: 'Time App',
+    },
+    {
+      title: 'Dark mode toggle',
+      priority: 'High',
+      realiseDate: '09/03/2025',
+      designers: 'Umair, Precious',
+      projectName: 'ASA Darkmode Feature',
+    },
+    {
+      title: 'Accessibility checks',
+      priority: 'Medium',
+      realiseDate: '15/04/2025',
+      designers: 'Michael, Ricardo',
+      projectName: 'Time App',
+    },
+    {
+      title: 'Notification integration',
+      priority: 'High',
+      realiseDate: '11/03/2025',
+      designers: 'Ebtesam, Deborah',
+      projectName: 'Time App',
+    },
+  ];
+
+  return (
+    <div className={styles.listWrapper}>
+      {taskItems.map((task) => (
+        <TaskItem key={task.title} {...task} />
+      ))}
+    </div>
+  );
 }

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

@@ -0,0 +1,12 @@
+.listWrapper {
+  background-color: var(--light-grey);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 40px;
+  gap: 10px;
+  border-radius: 10px;
+  margin-left: 50px;
+  margin-right: 50px;
+}

web/src/index.css

@@ -4,13 +4,22 @@
   box-sizing: border-box;
 }
 
+:root {
+  --green: #6fcf97;
+  --light-grey: #ebebeb;
+  --light-blue: #d0d9e1;
+  --orange: #f2994a;
+  --red: #eb5757;
+}
+
 html,
 body {
   height: 100%;
 }
 
 body {
-  font-family: inherit;
+  font-family: Arial, Helvetica, sans-serif;
+
   line-height: inherit;
   font-size: 100%;
   -webkit-font-smoothing: antialiased;