File size: 2,518 Bytes
6a7089a | 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 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | import { useEffect, useMemo, useState } from "react";
import type { InstanceTab } from "../../generated/types";
import TabItem from "./TabItem";
import SelectedTabPanel from "./SelectedTabPanel";
interface Props {
tabs: InstanceTab[];
emptyMessage?: string;
instanceId?: string;
}
export default function InstanceTabsPanel({
tabs,
emptyMessage = "No tabs open",
instanceId,
}: Props) {
const [selectedTabId, setSelectedTabId] = useState<string | null>(null);
useEffect(() => {
if (tabs.length === 0) {
setSelectedTabId(null);
return;
}
if (!tabs.some((tab) => tab.id === selectedTabId)) {
setSelectedTabId(tabs[0].id);
}
}, [selectedTabId, tabs]);
const selectedTab = useMemo(
() => tabs.find((tab) => tab.id === selectedTabId) ?? null,
[selectedTabId, tabs],
);
return (
<div className="flex flex-1 min-h-0 flex-col p-3">
<h4 className="mb-2 text-xs font-semibold uppercase tracking-wide text-text-muted">
Open Tabs ({tabs.length})
</h4>
{tabs.length === 0 ? (
<div className="py-8 text-center text-sm text-text-muted">
{emptyMessage}
</div>
) : (
<div className="flex min-h-0 flex-1 flex-col gap-3 xl:flex-row">
<div className="min-h-0 overflow-auto xl:w-80 xl:shrink-0">
<div className="space-y-1">
{tabs.map((tab) => {
const isSelected = tab.id === selectedTabId;
return (
<div
key={tab.id}
role="button"
tabIndex={0}
onClick={() => setSelectedTabId(tab.id)}
onKeyDown={(event) => {
if (event.key === "Enter" || event.key === " ") {
event.preventDefault();
setSelectedTabId(tab.id);
}
}}
className={`w-full rounded-xl border text-left transition ${
isSelected
? "border-primary bg-primary/10"
: "border-border-subtle bg-white/2 hover:border-border-default hover:bg-white/3"
}`}
>
<TabItem tab={tab} />
</div>
);
})}
</div>
</div>
<SelectedTabPanel selectedTab={selectedTab} instanceId={instanceId} />
</div>
)}
</div>
);
}
|