comp: Create a PopConfirm component

[pingSubhajit]

This issue proposes the creation of a reusable React component called PopConfirm that provides a popover-style confirmation dialog triggered on click. The PopConfirm component will allow users to implement confirmation prompts for various actions within the application. It will be a customizable component with:

• Trigger element: The component can be attached to any element in the UI. Clicking this element will trigger the popover.
• Custom message: The user can define the message displayed in the popover to explain the action being confirmed.
• Yes/No options: The popover will have two buttons: "Yes" and "No".
• onYes function: This function will be executed if the user clicks "Yes".

Success Criteria:

• The PopConfirm component is fully functional and reusable.
• The popover displays correctly with the provided message and buttons.
• The onYes function is executed correctly when the user confirms the action.

Acceptance Criteria:

• The PopConfirm component accepts the following props:
  • triggerElement: The element that triggers the popover (e.g., a button, link, etc.).
  • message: The message displayed in the popover.
  • onYes: The function to be executed when the user clicks "Yes".
• The popover is styled according to the provided design inspiration (image attached).
• The popover appears and disappears smoothly on interaction.
• The component is thoroughly tested across different browsers and devices.

Additional Notes:

• The component should be optimized for performance and user experience.
• The popover should be accessible (e.g., use ARIA attributes for screen readers).
• Take a look at the image below for design inspiration

[linear[bot]]

LET-14 compt: Create a PopConfirm component

This issue proposes the creation of a reusable React component called `PopConfirm` that provides a popover-style confirmation dialog triggered on click. The `PopConfirm` component will allow users to implement confirmation prompts for various actions within the application. It will be a customizable component with: * **Trigger element:** The component can be attached to any element in the UI. Clicking this element will trigger the popover. * **Custom message:** The user can define the message displayed in the popover to explain the action being confirmed. * **Yes/No options:** The popover will have two buttons: "Yes" and "No". * `onYes` function: This function will be executed if the user clicks "Yes". **Success Criteria:** * The `PopConfirm` component is fully functional and reusable. * The popover displays correctly with the provided message and buttons. * The `onYes` function is executed correctly when the user confirms the action. **Acceptance Criteria:** * The `PopConfirm` component accepts the following props: * `triggerElement`: The element that triggers the popover (e.g., a button, link, etc.). * `message`: The message displayed in the popover. * `onYes`: The function to be executed when the user clicks "Yes". * The popover is styled according to the provided design inspiration (image attached). * The popover appears and disappears smoothly on interaction. * The component is thoroughly tested across different browsers and devices. **Additional Notes:** * The component should be optimized for performance and user experience. * The popover should be accessible (e.g., use ARIA attributes for screen readers). * Take a look at the image below for design inspiration [image.png](https://uploads.linear.app/4cd476c1-6017-4a1e-aa13-d29ec525e647/b338208b-d96c-4858-a895-3b14392b1101/522aab68-ae97-449f-8c1e-e79be69b4e77)

[linear[bot]]

LET-15 compt: Create a PopConfirm component

This issue proposes the creation of a reusable React component called `PopConfirm` that provides a popover-style confirmation dialog triggered on click. The `PopConfirm` component will allow users to implement confirmation prompts for various actions within the application. It will be a customizable component with: * **Trigger element:** The component can be attached to any element in the UI. Clicking this element will trigger the popover. * **Custom message:** The user can define the message displayed in the popover to explain the action being confirmed. * **Yes/No options:** The popover will have two buttons: "Yes" and "No". * `onYes` function: This function will be executed if the user clicks "Yes". **Success Criteria:** * The `PopConfirm` component is fully functional and reusable. * The popover displays correctly with the provided message and buttons. * The `onYes` function is executed correctly when the user confirms the action. **Acceptance Criteria:** * The `PopConfirm` component accepts the following props: * `triggerElement`: The element that triggers the popover (e.g., a button, link, etc.). * `message`: The message displayed in the popover. * `onYes`: The function to be executed when the user clicks "Yes". * The popover is styled according to the provided design inspiration (image attached). * The popover appears and disappears smoothly on interaction. * The component is thoroughly tested across different browsers and devices. **Additional Notes:** * The component should be optimized for performance and user experience. * The popover should be accessible (e.g., use ARIA attributes for screen readers). * Take a look at the image below for design inspiration [image.png](https://uploads.linear.app/4cd476c1-6017-4a1e-aa13-d29ec525e647/b338208b-d96c-4858-a895-3b14392b1101/522aab68-ae97-449f-8c1e-e79be69b4e77?signature=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJwYXRoIjoiLzRjZDQ3NmMxLTYwMTctNGExZS1hYTEzLWQyOWVjNTI1ZTY0Ny9iMzM4MjA4Yi1kOTZjLTQ4NTgtYTg5NS0zYjE0MzkyYjExMDEvNTIyYWFiNjgtYWU5Ny00NDlmLThjMWUtZTc5YmU2OWI0ZTc3IiwiaWF0IjoxNzI5NDk4NjA0LCJleHAiOjMzMzAwMDU4NjA0fQ.a6hs6ehEi4yILwMJgDE4-gtKb6V3n5WFTq4K1npyEKI)