Develop a page for creating new product tour items and show it.

[uparkalau]

Develop a user interface component for creating new product tour items. This task involves splitting the interface into smaller, reusable components and integrating them into the overall design. Use example as guidance , fill free to change all necessary props and names. Integrate it with our existing components (button etc.)

Requirements:

• Integrate ProductTour page.

• Product Page has to be available if click on left menu sdiebar.

• The main interface should be split into the following components:

• TourList Component

  • Props:
    • items: Array of objects containing title and timestamp.
    • onSelectItem: Function to handle item selection.
  • Example:

    <TourList items={[{ title: 'Tour 1', timestamp: '10:00 AM', idTour: '184293', text: 'some text' }]} onSelectItem={handleSelect} />

• TourListItem Component

  • Props:
    • title: String representing the tour title.
    • timestamp: String representing the time of the tour.
  • Example:

    <TourListItem title="Tour 1" timestamp="10:00 AM" />

• ContentArea Component

  • Props:
    • children: React nodes to be rendered inside the container.
  • Example:

    <ContentArea>
      <div>Content goes here</div>
    </ContentArea>

• ContentHeader Component

  • Props:
    • title: String for the content header.
  • Example:

    <ContentHeader title="All Tours" />

• TourDescriptionText Component

  • Props:
    • description: String for the tour description.
  • Example:

    <TourDescriptionText description="Learn about the dashboard features." />

• InfoTooltip Component

  • Props:
    • text: String for the tooltip text.
  • title: some title text
  • Example:

    <InfoTooltip text="More info here" title="What is a product tour?" />

• Add Delete Icon to TourListItem Component

  • Props:
    • onDelete: Function to handle the delete action.
  • Example:

    <TourListItem title="Tour 1" timestamp="10:00 AM" onDelete={handleDelete} />

• Add Settings Icon to TourListItem Component

  • Props:
    • onEdit: Function to handle the edit action.
  • Example:

    <TourListItem title="Tour 1" timestamp="10:00 AM" onEdit={handleEdit} />

• Implement Confirmation Popup Component

  • Props:
    • open: Boolean to control the visibility of the popup.
    • onConfirm: Function to handle the confirmation action.
    • onCancel: Function to handle the cancellation action.
  • Example:

    <ConfirmationPopup open={isPopupOpen} onConfirm={handleConfirmDelete} onCancel={handleCancelDelete} />

• The delete and settings icons should be Material-UI IconButton components with appropriate icons.

• The confirmation popup should be a Material-UI Dialog component.

• All new functionality should be fully responsive and accessible.

Implementation Details:

• Utilize React hooks for state and lifecycle management within functional components.
• Apply CSS modules or styled-components for scoped styling and to avoid style conflicts.
• Integrate the components into the ProductTour page, ensuring they work together smoothly.
• Follow the color scheme and design guidelines from the provided in figma.
  https://www.figma.com/design/MLPbP1HM2L9ON6f88pHTee/User-onboarding?node-id=0-1&t=zfaJdBG4PYDSysBJ-1