zoushiyang/page-agent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(website): simplify heading api

Browse Source
This commit is contained in:
Simon
2026-02-27 20:36:00 +08:00
parent ce2258fe16
commit c2daf13ead
15 changed files with 69 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
packages/website/src/components/Heading.tsx
View File

@@ -6,15 +6,18 @@ type Level = 2 | 3
interface HeadingProps extends Omit<ComponentPropsWithoutRef<'h2'>, 'children'> {
id: string
level: Level
level?: Level
children: React.ReactNode
}
const tags = { 2: 'h2', 3: 'h3' } as const
const levelStyles = {
2: { tag: 'h2', className: 'text-2xl font-semibold mb-4' },
3: { tag: 'h3', className: 'text-xl font-semibold mb-3' },
} as const
export function Heading({ id, level, className, children, ...props }: HeadingProps) {
export function Heading({ id, level = 2, className, children, ...props }: HeadingProps) {
const ref = useRef<HTMLHeadingElement>(null)
const Tag = tags[level]
const { tag: Tag, className: defaultClassName } = levelStyles[level]
useEffect(() => {
if (window.location.hash === `#${id}`) {
@@ -23,7 +26,12 @@ export function Heading({ id, level, className, children, ...props }: HeadingPro
}, [id])
return (
<Tag ref={ref} id={id} className={cn('group relative scroll-mt-20', className)} {...props}>
<Tag
ref={ref}
id={id}
className={cn('group relative scroll-mt-20', defaultClassName, className)}
{...props}
>
<a
href={`#${id}`}
className="absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 text-gray-400 hover:text-blue-500 transition-opacity no-underline"