feat: Introduce InfoHoverCard component and refactor enums for better organization

packages/client/src/common/enum.ts

@@ -0,0 +1,13 @@
+export enum ESide {
+  Top = 'top',
+  Right = 'right',
+  Bottom = 'bottom',
+  Left = 'left',
+}
+
+export enum NotificationSeverity {
+  INFO = 'info',
+  SUCCESS = 'success',
+  WARNING = 'warning',
+  ERROR = 'error',
+}

packages/client/src/common/index.ts

@@ -1,11 +1,5 @@
-export type {
-  TShowToast,
-  Option,
-  OptionWithIcon,
-  DropdownValueSetter,
-  MentionOption,
-} from './types';
+export * from './types';
 
-export { NotificationSeverity } from './types';
+export * from './enum';
 
 export type { MenuItemProps } from './menus';

packages/client/src/common/types.ts

@@ -1,9 +1,4 @@
-export enum NotificationSeverity {
-  INFO = 'info',
-  SUCCESS = 'success',
-  WARNING = 'warning',
-  ERROR = 'error',
-}
+import { NotificationSeverity } from './enum';
 
 export type TShowToast = {
   message: string;

packages/client/src/components/InfoHoverCard.tsx

@@ -0,0 +1,27 @@
+import { CircleHelpIcon } from 'lucide-react';
+import { HoverCard, HoverCardTrigger, HoverCardPortal, HoverCardContent } from './HoverCard';
+import { ESide } from '~/common';
+
+type InfoHoverCardProps = {
+  side?: ESide;
+  text: string;
+};
+
+const InfoHoverCard = ({ side, text }: InfoHoverCardProps) => {
+  return (
+    <HoverCard openDelay={50}>
+      <HoverCardTrigger className="cursor-help">
+        <CircleHelpIcon className="h-5 w-5 text-text-tertiary" />{' '}
+      </HoverCardTrigger>
+      <HoverCardPortal>
+        <HoverCardContent side={side} className="z-[999] w-80">
+          <div className="space-y-2">
+            <p className="text-sm text-text-secondary">{text}</p>
+          </div>
+        </HoverCardContent>
+      </HoverCardPortal>
+    </HoverCard>
+  );
+};
+
+export default InfoHoverCard;

packages/client/src/components/Toast.tsx

@@ -1,5 +1,5 @@
 import * as RadixToast from '@radix-ui/react-toast';
-import { NotificationSeverity } from '~/common/types';
+import { NotificationSeverity } from '~/common';
 import { useToast } from '~/hooks';
 
 export function Toast() {

packages/client/src/components/index.ts

@@ -43,6 +43,7 @@ export { default as MultiSelect } from './MultiSelect';
 export { default as DropdownPopup } from './DropdownPopup';
 export { default as DelayedRender } from './DelayedRender';
 export { default as ThemeSelector } from './ThemeSelector';
+export { default as InfoHoverCard } from './InfoHoverCard';
 export { default as CheckboxButton } from './CheckboxButton';
 export { default as DialogTemplate } from './DialogTemplate';
 export { default as SelectDropDown } from './SelectDropDown';