docs: add copy subscriber button (#12405)

* docs: add copy subscriber button

* re-generate

* fixes + update copy button

www/apps/resources/components/EventHeader/index.tsx

@@ -0,0 +1,78 @@
+"use client"
+
+import { Brackets, CheckCircle, SquareTwoStack, Tag } from "@medusajs/icons"
+import {
+  DropdownMenu,
+  H2,
+  H2Props,
+  H3,
+  H3Props,
+  useCopy,
+  useGenerateSnippet,
+} from "docs-ui"
+
+type EventHeaderProps = (
+  | {
+      headerLvl: "2"
+      headerProps: H2Props
+    }
+  | {
+      headerLvl: "3"
+      headerProps: H3Props
+    }
+) & {
+  eventName: string
+  payload: string
+}
+
+export const EventHeader = ({
+  headerLvl,
+  headerProps,
+  eventName,
+  payload: payloadStr,
+}: EventHeaderProps) => {
+  const Header = headerLvl === "2" ? H2 : H3
+  const { snippet } = useGenerateSnippet({
+    type: "subscriber",
+    options: {
+      event: eventName,
+      payload: payloadStr,
+    },
+  })
+  const { handleCopy: handleEventNameCopy, isCopied: eventNameCopied } =
+    useCopy(eventName)
+  const { handleCopy: handleSnippetCopy, isCopied: snippetCopied } =
+    useCopy(snippet)
+
+  return (
+    <div className="flex items-center justify-between flex-wrap">
+      <Header {...headerProps}>{eventName}</Header>
+      <DropdownMenu
+        dropdownButtonContent={
+          <>
+            {eventNameCopied || snippetCopied ? (
+              <CheckCircle />
+            ) : (
+              <SquareTwoStack />
+            )}
+          </>
+        }
+        menuItems={[
+          {
+            type: "action",
+            title: "Copy event name",
+            action: () => handleEventNameCopy(),
+            icon: <Tag />,
+          },
+          {
+            type: "action",
+            title: "Copy subscriber for event",
+            action: () => handleSnippetCopy(),
+            icon: <Brackets />,
+          },
+        ]}
+        menuClassName="z-10"
+      />
+    </div>
+  )
+}

www/apps/resources/components/MDXComponents/index.tsx

@@ -10,8 +10,10 @@ import {
   Table,
   Badge,
   Tooltip,
+  CopyGeneratedSnippetButton,
 } from "docs-ui"
 import { CommerceModuleSections } from "../CommerceModuleSections"
+import { EventHeader } from "../EventHeader"
 
 const MDXComponents: MDXComponentsType = {
   ...UiMdxComponents,
@@ -27,6 +29,8 @@ const MDXComponents: MDXComponentsType = {
   Tooltip: (props) => {
     return <Tooltip {...props} />
   },
+  EventHeader,
+  CopyGeneratedSnippetButton,
 }
 
 export default MDXComponents