feat: edit page

packages/ui/README.md

@@ -0,0 +1,15 @@
+# `@glocurrency/ui`
+
+React components
+
+---
+
+## Install
+
+```bash
+$ pnpm add @glocurrency/ui
+```
+
+## Authors
+
+- [Ivan Stasiuk](https://github.com/brokeyourbike) | [Twitter](https://twitter.com/brokeyourbike) | [LinkedIn](https://www.linkedin.com/in/brokeyourbike) | [stasi.uk](https://stasi.uk)

packages/ui/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@glocurrency/ui",
   "description": "React components",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "type": "module",
   "engines": {
     "node": ">=20.x"
@@ -56,10 +56,14 @@
     "@glocurrency/time": ">=0.0",
     "@glocurrency/use-get": ">=0.0",
     "@shopify/polaris": ">=13.0",
+    "@shopify/polaris-icons": ">=9.0",
     "query-string": ">=9.0",
+    "next": ">=14.0",
     "react": ">=18.0",
     "react-dom": ">=18.0",
-    "react-syntax-highlighter": ">=15.0"
+    "react-syntax-highlighter": ">=15.0",
+    "react-hot-toast": ">=2.0",
+    "react-use-clipboard": ">=1.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.5.0",

packages/ui/src/components/EditPage/index.tsx

@@ -0,0 +1,51 @@
+import { useMemo, type ReactNode } from 'react'
+import { useRouter } from 'next/router'
+import { MenuActionDescriptor, Page } from '@shopify/polaris'
+import { ShareIcon } from '@shopify/polaris-icons'
+import useClipboard from 'react-use-clipboard'
+import toast from 'react-hot-toast'
+
+export const EditPage = ({
+  title,
+  children,
+  showShareButton,
+}: {
+  title: string
+  children: ReactNode
+  showShareButton?: boolean
+}) => {
+  const router = useRouter()
+  const [_, setCopied] = useClipboard(
+    `${process.env['NEXT_PUBLIC_BASE_PATH']}${router.asPath}`
+  )
+
+  const actions = useMemo(() => {
+    const items: MenuActionDescriptor[] = []
+
+    if (showShareButton) {
+      items.push({
+        icon: ShareIcon,
+        content: 'Share',
+        onAction: () => {
+          setCopied()
+          toast.success('URL copied to clipboard')
+        },
+      })
+    }
+
+    return items
+  }, [showShareButton, setCopied])
+
+  return (
+    <Page
+      title={title}
+      backAction={{
+        content: 'Back',
+        onAction: () => router.back(),
+      }}
+      secondaryActions={actions}
+    >
+      {children}
+    </Page>
+  )
+}

packages/ui/src/components/index.ts

@@ -1,3 +1,4 @@
 export { HighlightJson } from './HighlightJson'
 export { LoadingCard } from './LoadingCard'
 export { Timeline } from './Timeline'
+export { EditPage } from './EditPage'