-
diff --git a/docs/components/online-inspector.tsx b/docs/components/online-inspector.tsx
new file mode 100644
index 00000000..e72416dc
--- /dev/null
+++ b/docs/components/online-inspector.tsx
@@ -0,0 +1,47 @@
+import {
+ Inspector,
+ gotoServerEditor,
+ type InspectParams,
+} from 'react-dev-inspector'
+import {
+ isDev,
+ projectRepo,
+} from '@utils'
+
+
+/**
+ * only for online showcase in docs site
+ */
+export const OnlineInspector = ({ active, setActive }: {
+ active?: boolean;
+ setActive?: (active: boolean) => void;
+}) => {
+ return (
+
+ )
+}
+
+const handleInspectOnline = (inspect: InspectParams) => {
+ if (!inspect.codeInfo) {
+ return
+ }
+
+ if (isDev) {
+ return gotoServerEditor(inspect.codeInfo)
+ }
+
+ const { relativePath, absolutePath, lineNumber } = inspect.codeInfo
+ if (relativePath) {
+ const onlineFilePath = `docs/${relativePath}`
+ window.open(`${projectRepo}/blob/dev/${onlineFilePath}#L${lineNumber}`)
+ }
+ else if (absolutePath) {
+ const onlineFilePath = absolutePath.replace(/^.*?\/docs\//, 'docs/')
+ window.open(`${projectRepo}/blob/dev/${onlineFilePath}#L${lineNumber}`)
+ }
+}
diff --git a/docs/components/show-page/show-page.tsx b/docs/components/show-page/show-page.tsx
index 555511b6..7aae85a1 100644
--- a/docs/components/show-page/show-page.tsx
+++ b/docs/components/show-page/show-page.tsx
@@ -1,23 +1,27 @@
import { useState } from 'react'
+import dynamic from 'next/dynamic'
import {
- Inspector,
defaultHotkeys,
} from 'react-dev-inspector'
-import { projectRepo, handleInspectOnline } from '@utils'
+import { projectRepo } from '@utils'
import { ChecksPattern } from './components/Pattern'
import * as S from './styles'
+const OnlineInspector = dynamic(
+ () => import('@components/online-inspector').then(({ OnlineInspector }) => OnlineInspector),
+ { ssr: false },
+)
+
export const ShowPage = () => {
const [active, setActive] = useState(false)
return (
-
+ <>
+
{