72 lines
2.0 KiB
TypeScript
72 lines
2.0 KiB
TypeScript
import { Link } from "@tanstack/react-router"
|
|
import { X } from "lucide-react"
|
|
|
|
import { shortId } from "@/components/Runs/queries"
|
|
import type { DataContext } from "./dataContext"
|
|
|
|
/**
|
|
* What this dashboard is being shown against, and the way back out.
|
|
*
|
|
* Above the canvas rather than on it: the widgets are the dashboard, and this
|
|
* is a statement about the whole page. Written generically enough that a
|
|
* replayed day says its own name here without a second bar.
|
|
*/
|
|
export function ContextBar({
|
|
context,
|
|
members,
|
|
onRemove,
|
|
onExit,
|
|
}: {
|
|
context: DataContext
|
|
/** One chip per member, by id. */
|
|
members: string[]
|
|
onRemove: (id: string) => void
|
|
onExit: () => void
|
|
}) {
|
|
return (
|
|
<div className="mb-2 flex flex-wrap items-center gap-2 rounded-lg border border-border bg-card px-3 py-2">
|
|
<span className="font-medium text-sm">
|
|
Showing {context.label}
|
|
{context.pending ? "…" : ""}
|
|
</span>
|
|
|
|
{members.length > 1 &&
|
|
members.map((id) => (
|
|
<span
|
|
key={id}
|
|
className="inline-flex items-center gap-1 rounded-full border border-border px-2 py-0.5 font-mono text-muted-foreground text-xs"
|
|
>
|
|
{shortId(id)}
|
|
<button
|
|
type="button"
|
|
onClick={() => onRemove(id)}
|
|
aria-label={`Stop showing ${id}`}
|
|
className="hover:text-foreground"
|
|
>
|
|
<X className="size-3" />
|
|
</button>
|
|
</span>
|
|
))}
|
|
|
|
{members.length > 1 && (
|
|
<span className="text-muted-foreground text-xs">
|
|
single readings come from {shortId(members[0])}
|
|
</span>
|
|
)}
|
|
|
|
<div className="ml-auto flex items-center gap-3 text-sm">
|
|
<Link to="/runs" className="text-muted-foreground hover:underline">
|
|
Runs
|
|
</Link>
|
|
<button
|
|
type="button"
|
|
onClick={onExit}
|
|
className="text-muted-foreground hover:underline"
|
|
>
|
|
Show live
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|