treesap/dist/components/Sidebar.js

AI Agent Framework

import { jsx as _jsx, jsxs as _jsxs } from "hono/jsx/jsx-runtime";
import { Terminal as TerminalComponent } from "./Terminal.js";
import { ChatInput } from "./ChatInput.js";
export function Sidebar({ id = "sidebar", previewPort = 1234, workingDirectory }) {
    return (_jsxs("sapling-island", { loading: "visible", children: [_jsxs("template", { children: [_jsx("script", { type: "module", src: "https://code.iconify.design/iconify-icon/2.0.0/iconify-icon.min.js" }), _jsx("script", { type: "module", src: "/components/Sidebar.js" })] }), _jsx("div", { id: `${id}-backdrop`, class: "fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm z-40 transition-opacity duration-300 opacity-0 pointer-events-none md:hidden" }), _jsxs("div", { id: `${id}-pane`, class: "fixed left-0 top-0 h-full w-full z-50 transform -translate-x-full transition-transform duration-300 ease-in-out md:relative md:translate-x-0 md:w-2/5 md:z-auto border-r border-[#3c3c3c] flex flex-col bg-[#252526]", children: [_jsx("div", { class: "p-3 border-b border-[#3c3c3c] bg-[#2d2d30] flex-shrink-0", children: _jsxs("div", { class: "flex items-center gap-2", children: [_jsx("button", { type: "button", id: `${id}-close-btn`, class: "p-2 hover:bg-[#3c3c3c] rounded-md transition-colors flex-shrink-0 text-[#cccccc] hover:text-white md:hidden", title: "Close Sidebar", children: _jsx("iconify-icon", { icon: "tabler:x", width: "16", height: "16" }) }), _jsx("a", { href: "/", class: "p-2 hover:bg-[#3c3c3c] rounded-md transition-colors flex-shrink-0 text-[#cccccc] hover:text-white", title: "Back to Home", children: _jsx("iconify-icon", { icon: "tabler:arrow-left", width: "16", height: "16" }) }), _jsx("button", { type: "button", id: "live-preview-refresh-btn", class: "p-2 hover:bg-[#3c3c3c] rounded-md transition-colors flex-shrink-0 text-[#cccccc] hover:text-white", title: "Reload", children: _jsx("iconify-icon", { icon: "tabler:refresh", width: "16", height: "16" }) }), _jsxs("div", { class: "flex-1 flex items-center bg-[#1e1e1e] border border-[#3c3c3c] rounded px-3 py-2 hover:border-[#0e639c] focus-within:border-[#0e639c] transition-all", children: [_jsx("iconify-icon", { icon: "tabler:world", width: "16", height: "16", class: "text-[#cccccc] mr-2" }), _jsxs("span", { class: "text-[#cccccc] text-sm", children: ["localhost:", previewPort, "/"] }), _jsx("input", { id: "live-preview-url-input", type: "text", placeholder: "path", defaultValue: "", class: "flex-1 bg-transparent text-sm focus:outline-none text-[#cccccc] ml-1" }), _jsx("button", { type: "button", id: "live-preview-load-btn", class: "ml-2 p-1 hover:bg-[#3c3c3c] rounded transition-colors flex-shrink-0 text-[#cccccc] hover:text-white", title: "Go", children: _jsx("iconify-icon", { icon: "tabler:chevron-right", width: "16", height: "16" }) })] })] }) }), _jsxs("div", { class: "flex-1 overflow-hidden bg-[#1e1e1e] flex flex-col", children: [_jsx("div", { class: "flex-1 overflow-hidden", children: _jsx(TerminalComponent, { index: 1 }) }), _jsx("div", { class: "flex-shrink-0", children: _jsx(ChatInput, { id: "chat-input", terminalId: "terminal-1" }) })] })] })] }));
}
//# sourceMappingURL=Sidebar.js.map