From d2a14633dd033d9c5ed5368f18e5422160cd40d9 Mon Sep 17 00:00:00 2001
From: prachigarg19 <72646230+prachigarg19@users.noreply.github.com>
Date: Wed, 3 Apr 2024 17:31:18 +0530
Subject: [PATCH] add right arrow and info icon popup component

---
 src/temp/components/InfoIconPopup.tsx | 45 +++++++++++++++++++++++++++
 src/temp/icons/RightArrowIcon.tsx     | 20 ++++++++++++
 2 files changed, 65 insertions(+)
 create mode 100644 src/temp/components/InfoIconPopup.tsx
 create mode 100644 src/temp/icons/RightArrowIcon.tsx

diff --git a/src/temp/components/InfoIconPopup.tsx b/src/temp/components/InfoIconPopup.tsx
new file mode 100644
index 0000000000..763bdfbf20
--- /dev/null
+++ b/src/temp/components/InfoIconPopup.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import NewInfoIcon from '../icons/NewInfoIcon';
+import { bindHover, bindPopover } from 'material-ui-popup-state';
+import HoverPopover from 'material-ui-popup-state/HoverPopover';
+import { usePopupState } from 'material-ui-popup-state/hooks';
+
+interface Props {
+  height: number;
+  width: number;
+  color: string;
+  children: React.ReactNode;
+}
+
+const InfoIconPopup = ({ height, width, color, children }: Props) => {
+  const abandonmentInfoPopupState = usePopupState({
+    variant: 'popover',
+    popupId: 'abandonmentInfoPopover',
+  });
+  return (
+    <div
+      {...bindHover(abandonmentInfoPopupState)}
+      style={{ cursor: 'pointer' }}
+    >
+      <NewInfoIcon height={height} width={width} color={color} />
+      <HoverPopover
+        {...bindPopover(abandonmentInfoPopupState)}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'center',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'left',
+        }}
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
+      >
+        {children}
+      </HoverPopover>
+    </div>
+  );
+};
+
+export default InfoIconPopup;
diff --git a/src/temp/icons/RightArrowIcon.tsx b/src/temp/icons/RightArrowIcon.tsx
new file mode 100644
index 0000000000..dbf79a2934
--- /dev/null
+++ b/src/temp/icons/RightArrowIcon.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { IconProps } from '../../features/common/types/common';
+
+const RightArrowIcon = ({ width, color }: IconProps) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      viewBox="0 0 5 10"
+      fill="none"
+    >
+      <path
+        d="M2.68057 5.12199L0.240571 2.27199C-0.119429 1.85199 -0.0694288 1.22199 0.350571 0.861987C0.770571 0.501987 1.40057 0.551988 1.76057 0.971988L4.76057 4.47199C5.08057 4.84199 5.08057 5.40199 4.76057 5.77199L1.76057 9.27199C1.40057 9.69199 0.770572 9.74199 0.350572 9.38199C-0.0694285 9.02199 -0.119429 8.39199 0.240571 7.97199L2.68057 5.12199Z"
+        fill={color}
+      />
+    </svg>
+  );
+};
+
+export default RightArrowIcon;