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:

• [x] 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} />

• [x] 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" />

• [x] ContentArea Component

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

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

• [x] ContentHeader Component

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

    <ContentHeader title="All Tours" />

• [x] TourDescriptionText Component

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

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

• [x] 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?" />

• [x] 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} />

• [x] 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} />

• [x] 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