73 lines
2.6 KiB
TypeScript
73 lines
2.6 KiB
TypeScript
import {SSHTabList} from "@/apps/SSH/Terminal/SSHTabList.tsx";
|
|
import React from "react";
|
|
import {ChevronUp} from "lucide-react";
|
|
|
|
interface TerminalTab {
|
|
id: number;
|
|
title: string;
|
|
}
|
|
|
|
interface SSHTopbarProps {
|
|
allTabs: TerminalTab[];
|
|
currentTab: number;
|
|
setActiveTab: (tab: number) => void;
|
|
allSplitScreenTab: number[];
|
|
setSplitScreenTab: (tab: number) => void;
|
|
setCloseTab: (tab: number) => void;
|
|
onHideTopbar?: () => void;
|
|
}
|
|
|
|
export function SSHTopbar({
|
|
allTabs,
|
|
currentTab,
|
|
setActiveTab,
|
|
allSplitScreenTab,
|
|
setSplitScreenTab,
|
|
setCloseTab,
|
|
onHideTopbar
|
|
}: SSHTopbarProps): React.ReactElement {
|
|
return (
|
|
<div className="flex h-11.5 z-100" style={{
|
|
position: 'absolute',
|
|
left: 0,
|
|
width: '100%',
|
|
backgroundColor: '#18181b',
|
|
borderBottom: '1px solid #222224',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
}}>
|
|
<div style={{flex: 1, minWidth: 0, height: '100%', overflowX: 'auto'}}>
|
|
<div style={{minWidth: 'max-content', height: '100%', paddingLeft: 8, overflowY: 'hidden'}}>
|
|
<SSHTabList
|
|
allTabs={allTabs}
|
|
currentTab={currentTab}
|
|
setActiveTab={setActiveTab}
|
|
allSplitScreenTab={allSplitScreenTab}
|
|
setSplitScreenTab={setSplitScreenTab}
|
|
setCloseTab={setCloseTab}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div style={{flex: '0 0 auto', paddingRight: 8, paddingLeft: 16}}>
|
|
<button
|
|
onClick={() => onHideTopbar?.()}
|
|
style={{
|
|
height: 28,
|
|
width: 28,
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
background: 'hsl(240 5% 9%)',
|
|
color: 'hsl(240 5% 64.9%)',
|
|
border: '1px solid hsl(240 3.7% 15.9%)',
|
|
borderRadius: 6,
|
|
cursor: 'pointer',
|
|
}}
|
|
title="Hide top bar"
|
|
>
|
|
<ChevronUp size={16} strokeWidth={2}/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
} |