terminal-lite
Version:
A lightweight customizable terminal-like React component.
23 lines (22 loc) • 1.91 kB
JavaScript
import React from "react";
import CloseIcon from "@mui/icons-material/Close";
import CropSquareIcon from "@mui/icons-material/CropSquare";
import HorizontalRuleIcon from "@mui/icons-material/HorizontalRule";
import { twMerge } from "tailwind-merge";
var Terminal = function (_a) {
var title = _a.title, children = _a.children, className = _a.className;
return (React.createElement("div", { className: twMerge("bg-[#151515] border-2 border-primary-border h-full", className) },
React.createElement("div", { id: "terminal-header", className: "h-9 bg-primary-border-dark flex items-center justify-between px-2 font-tech-mono font-bold text-[#efefef] text-[12px]" },
React.createElement("div", { id: "terminal-title", className: "flex-1" }, title),
React.createElement("div", { id: "terminal-action-btns-container", className: "flex gap-2" },
React.createElement("button", { id: "terminal-minimize-btn", className: "hover:cursor-pointer" },
React.createElement(HorizontalRuleIcon, { sx: { fontSize: 15 } })),
React.createElement("button", { id: "terminal-restore-btn" },
React.createElement(CropSquareIcon, { sx: { fontSize: 15 }, className: "hover:cursor-pointer" })),
React.createElement("button", { id: "terminal-close-btn", className: "hover:cursor-pointer" },
React.createElement(CloseIcon, { sx: { fontSize: 15 } })))),
React.createElement("div", { id: "terminal-body", className: "text-[#ffffffc2] p-2 font-tech-mono overflow-y-auto h-[calc(100%-36px)] scrollbar scrollbar-thumb-[#727272] scrollbar-track-[#181818]" }, children ? (children) : (React.createElement(React.Fragment, null,
"> npm run dev",
React.createElement("span", { className: "animate-blink" }, "_"))))));
};
export default Terminal;