Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | 136x 136x | import { X } from "lucide-react";
import { Button } from "@/ahuora-design-system/ui/button";
import type { TrackedStreamSummary } from "./types";
type StreamTrackingControlsProps = {
trackedStreams: TrackedStreamSummary[];
onRemoveTrackedStream?: (sourceStreamId: number) => void;
onClearTrackedStreams?: () => void;
};
const StreamTrackingControls = ({
trackedStreams,
onRemoveTrackedStream,
onClearTrackedStreams,
}: StreamTrackingControlsProps) => {
Iif (!trackedStreams.length) return null;
return (
<div className="h-full bg-card border-border border-2 rounded-md flex items-center gap-2 px-3 text-sm text-card-foreground shadow">
<span className="px-1 whitespace-nowrap">Tracking</span>
{trackedStreams.map((stream) => (
<div
key={stream.sourceStreamId}
className="flex items-center gap-1 min-w-0"
>
<span
aria-hidden="true"
className="h-2.5 w-2.5 rounded-full shrink-0"
style={{ backgroundColor: stream.accent }}
/>
<span className="max-w-24 truncate" title={stream.sourceName}>
{stream.sourceName}
</span>
<Button
type="button"
variant="ghost"
size="xs"
aria-label={`Stop tracking ${stream.sourceName}`}
onClick={() => onRemoveTrackedStream?.(stream.sourceStreamId)}
className="h-5 w-5 p-0"
>
<X className="h-3.5 w-3.5" />
</Button>
</div>
))}
{trackedStreams.length > 1 && (
<Button
type="button"
variant="ghost"
size="sm"
aria-label="Stop tracking all streams"
onClick={onClearTrackedStreams}
className="h-7 px-1.5"
>
Clear
</Button>
)}
</div>
);
};
export default StreamTrackingControls;
|