dennii/Termix
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases 22 Wiki Activity

Added server.tsx and make it work with tab system

Browse Source
This commit is contained in:
LukeGus
2025-08-16 01:30:18 -05:00
parent 2667af9437
commit 5445cb2b78
8 changed files with 144 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.tsx
View File

@@ -87,7 +87,7 @@ function AppContent() {
// Determine what to show based on current tab
const currentTabData = tabs.find(tab => tab.id === currentTab);
const showTerminalView = currentTabData?.type === 'terminal';
const showTerminalView = currentTabData?.type === 'terminal' || currentTabData?.type === 'server';
const showHome = currentTabData?.type === 'home';
const showSshManager = currentTabData?.type === 'ssh_manager';

13
src/components/ui/button-group.tsx
View File

@@ -1,4 +1,4 @@
import { Children, ReactElement, cloneElement } from 'react';
import { Children, ReactElement, cloneElement, isValidElement } from 'react';
import { ButtonProps } from '@/components/ui/button';
import { cn } from '@/lib/utils';
@@ -6,7 +6,7 @@ import { cn } from '@/lib/utils';
interface ButtonGroupProps {
className?: string;
orientation?: 'horizontal' | 'vertical';
children: ReactElement<ButtonProps>[];
children: ReactElement<ButtonProps>[] | React.ReactNode;
}
export const ButtonGroup = ({
@@ -14,10 +14,15 @@ export const ButtonGroup = ({
orientation = 'horizontal',
children,
}: ButtonGroupProps) => {
const totalButtons = Children.count(children);
const isHorizontal = orientation === 'horizontal';
const isVertical = orientation === 'vertical';
// Normalize and filter only valid React elements
const childArray = Children.toArray(children).filter((child): child is ReactElement<ButtonProps> =>
isValidElement(child)
);
const totalButtons = childArray.length;
return (
<div
className={cn(
@@ -29,7 +34,7 @@ export const ButtonGroup = ({
className
)}
>
{Children.map(children, (child, index) => {
{childArray.map((child, index) => {
const isFirst = index === 0;
const isLast = index === totalButtons - 1;

2
src/contexts/TabContext.tsx
View File

@@ -2,7 +2,7 @@ import React, { createContext, useContext, useState, useRef, ReactNode } from 'r
export interface Tab {
id: number;
type: 'home' | 'terminal' | 'ssh_manager';
type: 'home' | 'terminal' | 'ssh_manager' | 'server';
title: string;
hostConfig?: any;
terminalRef?: React.RefObject<any>;

18
src/ui/Navigation/Hosts/Host.tsx
View File

@@ -37,16 +37,14 @@ export function Host({ host }: HostProps): React.ReactElement {
const tags = Array.isArray(host.tags) ? host.tags : [];
const hasTags = tags.length > 0;
const title = host.name?.trim() ? host.name : `${host.username}@${host.ip}:${host.port}`;
const handleTerminalClick = () => {
console.log('Terminal button clicked for host:', host);
const title = host.name?.trim() ? host.name : `${host.username}@${host.ip}:${host.port}`;
console.log('Creating terminal tab with title:', title);
const tabId = addTab({
type: 'terminal',
title,
hostConfig: host,
});
console.log('Created terminal tab with ID:', tabId);
addTab({ type: 'terminal', title, hostConfig: host });
};
const handleServerClick = () => {
addTab({ type: 'server', title, hostConfig: host });
};
return (
@@ -59,7 +57,7 @@ export function Host({ host }: HostProps): React.ReactElement {
{host.name || host.ip}
</p>
<ButtonGroup className="flex-shrink-0">
<Button variant="outline" className="!px-2 border-1 border-[#303032]">
<Button variant="outline" className="!px-2 border-1 border-[#303032]" onClick={handleServerClick}>
<Server/>
</Button>
<Button

8
src/ui/Navigation/Tabs/Tab.tsx
View File

@@ -1,7 +1,7 @@
import React from "react";
import {ButtonGroup} from "@/components/ui/button-group.tsx";
import {Button} from "@/components/ui/button.tsx";
import {Home, SeparatorVertical, X} from "lucide-react";
import {Home, SeparatorVertical, X, Terminal as TerminalIcon, Server as ServerIcon} from "lucide-react";
interface TabProps {
tabType: string;
@@ -31,7 +31,8 @@ export function Tab({tabType, title, isActive, onActivate, onClose, onSplit, can
);
}
if (tabType === "terminal") {
if (tabType === "terminal" || tabType === "server") {
const isServer = tabType === 'server';
return (
<ButtonGroup>
<Button
@@ -40,7 +41,8 @@ export function Tab({tabType, title, isActive, onActivate, onClose, onSplit, can
onClick={onActivate}
disabled={disableActivate}
>
{title || "Terminal"}
{isServer ? <ServerIcon className="mr-1 h-4 w-4"/> : <TerminalIcon className="mr-1 h-4 w-4"/>}
{title || (isServer ? 'Server' : 'Terminal')}
</Button>
{canSplit && (
<Button

18
src/ui/Navigation/TopNavbar.tsx
View File

@@ -51,11 +51,13 @@ export function TopNavbar({isTopbarOpen, setIsTopbarOpen}: TopNavbarProps): Reac
const isActive = tab.id === currentTab;
const isSplit = Array.isArray(allSplitScreenTab) && allSplitScreenTab.includes(tab.id);
const isTerminal = tab.type === 'terminal';
const isServer = tab.type === 'server';
const isSshManager = tab.type === 'ssh_manager';
// Old logic port:
const isSplitButtonDisabled = (isActive && !isSplitScreenActive) || ((allSplitScreenTab?.length || 0) >= 3 && !isSplit);
// Split availability
const isSplittable = isTerminal || isServer;
// Disable split entirely when on Home or SSH Manager
const disableSplit = isSplitButtonDisabled || isActive || currentTabIsHome || currentTabIsSshManager || isSshManager;
const isSplitButtonDisabled = (isActive && !isSplitScreenActive) || ((allSplitScreenTab?.length || 0) >= 3 && !isSplit);
const disableSplit = !isSplittable || isSplitButtonDisabled || isActive || currentTabIsHome || currentTabIsSshManager;
const disableActivate = isSplit || ((tab.type === 'home' || tab.type === 'ssh_manager') && isSplitScreenActive);
const disableClose = (isSplitScreenActive && isActive) || isSplit;
return (
@@ -65,10 +67,10 @@ export function TopNavbar({isTopbarOpen, setIsTopbarOpen}: TopNavbarProps): Reac
title={tab.title}
isActive={isActive}
onActivate={() => handleTabActivate(tab.id)}
onClose={isTerminal || isSshManager ? () => handleTabClose(tab.id) : undefined}
onSplit={isTerminal ? () => handleTabSplit(tab.id) : undefined}
canSplit={isTerminal}
canClose={isTerminal || isSshManager}
onClose={isTerminal || isServer || isSshManager ? () => handleTabClose(tab.id) : undefined}
onSplit={isSplittable ? () => handleTabSplit(tab.id) : undefined}
canSplit={isSplittable}
canClose={isTerminal || isServer || isSshManager}
disableActivate={disableActivate}
disableSplit={disableSplit}
disableClose={disableClose}
@@ -81,7 +83,7 @@ export function TopNavbar({isTopbarOpen, setIsTopbarOpen}: TopNavbarProps): Reac
<Button
variant="outline"
onClick={() => setIsTopbarOpen(false)}
className="w-[28px] h-[28]"
className="w-[28px] h-[28px]"
>
<ChevronUpIcon/>
</Button>

43
src/ui/SSH/Server/Server.tsx Normal file
View File

@@ -0,0 +1,43 @@
import React from "react";
import { useSidebar } from "@/components/ui/sidebar";
interface ServerProps {
hostConfig?: any;
title?: string;
isVisible?: boolean;
isTopbarOpen?: boolean;
embedded?: boolean; // when rendered inside a pane in TerminalView
}
export function Server({ hostConfig, title, isVisible = true, isTopbarOpen = true, embedded = false }: ServerProps): React.ReactElement {
const { state: sidebarState } = useSidebar();
const topMarginPx = isTopbarOpen ? 74 : 16;
const leftMarginPx = sidebarState === 'collapsed' ? 16 : 8;
const bottomMarginPx = 16;
const wrapperStyle: React.CSSProperties = embedded
? { opacity: isVisible ? 1 : 0, height: '100%', width: '100%' }
: {
opacity: isVisible ? 1 : 0,
marginLeft: leftMarginPx,
marginRight: 17,
marginTop: topMarginPx,
marginBottom: bottomMarginPx,
height: `calc(100vh - ${topMarginPx + bottomMarginPx}px)`,
};
const containerClass = embedded
? "h-full w-full text-white overflow-hidden bg-transparent"
: "bg-[#18181b] text-white rounded-lg border-2 border-[#303032] overflow-hidden";
return (
<div style={wrapperStyle} className={containerClass}>
<div className="h-full w-full flex items-center justify-center">
<div className="text-sm opacity-70 text-center">
<div>{title || 'Server'}</div>
</div>
</div>
</div>
);
}

94
src/ui/SSH/Terminal/TerminalView.tsx
View File

@@ -1,9 +1,12 @@
import React, { useEffect, useRef, useState } from "react";
import {TerminalComponent} from "./TerminalComponent.tsx";
import {Server as ServerView} from "@/ui/SSH/Server/Server.tsx";
import {useTabs} from "@/contexts/TabContext";
import {ResizablePanelGroup, ResizablePanel, ResizableHandle} from '@/components/ui/resizable.tsx';
import * as ResizablePrimitive from "react-resizable-panels";
import { useSidebar } from "@/components/ui/sidebar";
import {LucideRefreshCcw, LucideRefreshCw, RefreshCcw, RefreshCcwDot} from "lucide-react";
import { Button } from "@/components/ui/button.tsx";
interface TerminalViewProps {
isTopbarOpen?: boolean;
@@ -13,12 +16,13 @@ export function TerminalView({ isTopbarOpen = true }: TerminalViewProps): React.
const {tabs, currentTab, allSplitScreenTab} = useTabs() as any;
const { state: sidebarState } = useSidebar();
const terminalTabs = tabs.filter((tab: any) => tab.type === 'terminal');
const terminalTabs = tabs.filter((tab: any) => tab.type === 'terminal' || tab.type === 'server');
const containerRef = useRef<HTMLDivElement | null>(null);
const panelRefs = useRef<Record<string, HTMLDivElement | null>>({});
const [panelRects, setPanelRects] = useState<Record<string, DOMRect | null>>({});
const [ready, setReady] = useState<boolean>(true);
const [resetKey, setResetKey] = useState<number>(0);
const updatePanelRects = () => {
const next: Record<string, DOMRect | null> = {};
@@ -79,7 +83,7 @@ export function TerminalView({ isTopbarOpen = true }: TerminalViewProps): React.
useEffect(() => {
scheduleMeasureAndFit();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [allSplitScreenTab.length, isTopbarOpen, sidebarState]);
}, [allSplitScreenTab.length, isTopbarOpen, sidebarState, resetKey]);
useEffect(() => {
const roContainer = containerRef.current ? new ResizeObserver(() => {
@@ -145,14 +149,24 @@ export function TerminalView({ isTopbarOpen = true }: TerminalViewProps): React.
return (
<div key={t.id} style={finalStyle}>
<div className="absolute inset-0 rounded-md" style={{background:'#18181b'}}>
<TerminalComponent
ref={t.terminalRef}
hostConfig={t.hostConfig}
isVisible={effectiveVisible}
title={t.title}
showTitle={false}
splitScreen={allSplitScreenTab.length>0}
/>
{t.type === 'terminal' ? (
<TerminalComponent
ref={t.terminalRef}
hostConfig={t.hostConfig}
isVisible={effectiveVisible}
title={t.title}
showTitle={false}
splitScreen={allSplitScreenTab.length>0}
/>
) : (
<ServerView
hostConfig={t.hostConfig}
title={t.title}
isVisible={effectiveVisible}
isTopbarOpen={isTopbarOpen}
embedded
/>
)}
</div>
</div>
);
@@ -161,6 +175,23 @@ export function TerminalView({ isTopbarOpen = true }: TerminalViewProps): React.
);
};
const ResetButton = ({ onClick }: { onClick: () => void }) => (
<Button
type="button"
variant="ghost"
onClick={onClick}
aria-label="Reset split sizes"
className="absolute top-0 right-0 h-[28px] w-[28px] !rounded-none border-l-1 border-b-1 border-[#222224] bg-[#1b1b1e] hover:bg-[#232327] text-white flex items-center justify-center p-0"
>
<RefreshCcw className="h-4 w-4" />
</Button>
);
const handleReset = () => {
setResetKey((k) => k + 1);
requestAnimationFrame(() => scheduleMeasureAndFit());
};
const renderSplitOverlays = () => {
const splitTabs = terminalTabs.filter((tab: any) => allSplitScreenTab.includes(tab.id));
const mainTab = terminalTabs.find((tab: any) => tab.id === currentTab);
@@ -174,16 +205,19 @@ export function TerminalView({ isTopbarOpen = true }: TerminalViewProps): React.
const [a,b] = layoutTabs as any[];
return (
<div style={{ position:'absolute', inset:0, zIndex:10, pointerEvents:'none' }}>
<ResizablePrimitive.PanelGroup direction="horizontal" className="h-full w-full" {...commonGroupProps}>
<ResizablePrimitive.PanelGroup key={resetKey} direction="horizontal" className="h-full w-full" {...commonGroupProps}>
<ResizablePanel defaultSize={50} minSize={20} className="!overflow-hidden h-full w-full" id={`panel-${a.id}`} order={1}>
<div ref={el => { panelRefs.current[String(a.id)] = el; }} style={{height:'100%',width:'100%',display:'flex',flexDirection:'column',background:'transparent',position:'relative'}}>
<div style={{background:'#1b1b1e',color:'#fff',fontSize:13,height:HEADER_H,lineHeight:`${HEADER_H}px`,padding:'0 10px',borderBottom:'1px solid #222224',letterSpacing:1,margin:0,pointerEvents:'auto',zIndex:11}}>{a.title}</div>
<div style={{background:'#1b1b1e',color:'#fff',fontSize:13,height:HEADER_H,lineHeight:`${HEADER_H}px`,padding:'0 10px',borderBottom:'1px solid #222224',letterSpacing:1,margin:0,pointerEvents:'auto',zIndex:11, position:'relative'}}>{a.title}</div>
</div>
</ResizablePanel>
<ResizableHandle style={handleStyle}/>
<ResizablePanel defaultSize={50} minSize={20} className="!overflow-hidden h-full w-full" id={`panel-${b.id}`} order={2}>
<div ref={el => { panelRefs.current[String(b.id)] = el; }} style={{height:'100%',width:'100%',display:'flex',flexDirection:'column',background:'transparent',position:'relative'}}>
<div style={{background:'#1b1b1e',color:'#fff',fontSize:13,height:HEADER_H,lineHeight:`${HEADER_H}px`,padding:'0 10px',borderBottom:'1px solid #222224',letterSpacing:1,margin:0,pointerEvents:'auto',zIndex:11}}>{b.title}</div>
<div style={{background:'#1b1b1e',color:'#fff',fontSize:13,height:HEADER_H,lineHeight:`${HEADER_H}px`,padding:'0 10px',borderBottom:'1px solid #222224',letterSpacing:1,margin:0,pointerEvents:'auto',zIndex:11, position:'relative'}}>
{b.title}
<ResetButton onClick={handleReset} />
</div>
</div>
</ResizablePanel>
</ResizablePrimitive.PanelGroup>
@@ -194,18 +228,21 @@ export function TerminalView({ isTopbarOpen = true }: TerminalViewProps): React.
const [a,b,c] = layoutTabs as any[];
return (
<div style={{ position:'absolute', inset:0, zIndex:10, pointerEvents:'none' }}>
<ResizablePrimitive.PanelGroup direction="vertical" className="h-full w-full" id="main-vertical" {...commonGroupProps}>
<ResizablePrimitive.PanelGroup key={resetKey} direction="vertical" className="h-full w-full" id="main-vertical" {...commonGroupProps}>
<ResizablePanel defaultSize={50} minSize={20} className="!overflow-hidden h-full w-full" id="top-panel" order={1}>
<ResizablePanelGroup direction="horizontal" className="h-full w-full" id="top-horizontal" {...commonGroupProps}>
<ResizablePanelGroup key={`top-${resetKey}`} direction="horizontal" className="h-full w-full" id="top-horizontal" {...commonGroupProps}>
<ResizablePanel defaultSize={50} minSize={20} className="!overflow-hidden h-full w-full" id={`panel-${a.id}`} order={1}>
<div ref={el => { panelRefs.current[String(a.id)] = el; }} style={{height:'100%',width:'100%',display:'flex',flexDirection:'column',position:'relative'}}>
<div style={{background:'#1b1b1e',color:'#fff',fontSize:13,height:HEADER_H,lineHeight:`${HEADER_H}px`,padding:'0 10px',borderBottom:'1px solid #222224',letterSpacing:1,margin:0,pointerEvents:'auto',zIndex:11}}>{a.title}</div>
<div style={{background:'#1b1b1e',color:'#fff',fontSize:13,height:HEADER_H,lineHeight:`${HEADER_H}px`,padding:'0 10px',borderBottom:'1px solid #222224',letterSpacing:1,margin:0,pointerEvents:'auto',zIndex:11, position:'relative'}}>{a.title}</div>
</div>
</ResizablePanel>
<ResizableHandle style={handleStyle}/>
<ResizablePanel defaultSize={50} minSize={20} className="!overflow-hidden h-full w-full" id={`panel-${b.id}`} order={2}>
<div ref={el => { panelRefs.current[String(b.id)] = el; }} style={{height:'100%',width:'100%',display:'flex',flexDirection:'column',position:'relative'}}>
<div style={{background:'#1b1b1e',color:'#fff',fontSize:13,height:HEADER_H,lineHeight:`${HEADER_H}px`,padding:'0 10px',borderBottom:'1px solid #222224',letterSpacing:1,margin:0,pointerEvents:'auto',zIndex:11}}>{b.title}</div>
<div style={{background:'#1b1b1e',color:'#fff',fontSize:13,height:HEADER_H,lineHeight:`${HEADER_H}px`,padding:'0 10px',borderBottom:'1px solid #222224',letterSpacing:1,margin:0,pointerEvents:'auto',zIndex:11, position:'relative'}}>
{b.title}
<ResetButton onClick={handleReset} />
</div>
</div>
</ResizablePanel>
</ResizablePanelGroup>
@@ -213,7 +250,7 @@ export function TerminalView({ isTopbarOpen = true }: TerminalViewProps): React.
<ResizableHandle style={handleStyle}/>
<ResizablePanel defaultSize={50} minSize={20} className="!overflow-hidden h-full w-full" id="bottom-panel" order={2}>
<div ref={el => { panelRefs.current[String(c.id)] = el; }} style={{height:'100%',width:'100%',display:'flex',flexDirection:'column',position:'relative'}}>
<div style={{background:'#1b1b1e',color:'#fff',fontSize:13,height:HEADER_H,lineHeight:`${HEADER_H}px`,padding:'0 10px',borderBottom:'1px solid #222224',letterSpacing:1,margin:0,pointerEvents:'auto',zIndex:11}}>{c.title}</div>
<div style={{background:'#1b1b1e',color:'#fff',fontSize:13,height:HEADER_H,lineHeight:`${HEADER_H}px`,padding:'0 10px',borderBottom:'1px solid #222224',letterSpacing:1,margin:0,pointerEvents:'auto',zIndex:11, position:'relative'}}>{c.title}</div>
</div>
</ResizablePanel>
</ResizablePrimitive.PanelGroup>
@@ -224,34 +261,37 @@ export function TerminalView({ isTopbarOpen = true }: TerminalViewProps): React.
const [a,b,c,d] = layoutTabs as any[];
return (
<div style={{ position:'absolute', inset:0, zIndex:10, pointerEvents:'none' }}>
<ResizablePrimitive.PanelGroup direction="vertical" className="h-full w-full" id="main-vertical" {...commonGroupProps}>
<ResizablePrimitive.PanelGroup key={resetKey} direction="vertical" className="h-full w-full" id="main-vertical" {...commonGroupProps}>
<ResizablePanel defaultSize={50} minSize={20} className="!overflow-hidden h-full w-full" id="top-panel" order={1}>
<ResizablePanelGroup direction="horizontal" className="h-full w-full" id="top-horizontal" {...commonGroupProps}>
<ResizablePanel defaultSize={50} minSize={20} className="!overflow-hidden h-full w-full" id={`panel-${a.id}`} order={1}>
<ResizablePanelGroup key={`top-${resetKey}`} direction="horizontal" className="h-full w-full" id="top-horizontal" {...commonGroupProps}>
<ResizablePanel defaultSize={50} minSize={20} className="!overflow-hidden h_full w_full" id={`panel-${a.id}`} order={1}>
<div ref={el => { panelRefs.current[String(a.id)] = el; }} style={{height:'100%',width:'100%',display:'flex',flexDirection:'column',position:'relative'}}>
<div style={{background:'#1b1b1e',color:'#fff',fontSize:13,height:HEADER_H,lineHeight:`${HEADER_H}px`,padding:'0 10px',borderBottom:'1px solid #222224',letterSpacing:1,margin:0,pointerEvents:'auto',zIndex:11}}>{a.title}</div>
<div style={{background:'#1b1b1e',color:'#fff',fontSize:13,height:HEADER_H,lineHeight:`${HEADER_H}px`,padding:'0 10px',borderBottom:'1px solid #222224',letterSpacing:1,margin:0,pointerEvents:'auto',zIndex:11, position:'relative'}}>{a.title}</div>
</div>
</ResizablePanel>
<ResizableHandle style={handleStyle}/>
<ResizablePanel defaultSize={50} minSize={20} className="!overflow-hidden h-full w_full" id={`panel-${b.id}`} order={2}>
<ResizablePanel defaultSize={50} minSize={20} className="!overflow-hidden h_full w_full" id={`panel-${b.id}`} order={2}>
<div ref={el => { panelRefs.current[String(b.id)] = el; }} style={{height:'100%',width:'100%',display:'flex',flexDirection:'column',position:'relative'}}>
<div style={{background:'#1b1b1e',color:'#fff',fontSize:13,height:HEADER_H,lineHeight:`${HEADER_H}px`,padding:'0 10px',borderBottom:'1px solid #222224',letterSpacing:1,margin:0,pointerEvents:'auto',zIndex:11}}>{b.title}</div>
<div style={{background:'#1b1b1e',color:'#fff',fontSize:13,height:HEADER_H,lineHeight:`${HEADER_H}px`,padding:'0 10px',borderBottom:'1px solid #222224',letterSpacing:1,margin:0,pointerEvents:'auto',zIndex:11, position:'relative'}}>
{b.title}
<ResetButton onClick={handleReset} />
</div>
</div>
</ResizablePanel>
</ResizablePanelGroup>
</ResizablePanel>
<ResizableHandle style={handleStyle}/>
<ResizablePanel defaultSize={50} minSize={20} className="!overflow-hidden h_full w_full" id="bottom-panel" order={2}>
<ResizablePanelGroup direction="horizontal" className="h-full w-full" id="bottom-horizontal" {...commonGroupProps}>
<ResizablePanelGroup key={`bottom-${resetKey}`} direction="horizontal" className="h-full w-full" id="bottom-horizontal" {...commonGroupProps}>
<ResizablePanel defaultSize={50} minSize={20} className="!overflow-hidden h_full w_full" id={`panel-${c.id}`} order={1}>
<div ref={el => { panelRefs.current[String(c.id)] = el; }} style={{height:'100%',width:'100%',display:'flex',flexDirection:'column',position:'relative'}}>
<div style={{background:'#1b1b1e',color:'#fff',fontSize:13,height:HEADER_H,lineHeight:`${HEADER_H}px`,padding:'0 10px',borderBottom:'1px solid #222224',letterSpacing:1,margin:0,pointerEvents:'auto',zIndex:11}}>{c.title}</div>
<div style={{background:'#1b1b1e',color:'#fff',fontSize:13,height:HEADER_H,lineHeight:`${HEADER_H}px`,padding:'0 10px',borderBottom:'1px solid #222224',letterSpacing:1,margin:0,pointerEvents:'auto',zIndex:11, position:'relative'}}>{c.title}</div>
</div>
</ResizablePanel>
<ResizableHandle style={handleStyle}/>
<ResizablePanel defaultSize={50} minSize={20} className="!overflow-hidden h_full w_full" id={`panel-${d.id}`} order={2}>
<div ref={el => { panelRefs.current[String(d.id)] = el; }} style={{height:'100%',width:'100%',display:'flex',flexDirection:'column',position:'relative'}}>
<div style={{background:'#1b1b1e',color:'#fff',fontSize:13,height:HEADER_H,lineHeight:`${HEADER_H}px`,padding:'0 10px',borderBottom:'1px solid #222224',letterSpacing:1,margin:0,pointerEvents:'auto',zIndex:11}}>{d.title}</div>
<div style={{background:'#1b1b1e',color:'#fff',fontSize:13,height:HEADER_H,lineHeight:`${HEADER_H}px`,padding:'0 10px',borderBottom:'1px solid #222224',letterSpacing:1,margin:0,pointerEvents:'auto',zIndex:11, position:'relative'}}>{d.title}</div>
</div>
</ResizablePanel>
</ResizablePanelGroup>