79 lines
1.6 KiB
TypeScript
79 lines
1.6 KiB
TypeScript
"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>
|
|
)
|
|
}
|