Create component => src/components/TaskItem.tsx

[otto-jacob]

Create a React component for src/components/TaskItem.tsx. Here are the instructions:

Task: Create TaskItem.tsx React Component

Description

We need to create a new React component called TaskItem.tsx that will be responsible for displaying individual task items in our project tasks page. This component will be written in TypeScript using ES6 syntax, such as arrow functions, and will utilize Tailwind CSS for styling.

Requirements

1. Create a new file named TaskItem.tsx inside the src/components directory.

2. Import the necessary dependencies at the top of the file:

import React from 'react';
import { ProjectTask } from '~/types';

3. Define a Props interface for this component, which should include a task prop of type ProjectTask:

interface Props {
  task: ProjectTask;
}

4. Create a functional component named TaskItem that accepts the Props interface as its props:

const TaskItem: React.FC<Props> = ({ task }) => {
  // Component implementation goes here
};

5. Inside the component, render the following elements:

   • A div container with the Tailwind CSS classes bg-white p-4 rounded-lg shadow-md to style the task item.
   • An h3 element with the Tailwind CSS classes text-lg font-semibold mb-2 to display the task name. Use the task.taskName prop for the content.
   • A p element with the Tailwind CSS classes text-gray-600 to display the task description. Use the task.taskDescription prop for the content.
   • A div container with the Tailwind CSS classes mt-4 flex items-center to hold the status indicator and the "Approved" label.
   • A status indicator that shows whether the task is approved or not. Use a span element with the Tailwind CSS classes w-4 h-4 mr-2 rounded-full and apply the class bg-green-500 if the task is approved (task.approved === true) or bg-red-500 if not approved.
   • A span element with the Tailwind CSS classes text-gray-600 to display the text "Approved" if the task is approved or "Not Approved" if not approved.

6. Export the TaskItem component as the default export:

export default TaskItem;

Example Usage

Here's an example of how the TaskItem component will be used in the parent component:

import React from 'react';
import TaskItem from '~/components/TaskItem';
import { ProjectTask } from '~/types';

const tasks: ProjectTask[] = [
  // Array of ProjectTask objects
];

const TaskList: React.FC = () => {
  return (
    <div>
      {tasks.map((task) => (
        <TaskItem key={task.id} task={task} />
      ))}
    </div>
  );
};

Testing

• Ensure that the component renders correctly with the provided props.
• Verify that the task name and description are displayed correctly.
• Check that the status indicator and the "Approved" label are displayed with the correct colors and text based on the task.approved prop.

Please submit a pull request with your changes once you have completed the task. If you have any questions or need further clarification, feel free to ask.