feat(ui): added ui components for new dashboard

frontend/src/components/v2/Popoverv2/Popoverv2.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from '../Button';
+import { Popover, PopoverContent, PopoverContentProps, PopoverTrigger } from './Popoverv2';
+
+const meta: Meta<typeof PopoverContent> = {
+  title: 'Components/Popover',
+  component: Popover,
+  tags: ['v2']
+};
+
+export default meta;
+type Story = StoryObj<typeof PopoverContent>;
+
+const Template = (args: PopoverContentProps) => (
+  <Popover>
+    <PopoverTrigger asChild>
+      <Button>Hello world</Button>
+    </PopoverTrigger>
+    <PopoverContent {...args} side="bottom" sideOffset={10}>
+      <h1>This is popper</h1>
+    </PopoverContent>
+  </Popover>
+);
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
+export const Primary: Story = {
+  render: (args) => <Template {...args} />
+};

frontend/src/components/v2/Popoverv2/Popoverv2.tsx

@@ -0,0 +1,54 @@
+import { ReactNode } from 'react';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { twMerge } from 'tailwind-merge';
+
+import { IconButton } from '../IconButton';
+
+export const PopoverTrigger = PopoverPrimitive.Trigger;
+
+export const Popover = PopoverPrimitive.Root;
+
+export type PopoverContentProps = {
+  children?: ReactNode;
+  hideCloseBtn?: boolean;
+} & PopoverPrimitive.PopperContentProps;
+
+export const PopoverContent = ({
+  children,
+  className,
+  hideCloseBtn,
+  ...props
+}: PopoverContentProps) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      className={twMerge(
+        [
+          'relative z-[100] w-64 rounded-md bg-mineshaft-600 fill-mineshaft-600 p-4 pt-6 font-inter text-gray-200 shadow-md',
+          // animation
+          'data-[state=open]:data-[side=bottom]:animate-slideUpAndFade',
+          'data-[state=open]:data-[side=top]:animate-slideDownAndFade',
+          'data-[state=open]:data-[side=left]:animate-slideRightAndFade',
+          'data-[state=open]:data-[side=right]:animate-slideLeftAndFade'
+        ],
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {!hideCloseBtn && (
+        <PopoverPrimitive.Close aria-label="Close" asChild>
+          <IconButton
+            variant="plain"
+            ariaLabel="close"
+            className="absolute top-0 right-1 rounded text-bunker-400 hover:text-bunker-50"
+          >
+            <FontAwesomeIcon icon={faTimes} size="lg" className="cursor-pointer" />
+          </IconButton>
+        </PopoverPrimitive.Close>
+      )}
+      <PopoverPrimitive.Arrow className="fill-inherit" />
+    </PopoverPrimitive.Content>
+  </PopoverPrimitive.Portal>
+);

frontend/src/components/v2/Popoverv2/index.tsx

@@ -0,0 +1 @@
+export { Popover,PopoverContent, PopoverTrigger } from './Popoverv2';