143 lines
4.8 KiB
TypeScript
143 lines
4.8 KiB
TypeScript
import React from "react";
|
|
import {ButtonGroup} from "@/components/ui/button-group.tsx";
|
|
import {Button} from "@/components/ui/button.tsx";
|
|
import {useTranslation} from 'react-i18next';
|
|
import {
|
|
Home,
|
|
SeparatorVertical,
|
|
X,
|
|
Terminal as TerminalIcon,
|
|
Server as ServerIcon,
|
|
Folder as FolderIcon
|
|
} from "lucide-react";
|
|
|
|
interface TabProps {
|
|
tabType: string;
|
|
title?: string;
|
|
isActive?: boolean;
|
|
onActivate?: () => void;
|
|
onClose?: () => void;
|
|
onSplit?: () => void;
|
|
canSplit?: boolean;
|
|
canClose?: boolean;
|
|
disableActivate?: boolean;
|
|
disableSplit?: boolean;
|
|
disableClose?: boolean;
|
|
}
|
|
|
|
export function Tab({
|
|
tabType,
|
|
title,
|
|
isActive,
|
|
onActivate,
|
|
onClose,
|
|
onSplit,
|
|
canSplit = false,
|
|
canClose = false,
|
|
disableActivate = false,
|
|
disableSplit = false,
|
|
disableClose = false
|
|
}: TabProps): React.ReactElement {
|
|
const {t} = useTranslation();
|
|
if (tabType === "home") {
|
|
return (
|
|
<Button
|
|
variant="outline"
|
|
className={`!px-2 border-1 border-[#303032] ${isActive ? '!bg-[#1d1d1f] !text-white !border-[#2d2d30]' : ''}`}
|
|
onClick={onActivate}
|
|
disabled={disableActivate}
|
|
>
|
|
<Home/>
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
if (tabType === "terminal" || tabType === "server" || tabType === "file_manager") {
|
|
const isServer = tabType === 'server';
|
|
const isFileManager = tabType === 'file_manager';
|
|
return (
|
|
<ButtonGroup>
|
|
<Button
|
|
variant="outline"
|
|
className={`!px-2 border-1 border-[#303032] ${isActive ? '!bg-[#1d1d1f] !text-white !border-[#2d2d30]' : ''}`}
|
|
onClick={onActivate}
|
|
disabled={disableActivate}
|
|
>
|
|
{isServer ? <ServerIcon className="mr-1 h-4 w-4"/> : isFileManager ?
|
|
<FolderIcon className="mr-1 h-4 w-4"/> : <TerminalIcon className="mr-1 h-4 w-4"/>}
|
|
{title || (isServer ? t('nav.serverStats') : isFileManager ? t('nav.fileManager') : t('nav.terminal'))}
|
|
</Button>
|
|
{canSplit && (
|
|
<Button
|
|
variant="outline"
|
|
className="!px-2 border-1 border-[#303032]"
|
|
onClick={onSplit}
|
|
disabled={disableSplit}
|
|
title={disableSplit ? t('nav.cannotSplitTab') : t('nav.splitScreen')}
|
|
>
|
|
<SeparatorVertical className="w-[28px] h-[28px]"/>
|
|
</Button>
|
|
)}
|
|
{canClose && (
|
|
<Button
|
|
variant="outline"
|
|
className="!px-2 border-1 border-[#303032]"
|
|
onClick={onClose}
|
|
disabled={disableClose}
|
|
>
|
|
<X/>
|
|
</Button>
|
|
)}
|
|
</ButtonGroup>
|
|
);
|
|
}
|
|
|
|
if (tabType === "ssh_manager") {
|
|
return (
|
|
<ButtonGroup>
|
|
<Button
|
|
variant="outline"
|
|
className={`!px-2 border-1 border-[#303032] ${isActive ? '!bg-[#1d1d1f] !text-white !border-[#2d2d30]' : ''}`}
|
|
onClick={onActivate}
|
|
disabled={disableActivate}
|
|
>
|
|
{title || t('nav.sshManager')}
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
className="!px-2 border-1 border-[#303032]"
|
|
onClick={onClose}
|
|
disabled={disableClose}
|
|
>
|
|
<X/>
|
|
</Button>
|
|
</ButtonGroup>
|
|
);
|
|
}
|
|
|
|
if (tabType === "admin") {
|
|
return (
|
|
<ButtonGroup>
|
|
<Button
|
|
variant="outline"
|
|
className={`!px-2 border-1 border-[#303032] ${isActive ? '!bg-[#1d1d1f] !text-white !border-[#2d2d30]' : ''}`}
|
|
onClick={onActivate}
|
|
disabled={disableActivate}
|
|
>
|
|
{title || t('nav.admin')}
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
className="!px-2 border-1 border-[#303032]"
|
|
onClick={onClose}
|
|
disabled={disableClose}
|
|
>
|
|
<X/>
|
|
</Button>
|
|
</ButtonGroup>
|
|
);
|
|
}
|
|
|
|
return null;
|
|
}
|