Implement share and export components

app/components/modals/Popover/Popover.container.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+/**
+ * Figma: Community Rule System — Export popover (Community Rule System · 21998:22612)
+ * https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=21998-22612
+ */
+import { memo } from "react";
+import { PopoverView } from "./Popover.view";
+import type { PopoverProps } from "./Popover.types";
+
+const Popover = memo<PopoverProps>((props) => {
+  return <PopoverView {...props} />;
+});
+
+Popover.displayName = "Popover";
+
+export default Popover;

app/components/modals/Popover/Popover.types.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+
+export type PopoverProps = {
+  id: string;
+  menuAriaLabel: string;
+  children: ReactNode;
+  className?: string;
+};

app/components/modals/Popover/Popover.view.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { memo } from "react";
+import type { PopoverProps } from "./Popover.types";
+
+export const PopoverView = memo(function PopoverView({
+  id,
+  menuAriaLabel,
+  children,
+  className = "",
+}: PopoverProps) {
+  return (
+    <div
+      id={id}
+      role="menu"
+      aria-label={menuAriaLabel}
+      data-figma-node="21998:22612"
+      className={`flex min-w-[171px] w-max max-w-[calc(100vw-32px)] flex-col items-stretch overflow-hidden rounded-[var(--radius-300)] bg-[var(--color-surface-default-secondary)] px-[12px] [filter:drop-shadow(0px_0px_6px_rgba(254,252,201,0.2))] ${className}`}
+    >
+      {children}
+    </div>
+  );
+});
+
+PopoverView.displayName = "PopoverView";

app/components/modals/Popover/index.tsx

@@ -0,0 +1,2 @@
+export { default } from "./Popover.container";
+export type { PopoverProps } from "./Popover.types";