Implement Priority Lanes in a React Task Manager

Imagine you're building a task management application where tasks can have different levels of urgency. To help users focus on what's most important, you need to implement "priority lanes." These lanes visually separate tasks based on their priority, allowing users to quickly scan and manage high-priority items.

Problem Description

Your goal is to create a React component that displays a list of tasks, categorized into distinct "priority lanes." Each lane will represent a different priority level (e.g., "High," "Medium," "Low"). Tasks should be rendered within their corresponding lane.

Key Requirements:

1. Task Data Structure: You will be provided with an array of task objects. Each task object should have at least an id (unique identifier), a title (string), and a priority (string, e.g., "High", "Medium", "Low").
2. Priority Lanes: The application should define a set of priority lanes. For this challenge, assume the priorities are: "High," "Medium," and "Low."
3. Rendering:
   • Create a main container component that manages the rendering of these priority lanes.
   • For each defined priority level, render a distinct "lane" (e.g., a div with a heading for the priority level).
   • Within each lane, render the tasks that belong to that priority level.
   • Tasks should be displayed as individual items (e.g., div or li) within their lane.
4. Styling: While extensive styling is not the primary focus, each lane should be visually distinct (e.g., through different background colors or borders) to clearly separate them. Each task item within a lane should also be discernible.
5. Empty Lanes: If a particular priority lane has no tasks, it should still be rendered with its heading but should indicate that there are no tasks in that lane (e.g., "No High priority tasks").

Expected Behavior:

• Tasks with "High" priority should appear in the "High" priority lane.
• Tasks with "Medium" priority should appear in the "Medium" priority lane.
• Tasks with "Low" priority should appear in the "Low" priority lane.
• The order of lanes should be consistent (e.g., High, then Medium, then Low).
• The order of tasks within a lane can be based on their original input order.

Edge Cases to Consider:

• What happens if the input tasks array is empty?
• What happens if a task has a priority that is not defined in your priority lanes (e.g., "Urgent")? (For this challenge, assume all priorities will match the defined lanes, but in a real-world scenario, you might want to handle this).

Examples

Example 1:

// Input tasks array
const tasks = [
  { id: 1, title: "Fix critical bug", priority: "High" },
  { id: 2, title: "Update documentation", priority: "Low" },
  { id: 3, title: "Implement new feature", priority: "Medium" },
  { id: 4, title: "Refactor authentication module", priority: "High" },
];

Output (Conceptual Structure):

--- High Priority ---
[Task 1: Fix critical bug]
[Task 4: Refactor authentication module]

--- Medium Priority ---
[Task 3: Implement new feature]

--- Low Priority ---
[Task 2: Update documentation]

Explanation: The component should group the tasks by their priority property and render them under the corresponding lane headings.

Example 2:

// Input tasks array
const tasks = [
  { id: 5, title: "Schedule team meeting", priority: "Low" },
  { id: 6, title: "Prepare presentation slides", priority: "Medium" },
];

Output (Conceptual Structure):

--- High Priority ---
No High priority tasks.

--- Medium Priority ---
[Task 6: Prepare presentation slides]

--- Low Priority ---
[Task 5: Schedule team meeting]

Explanation: Even though there are no "High" priority tasks, the "High Priority" lane should still be displayed, indicating its emptiness.

Example 3:

// Input tasks array
const tasks: Task[] = []; // Empty array

Output (Conceptual Structure):

--- High Priority ---
No High priority tasks.

--- Medium Priority ---
No Medium priority tasks.

--- Low Priority ---
No Low priority tasks.

Explanation: When there are no tasks at all, all lanes should be rendered and indicate they are empty.

Constraints

• The tasks array will contain objects conforming to the Task interface.
• The priority property of each task object will be one of "High", "Medium", or "Low".
• The number of tasks can range from 0 to 1000.
• Component rendering performance should be reasonable for the given number of tasks.

Notes

• You'll likely want to define a TypeScript interface for your Task objects.
• Consider how you will group the tasks by priority before rendering. You might use reduce or iteration with conditional checks.
• The specific visual styling is flexible, but aim for clarity in separating the lanes and tasks.
• Think about how to make your component reusable.