@wener/console
Version:
Base console UI toolkit
49 lines (48 loc) • 2.44 kB
JavaScript
import React from "react";
import { HiUsers } from "react-icons/hi2";
import { Popover, Transition } from "@headlessui/react";
import { Button } from "@wener/console/daisy";
import { clsx } from "clsx";
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'
}, "未登录"));
}
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: React.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