mirror of
https://github.com/truewhile/MeBox.git
synced 2026-09-30 03:36:37 +08:00
Cursor Agent
eba7904c99
- Add mobile bottom tab bar for media browsing (Home, Libraries, Favourites, Playlists, More) - Split mobile drawer: media links first, admin links under a Management section - Show contextual back button in mobile header for deep routes - Add reusable PageBackButton and PageHeader components - Add back navigation to playlist detail, library page, and missing media state - Embed queue panels in TaskQueuePage to avoid duplicate page titles - Expose theme toggle in user menu on small screens Co-authored-by: truewhile <truewhile@users.noreply.github.com>
49 lines
1.0 KiB
TypeScript
49 lines
1.0 KiB
TypeScript
import { ArrowLeft } from 'lucide-react'
|
|
import { useNavigate } from 'react-router-dom'
|
|
import clsx from 'clsx'
|
|
|
|
type PageBackButtonProps = {
|
|
to?: string
|
|
label?: string
|
|
onClick?: () => void
|
|
className?: string
|
|
compact?: boolean
|
|
}
|
|
|
|
export function PageBackButton({
|
|
to,
|
|
label = '返回',
|
|
onClick,
|
|
className,
|
|
compact = false,
|
|
}: PageBackButtonProps) {
|
|
const navigate = useNavigate()
|
|
|
|
const handleClick = () => {
|
|
if (onClick) {
|
|
onClick()
|
|
return
|
|
}
|
|
if (to) {
|
|
navigate(to)
|
|
return
|
|
}
|
|
navigate(-1)
|
|
}
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={handleClick}
|
|
className={clsx(
|
|
'inline-flex items-center gap-2 rounded-xl border border-[var(--app-border)] bg-[var(--app-panel)] px-3 py-2 text-sm font-semibold text-[var(--app-subtle)] shadow-sm transition-colors hover:bg-[var(--app-hover)] hover:text-[var(--app-text)]',
|
|
compact && 'px-2.5 py-1.5 text-xs',
|
|
className,
|
|
)}
|
|
>
|
|
<ArrowLeft size={compact ? 15 : 16} />
|
|
<span>{label}</span>
|
|
</button>
|
|
)
|
|
}
|