60 lines
2.5 KiB
TypeScript
60 lines
2.5 KiB
TypeScript
/**
|
|
* Shared base menubar for a recollection: Back, optional custom content (from context), Logos/Flux switcher.
|
|
*/
|
|
|
|
import React from 'react'
|
|
import { Link, NavLink, useParams } from 'react-router-dom'
|
|
import { usePlatform } from '@/app/kosmos/KosmosContext'
|
|
import { ArrowLeft, BookOpen, Workflow } from 'lucide-react'
|
|
import { useRecollectionMenubar } from './RecollectionMenubarContext'
|
|
|
|
export function RecollectionMenubar() {
|
|
const { recollectionId } = useParams<{ recollectionId: string }>()
|
|
const { recollections } = usePlatform()
|
|
const { customContent } = useRecollectionMenubar()
|
|
|
|
const recollection = recollectionId ? recollections.find((p) => p.id === recollectionId) : null
|
|
const base = recollectionId ? `/recollections/${recollectionId}` : ''
|
|
const defaultMiddle = recollection ? (
|
|
<span className="truncate text-sm font-medium text-muted-foreground">{recollection.name}</span>
|
|
) : null
|
|
|
|
return (
|
|
<div className="flex h-9 w-full shrink-0 items-center gap-2 border-b border-border/40 bg-background px-2">
|
|
<Link
|
|
to="/recollections"
|
|
aria-label="Back to recollections"
|
|
className="flex shrink-0 items-center rounded-sm px-2 py-1 text-sm outline-none focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground"
|
|
>
|
|
<ArrowLeft className="size-4" />
|
|
</Link>
|
|
<div className="flex min-w-0 flex-1 items-center">
|
|
{customContent ?? defaultMiddle}
|
|
</div>
|
|
{base && (
|
|
<nav className="flex shrink-0 items-center gap-0.5" aria-label="Recollection pages">
|
|
<NavLink
|
|
to={`${base}/logos`}
|
|
end
|
|
className={({ isActive }) =>
|
|
`flex items-center gap-1.5 rounded-sm px-2.5 py-1 text-sm outline-none focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground ${isActive ? 'bg-accent font-medium text-foreground' : 'text-muted-foreground'}`
|
|
}
|
|
>
|
|
<BookOpen className="size-3.5" />
|
|
Logos
|
|
</NavLink>
|
|
<NavLink
|
|
to={`${base}/flux`}
|
|
className={({ isActive }) =>
|
|
`flex items-center gap-1.5 rounded-sm px-2.5 py-1 text-sm outline-none focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground ${isActive ? 'bg-accent font-medium text-foreground' : 'text-muted-foreground'}`
|
|
}
|
|
>
|
|
<Workflow className="size-3.5" />
|
|
Flux
|
|
</NavLink>
|
|
</nav>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|