refactor(mobile): simplify heading component and remove unused imports

Signed-off-by: Innei <tukon479@gmail.com>
This commit is contained in:
Innei 2025-02-12 00:18:06 +08:00
parent 970c9329d2
commit db5bd2641c
No known key found for this signature in database
GPG Key ID: 0F62D33977F021F7
1 changed files with 15 additions and 30 deletions

View File

@ -1,10 +1,14 @@
import { useScrollViewElement } from "@follow/components/ui/scroll-area/hooks.js"
import { springScrollToElement } from "@follow/utils/scroller"
import { cn } from "@follow/utils/utils"
import { useContext, useId, useRef } from "react"
import { MarkdownRenderContainerRefContext } from "./__internal/ctx"
import { useId, useRef } from "react"
const size = {
1: "text-[1.6em]",
2: "text-[1.5em]",
3: "text-[1.3em]",
4: "text-[1.1em]",
5: "text-[1.05em]",
6: "text-[1em]",
}
export const createHeadingRenderer =
(level: number) =>
(
@ -15,35 +19,16 @@ export const createHeadingRenderer =
const As = `h${level}` as any
const { node, ...rest } = props as any
const scroller = useScrollViewElement()
const renderContainer = useContext(MarkdownRenderContainerRefContext)
const ref = useRef<HTMLHeadingElement>(null)
return (
<As ref={ref} {...rest} data-rid={rid} className={cn(rest.className, "group relative")}>
<As
ref={ref}
{...rest}
data-rid={rid}
className={cn(rest.className, "group relative", size[level])}
>
{rest.children}
<span
className={cn(
"cursor-pointer select-none text-accent opacity-0 transition-opacity duration-200 group-hover:opacity-100",
"relative ml-2",
"@2xl:absolute @2xl:left-[-1.5em] @2xl:top-0 @2xl:opacity-0",
)}
aria-hidden
onClick={() => {
if (!renderContainer) return
springScrollToElement(
renderContainer.querySelector(`[data-rid="${rid}"]`)!,
-100,
scroller!,
)
}}
>
<i className="i-mingcute-hashtag-line invisible" />
<span className="center absolute inset-0">
<i className="i-mingcute-hashtag-line" />
</span>
</span>
</As>
)
}