50 lines
1.6 KiB
TypeScript
50 lines
1.6 KiB
TypeScript
|
import React, { memo } from 'react';
|
||
|
|
|
||
|
|
import { formatHostPort } from '../../domain/host';
|
||
|
|
import type { Host } from '../../types';
|
||
|
|
import { DistroAvatar } from '../DistroAvatar';
|
||
|
|
import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
|
||
|
|
|
||
|
|
interface WorkspaceSidebarHostHeaderProps {
|
||
|
|
host: Host;
|
||
|
|
section?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const WorkspaceSidebarHostHeader = memo(function WorkspaceSidebarHostHeader({
|
||
|
|
host,
|
||
|
|
section = 'terminal-sidebar-host-header',
|
||
|
|
}: WorkspaceSidebarHostHeaderProps) {
|
||
|
|
const username = host.username || 'root';
|
||
|
|
const port = host.port || 22;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className="shrink-0 border-b border-border/50 bg-muted/20 px-3 py-1.5"
|
||
|
|
data-section={section}
|
||
|
|
>
|
||
|
|
<div className="flex items-center gap-2 min-w-0">
|
||
|
|
<DistroAvatar
|
||
|
|
host={host}
|
||
|
|
fallback={host.label.slice(0, 2).toUpperCase()}
|
||
|
|
size="sm"
|
||
|
|
className="h-5 w-5 rounded-sm shrink-0"
|
||
|
|
/>
|
||
|
|
<Tooltip>
|
||
|
|
<TooltipTrigger asChild>
|
||
|
|
<div className="min-w-0 flex-1 max-w-[calc(100%-1.75rem)] text-[11px] leading-5 truncate cursor-default">
|
||
|
|
<span className="font-medium">{host.label}</span>
|
||
|
|
<span className="mx-1 text-muted-foreground">·</span>
|
||
|
|
<span className="font-mono text-muted-foreground">
|
||
|
|
{username}@{host.hostname}:{port}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</TooltipTrigger>
|
||
|
|
<TooltipContent>
|
||
|
|
{`${host.label} · ${username}@${formatHostPort(host.hostname, port)}`}
|
||
|
|
</TooltipContent>
|
||
|
|
</Tooltip>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
});
|