import * as React from 'react';
import { Link, NavLink } from 'react-router-dom';
import { orgURL } from '../../org';
import { OrgAvatar } from '../../org/OrgAvatar';
import { UserAvatar } from '../UserAvatar';
/**
 * Header for the user area.
 */
export const UserAreaHeader = (props) => (React.createElement("div", { className: `user-area-header area-header ${props.className}` },
    React.createElement("div", { className: `${props.className}-inner` }, props.user && (React.createElement(React.Fragment, null,
        React.createElement("h2", { className: "user-area-header__title" },
            props.user.avatarURL && React.createElement(UserAvatar, { className: "user-area-header__avatar", user: props.user }),
            props.user.displayName ? (React.createElement(React.Fragment, null,
                props.user.displayName,
                ' ',
                React.createElement("span", { className: "user-area-header__title-subtitle" }, props.user.username))) : (props.user.username)),
        React.createElement("div", { className: "area-header__nav" },
            React.createElement("div", { className: "area-header__nav-links" }, props.navItems.map(({ to, label, exact, icon: Icon, condition = () => true }) => condition(props) && (React.createElement(NavLink, { key: label, to: props.url + to, className: "btn area-header__nav-link", activeClassName: "area-header__nav-link--active", exact: exact },
                Icon && React.createElement(Icon, { className: "icon-inline" }),
                " ",
                label)))),
            props.user.organizations.nodes.length > 0 && (React.createElement("div", { className: "area-header__nav-actions" },
                React.createElement("small", { className: "area-header__nav-actions-label" }, "Organizations"),
                props.user.organizations.nodes.map(org => (React.createElement(Link, { className: "area-header__nav-action", key: org.id, to: orgURL(org.name), "data-tooltip": org.displayName || org.name },
                    React.createElement(OrgAvatar, { org: org.name }))))))))))));
//# sourceMappingURL=UserAreaHeader.js.map