feat: create PopoverContent component

src/components/popover/PopoverContent.tsx

@@ -0,0 +1,71 @@
+import { cn } from '@/lib/helper';
+
+export interface PopoverContentProps {
+  children: React.ReactNode;
+  id: string;
+  anchorName: string; // Must include `--` like "--menu-anchor"
+  popover?: 'auto' | 'hint' | 'manual';
+  position?:
+    | 'top'
+    | 'bottom'
+    | 'left'
+    | 'right'
+    | 'top-start'
+    | 'top-end'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'left-start'
+    | 'left-end'
+    | 'right-start'
+    | 'right-end';
+  className?: string;
+}
+
+const positionAreaMap: Record<
+  NonNullable<PopoverContentProps['position']>,
+  string
+> = {
+  top: 'top center',
+  bottom: 'bottom center',
+  left: 'left center',
+  right: 'right center',
+
+  'top-start': 'top left',
+  'top-end': 'top right',
+  'bottom-start': 'bottom left',
+  'bottom-end': 'bottom right',
+
+  'left-start': 'left top',
+  'left-end': 'left bottom',
+
+  'right-start': 'right top',
+  'right-end': 'right bottom',
+};
+
+const PopoverContent = ({
+  children,
+  id,
+  anchorName,
+  popover = 'auto',
+  position = 'bottom-start',
+  className,
+}: PopoverContentProps) => {
+  return (
+    <div
+      className={cn(className)}
+      id={id}
+      popover={popover}
+      style={
+        {
+          inset: 'unset',
+          positionAnchor: anchorName,
+          positionArea: positionAreaMap[position],
+        } as React.CSSProperties
+      }
+    >
+      {children}
+    </div>
+  );
+};
+
+export default PopoverContent;