67 lines
2.2 KiB
TypeScript
67 lines
2.2 KiB
TypeScript
import React from 'react'
|
|
import { Link, useLocation } from 'react-router-dom'
|
|
|
|
export const Header: React.FC = () => {
|
|
const location = useLocation()
|
|
const isShelf = location.pathname === '/' || location.pathname.startsWith('/books')
|
|
|
|
return (
|
|
<header className="sticky top-0 z-20">
|
|
<div className="relative">
|
|
<div
|
|
className={
|
|
(isShelf ? 'bg-transparent' : 'bg-transparent') +
|
|
' border-b border-black/5'
|
|
}
|
|
style={{
|
|
backdropFilter: 'blur(14px)',
|
|
}}
|
|
>
|
|
<div className="container mx-auto px-4 py-4">
|
|
<div className="flex items-center justify-between gap-4">
|
|
<Link
|
|
to="/"
|
|
className={
|
|
(isShelf ? 'text-[color:var(--text)]' : 'text-[color:var(--text)]') +
|
|
' text-xl sm:text-2xl font-bold tracking-tight'
|
|
}
|
|
aria-label="返回书架"
|
|
>
|
|
<span className="font-display">书架</span>
|
|
<span className={'text-[color:var(--muted)] ml-2 text-sm font-semibold'}>
|
|
Library
|
|
</span>
|
|
</Link>
|
|
|
|
<nav className="flex items-center gap-3 sm:gap-4">
|
|
<Link
|
|
to="/"
|
|
className={
|
|
(isShelf
|
|
? 'text-[color:var(--muted)] hover:text-[color:var(--text)]'
|
|
: 'text-[color:var(--muted)] hover:text-[color:var(--text)]') +
|
|
' text-sm font-semibold transition-colors'
|
|
}
|
|
>
|
|
书架
|
|
</Link>
|
|
<Link
|
|
to="/categories"
|
|
className={
|
|
(isShelf
|
|
? 'text-[color:var(--muted)] hover:text-[color:var(--text)]'
|
|
: 'text-[color:var(--muted)] hover:text-[color:var(--text)]') +
|
|
' text-sm font-semibold transition-colors'
|
|
}
|
|
>
|
|
分类
|
|
</Link>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|