@wener/console
Version:
Base console UI toolkit
49 lines (48 loc) • 2.37 kB
JavaScript
import React, { Fragment } from "react";
import { HiUsers } from "react-icons/hi2";
import { Popover, Transition } from "@headlessui/react";
import { clsx } from "clsx";
import { Button } from "../../../daisy/index.js";
export const DockUserAvatar = ({ hasNotification, fullName, loginName, avatarUrl, onSignIn, onSignOut, actions, children }) => {
if (!loginName) {
return /*#__PURE__*/ React.createElement(Button, {
size: "md",
ghost: true,
circle: true,
className: "opacity-80",
onClick: onSignIn
}, /*#__PURE__*/ React.createElement(HiUsers, {
className: "h-6 w-6"
}), /*#__PURE__*/ React.createElement("small", {
className: "text-xs"
}, "\u672A\u767B\u5F55"));
}
return /*#__PURE__*/ React.createElement(Popover, {
className: "relative"
}, ({ open }) => /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Popover.Button, {
type: "button",
className: clsx("btn btn-circle btn-ghost btn-sm p-0", "bg-base-200 ring-2 ring-stone-300", "h-10 w-10", open && "btn-active")
}, /*#__PURE__*/ React.createElement("div", {
className: clsx("avatar", !avatarUrl && "placeholder", hasNotification && "online")
}, avatarUrl ? /*#__PURE__*/ React.createElement("div", {
className: "w-10 rounded-full"
}, /*#__PURE__*/ React.createElement("img", {
alt: fullName || "user avatar",
src: avatarUrl
})) : /*#__PURE__*/ React.createElement("div", {
className: "w-10 rounded-full"
}, fullName?.slice(0, 1)))), /*#__PURE__*/ React.createElement(Transition, {
as: Fragment,
enter: "transition ease-out duration-200",
enterFrom: "opacity-0 translate-y-1",
enterTo: "opacity-100 translate-y-0",
leave: "transition ease-in duration-150",
leaveFrom: "opacity-100 translate-y-0",
leaveTo: "opacity-0 translate-y-1"
}, /*#__PURE__*/ React.createElement(Popover.Panel, {
className: "absolute right-full top-0 z-10 mr-2 w-[180px]"
}, /*#__PURE__*/ React.createElement("div", {
className: "overflow-hidden rounded-lg bg-base-100/50 p-3 shadow-lg ring-1 ring-black ring-opacity-5 backdrop-blur"
}, children)))));
};
//# sourceMappingURL=DockUserAvatar.js.map