mirror of
https://github.com/truewhile/MeBox.git
synced 2026-09-29 11:36:36 +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>
39 lines
1.0 KiB
TypeScript
39 lines
1.0 KiB
TypeScript
import type { ReactNode } from 'react'
|
|
|
|
import { PageBackButton } from './PageBackButton'
|
|
|
|
type PageHeaderProps = {
|
|
title: string
|
|
description?: string
|
|
backTo?: string
|
|
backLabel?: string
|
|
onBack?: () => void
|
|
actions?: ReactNode
|
|
className?: string
|
|
}
|
|
|
|
export function PageHeader({
|
|
title,
|
|
description,
|
|
backTo,
|
|
backLabel,
|
|
onBack,
|
|
actions,
|
|
className,
|
|
}: PageHeaderProps) {
|
|
const showBack = Boolean(backTo || onBack)
|
|
|
|
return (
|
|
<header className={className ?? 'space-y-3'}>
|
|
{showBack && <PageBackButton to={backTo} label={backLabel} onClick={onBack} />}
|
|
<div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
|
|
<div className="min-w-0">
|
|
<h1 className="font-display text-2xl font-bold text-ink-600 sm:text-3xl">{title}</h1>
|
|
{description ? <p className="mt-0.5 text-xs text-ink-50 sm:text-sm">{description}</p> : null}
|
|
</div>
|
|
{actions ? <div className="flex flex-wrap items-center gap-2">{actions}</div> : null}
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|