import React from "react";
const ComponentPortViewer = (props) => {
    return (React.createElement("div", null,
        props.name && (React.createElement("h2", { className: "text-sm font-semibold text-gray-600" }, props.name)),
        props.description && (React.createElement("p", { className: "text-xs text-gray-400 mb-2" }, props.description)),
        props.ports && props.ports.length === 0 && (React.createElement("p", { className: "text-xs text-gray-400 italic" }, "No connections.")),
        React.createElement("div", null, props.ports &&
            props.ports.length > 0 &&
            props.ports.map((port, i) => {
                return (React.createElement("div", { key: i, style: {
                        display: "flex",
                        alignItems: "center",
                        gap: "0.625rem",
                        padding: "0.5rem 0.75rem",
                        borderRadius: "8px",
                        backgroundColor: "#f8fafc",
                        border: "1px solid #f1f5f9",
                        marginBottom: "0.375rem",
                    } },
                    React.createElement("div", { style: {
                            width: "8px",
                            height: "8px",
                            borderRadius: "50%",
                            backgroundColor: "#94a3b8",
                            flexShrink: 0,
                        } }),
                    React.createElement("div", { style: { minWidth: 0, flex: 1 } },
                        React.createElement("p", { style: {
                                fontSize: "0.8125rem",
                                fontWeight: 500,
                                color: "#334155",
                                margin: 0,
                                lineHeight: "1.25rem",
                            } },
                            port.title,
                            React.createElement("span", { style: {
                                    color: "#94a3b8",
                                    fontWeight: 400,
                                    fontSize: "0.6875rem",
                                    marginLeft: "0.375rem",
                                    fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',
                                } }, port.id)),
                        port.description && (React.createElement("p", { style: {
                                fontSize: "0.75rem",
                                color: "#94a3b8",
                                margin: 0,
                                lineHeight: "1rem",
                            } }, port.description)))));
            }))));
};
export default ComponentPortViewer;
//# sourceMappingURL=ComponentPortViewer.js.map