Add showcase for PopupButton template component

src/Components/Profile/templateComponents/TemplatePopupButton.tsx

@@ -0,0 +1,24 @@
+import { useContext } from 'react'
+
+import { PopupButton } from '#components/Map'
+
+import { Templateify } from './Templateify'
+import ItemContext from './TemplateItemContext'
+
+import type { JSXElementConstructor } from 'react'
+
+type OmitItem<T extends keyof React.JSX.IntrinsicElements | JSXElementConstructor<unknown>> = Omit<
+  React.ComponentProps<T>,
+  'item'
+>
+
+/**
+ * @category Map
+ */
+export const TemplatePopupButton = (props: OmitItem<typeof PopupButton>) => {
+  const item = useContext(ItemContext)
+
+  return <PopupButton {...props} item={item} />
+}
+
+export const TemplatePopupButton2 = Templateify(PopupButton)

src/Components/Profile/templateComponents/Templateify.tsx

@@ -0,0 +1,23 @@
+import { useContext } from 'react'
+
+import ItemContext from './TemplateItemContext'
+
+import type { Item } from '#types/Item'
+import type { JSXElementConstructor } from 'react'
+
+type OmitItem<T extends keyof React.JSX.IntrinsicElements | JSXElementConstructor<unknown>> = Omit<
+  React.ComponentProps<T>,
+  'item'
+>
+
+export function Templateify<
+  T extends keyof React.JSX.IntrinsicElements | JSXElementConstructor<unknown>,
+>(Component: React.JSXElementConstructor<React.PropsWithChildren<{ item?: Item }>>) {
+  const TemplateComponent = (props: OmitItem<T>) => {
+    const item = useContext(ItemContext)
+
+    return <Component {...props} item={item} />
+  }
+
+  return TemplateComponent
+}