docs: fix heading import in ui route docs (#10167)
This commit is contained in:
@@ -175,7 +175,7 @@ For example, create the file `src/admin/routes/custom/[id]/page.tsx` with the fo
|
|||||||
|
|
||||||
```tsx title="src/admin/routes/custom/[id]/page.tsx" highlights={[["5", "", "Retrieve the path parameter."], ["10", "{id}", "Show the path parameter."]]}
|
```tsx title="src/admin/routes/custom/[id]/page.tsx" highlights={[["5", "", "Retrieve the path parameter."], ["10", "{id}", "Show the path parameter."]]}
|
||||||
import { useParams } from "react-router-dom"
|
import { useParams } from "react-router-dom"
|
||||||
import { Container } from "@medusajs/ui"
|
import { Container, Heading } from "@medusajs/ui"
|
||||||
|
|
||||||
const CustomPage = () => {
|
const CustomPage = () => {
|
||||||
const { id } = useParams()
|
const { id } = useParams()
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ import clsx from "clsx"
|
|||||||
import React, { useMemo } from "react"
|
import React, { useMemo } from "react"
|
||||||
import { CopyButton, Link } from "@/components"
|
import { CopyButton, Link } from "@/components"
|
||||||
import { useIsBrowser } from "../../../providers"
|
import { useIsBrowser } from "../../../providers"
|
||||||
|
import { usePathname } from "next/navigation"
|
||||||
|
|
||||||
type H2Props = React.HTMLAttributes<HTMLHeadingElement> & {
|
type H2Props = React.HTMLAttributes<HTMLHeadingElement> & {
|
||||||
id?: string
|
id?: string
|
||||||
@@ -12,20 +13,15 @@ type H2Props = React.HTMLAttributes<HTMLHeadingElement> & {
|
|||||||
|
|
||||||
export const H2 = ({ className, children, passRef, ...props }: H2Props) => {
|
export const H2 = ({ className, children, passRef, ...props }: H2Props) => {
|
||||||
const { isBrowser } = useIsBrowser()
|
const { isBrowser } = useIsBrowser()
|
||||||
|
const pathname = usePathname()
|
||||||
const copyText = useMemo(() => {
|
const copyText = useMemo(() => {
|
||||||
const url = `#${props.id}`
|
const hash = `#${props.id}`
|
||||||
if (!isBrowser) {
|
if (!isBrowser) {
|
||||||
return url
|
return hash
|
||||||
}
|
}
|
||||||
|
|
||||||
const hashIndex = window.location.href.indexOf("#")
|
return `${window.location.origin}${pathname}${hash}`
|
||||||
return (
|
}, [props.id, isBrowser, pathname])
|
||||||
window.location.href.substring(
|
|
||||||
0,
|
|
||||||
hashIndex !== -1 ? hashIndex : window.location.href.length
|
|
||||||
) + url
|
|
||||||
)
|
|
||||||
}, [props.id, isBrowser])
|
|
||||||
return (
|
return (
|
||||||
<h2
|
<h2
|
||||||
className={clsx(
|
className={clsx(
|
||||||
@@ -42,7 +38,7 @@ export const H2 = ({ className, children, passRef, ...props }: H2Props) => {
|
|||||||
text={copyText}
|
text={copyText}
|
||||||
className="opacity-0 group-hover/h2:opacity-100 transition-opacity ml-docs_0.5 inline-block"
|
className="opacity-0 group-hover/h2:opacity-100 transition-opacity ml-docs_0.5 inline-block"
|
||||||
>
|
>
|
||||||
<Link href={`#${props.id}`} scroll={false}>
|
<Link href={`#${props.id}`} scroll={false} prefetch={false}>
|
||||||
#
|
#
|
||||||
</Link>
|
</Link>
|
||||||
</CopyButton>
|
</CopyButton>
|
||||||
|
|||||||
Reference in New Issue
Block a user