docs: fix heading import in ui route docs (#10167)

This commit is contained in:
Shahed Nasser
2024-11-19 18:49:07 +02:00
committed by GitHub
parent 85f9c2b85a
commit 7a3c6acf31
2 changed files with 8 additions and 12 deletions
@@ -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>