Pin Items

Problem Statement

Create a React application that displays a list of items with the ability to "pin" individual items. Pinning an item moves it to the top of the list, and unpinning moves it back to its original position below pinned items. Each item has a checkbox to toggle the pinned state.

Requirements

1. Display a title:
   Pin Items To Top.

2. Display a list of items:
   Initially, 8 items are shown with text labels.

3. Pin/unpin functionality:

   • Each item has a checkbox to toggle its pinned status.
   • Pinned items appear at the top of the list, preserving the order in which they were pinned.
   • Unpinned items appear below pinned items, preserving their original order.

4. UI and interaction:

   • Clicking the checkbox toggles the pinned state of the item.
   • The pinned items should have a distinct style (e.g., background color, font weight).
   • The list should re-render immediately after pin/unpin to reflect the changes.

5. Accessibility & Testability:
   Use appropriate data-testid attributes for key elements to support automated testing.

Edge Cases and Constraints

• Pinning multiple items maintains their relative pinned order (the order they appear after pinning).
• Unpinning items restores their position among unpinned items without disturbing other items.
• No item can be pinned more than once simultaneously.
• The initial state should have no items pinned.
• The app should efficiently update the UI on toggle without full reload.
• Maximum number of items is 8 in the current scope but should support easy scalability.

Data Test IDs (for Testing)

• Main title (heading) ➤ data-testid="main-title" Description: The heading/title of the app

• Item list (<ul>) ➤ data-testid="item-list" Description: The list containing all items

• Pin checkbox for item 1: "Buy groceries" ➤ data-testid="pin-checkbox-1"

• Pin checkbox for item 2: "Call Alice" ➤ data-testid="pin-checkbox-2"

• Pin checkbox for item 3: "Meeting with Bob" ➤ data-testid="pin-checkbox-3"

• Pin checkbox for item 4: "Pay electricity bill" ➤ data-testid="pin-checkbox-4"

• Pin checkbox for item 5: "Read a book" ➤ data-testid="pin-checkbox-5"

• Pin checkbox for item 6: "Go for a walk" ➤ data-testid="pin-checkbox-6"

• Pin checkbox for item 7: "Fix bug #234" ➤ data-testid="pin-checkbox-7"

• Pin checkbox for item 8: "Review pull requests" ➤ data-testid="pin-checkbox-8"

Reference UI