115 lines
3.5 KiB
TypeScript
115 lines
3.5 KiB
TypeScript
"use client";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import Tab from "@/components/ui/tab";
|
|
import { closeTerminal, createTerminal } from "@/lib/terminal";
|
|
import { Terminal } from "@xterm/xterm";
|
|
import { Loader2, Plus, SquareTerminal, TerminalSquare } from "lucide-react";
|
|
import { Socket } from "socket.io-client";
|
|
import { toast } from "sonner";
|
|
import EditorTerminal from "./terminal";
|
|
import { useState } from "react";
|
|
|
|
export default function Terminals({
|
|
terminals,
|
|
setTerminals,
|
|
socket,
|
|
}: {
|
|
terminals: { id: string; terminal: Terminal | null }[];
|
|
setTerminals: React.Dispatch<
|
|
React.SetStateAction<
|
|
{
|
|
id: string;
|
|
terminal: Terminal | null;
|
|
}[]
|
|
>
|
|
>;
|
|
socket: Socket;
|
|
}) {
|
|
const [activeTerminalId, setActiveTerminalId] = useState("");
|
|
const [creatingTerminal, setCreatingTerminal] = useState(false);
|
|
const [closingTerminal, setClosingTerminal] = useState("");
|
|
const activeTerminal = terminals.find((t) => t.id === activeTerminalId);
|
|
|
|
return (
|
|
<>
|
|
<div className="h-10 w-full overflow-auto flex gap-2 shrink-0 tab-scroll">
|
|
{terminals.map((term) => (
|
|
<Tab
|
|
key={term.id}
|
|
creating={creatingTerminal}
|
|
onClick={() => setActiveTerminalId(term.id)}
|
|
onClose={() =>
|
|
closeTerminal({
|
|
term,
|
|
terminals,
|
|
setTerminals,
|
|
setActiveTerminalId,
|
|
setClosingTerminal,
|
|
socket,
|
|
activeTerminalId,
|
|
})
|
|
}
|
|
closing={closingTerminal === term.id}
|
|
selected={activeTerminalId === term.id}
|
|
>
|
|
<SquareTerminal className="w-4 h-4 mr-2" />
|
|
Shell
|
|
</Tab>
|
|
))}
|
|
<Button
|
|
disabled={creatingTerminal}
|
|
onClick={() => {
|
|
if (terminals.length >= 4) {
|
|
toast.error("You reached the maximum # of terminals.");
|
|
return;
|
|
}
|
|
createTerminal({
|
|
setTerminals,
|
|
setActiveTerminalId,
|
|
setCreatingTerminal,
|
|
socket,
|
|
});
|
|
}}
|
|
size="smIcon"
|
|
variant={"secondary"}
|
|
className={`font-normal shrink-0 select-none text-muted-foreground disabled:opacity-50`}
|
|
>
|
|
{creatingTerminal ? (
|
|
<Loader2 className="animate-spin w-4 h-4" />
|
|
) : (
|
|
<Plus className="w-4 h-4" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
{socket && activeTerminal ? (
|
|
<div className="w-full relative grow h-full overflow-hidden rounded-md bg-secondary">
|
|
{terminals.map((term) => (
|
|
<EditorTerminal
|
|
key={term.id}
|
|
socket={socket}
|
|
id={term.id}
|
|
term={term.terminal}
|
|
setTerm={(t: Terminal) => {
|
|
setTerminals((prev) =>
|
|
prev.map((term) =>
|
|
term.id === activeTerminalId
|
|
? { ...term, terminal: t }
|
|
: term
|
|
)
|
|
);
|
|
}}
|
|
visible={activeTerminalId === term.id}
|
|
/>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="w-full h-full flex items-center justify-center text-lg font-medium text-muted-foreground/50 select-none">
|
|
<TerminalSquare className="w-4 h-4 mr-2" />
|
|
No terminals open.
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|