@aioha/react-ui
Version:
Ready-made React modal for Aioha
23 lines (22 loc) • 2.56 kB
JavaScript
import React from 'react';
import { useAioha } from '@aioha/providers/react';
import { CloseIcon } from './Icons.js';
export const UserModal = ({ imageServer = 'https://images.hive.blog', explorerUrl = 'https://hivehub.dev', onClose, onSwitchUser }) => {
const { aioha, user, otherUsers } = useAioha();
return (React.createElement(React.Fragment, null,
React.createElement("button", { type: "button", className: "absolute top-3 end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white", onClick: () => onClose(false), "aria-label": "Close" },
React.createElement(CloseIcon, null)),
React.createElement("div", { className: "p-4 md:p-5 flex flex-col place-content-center text-center" },
React.createElement("div", { className: "my-3" },
React.createElement("img", { className: "w-16 h-16 mx-auto rounded-full", src: `${imageServer}/u/${user}/avatar`, alt: `${user}'s avatar` }),
React.createElement("h3", { className: "text-lg font-semibold my-2 text-gray-900 dark:text-white" }, user)),
React.createElement("div", { className: "flex flex-col rounded-md shadow-xs mx-auto w-full", role: "group" },
React.createElement("button", { type: "button", className: "flex-1 px-4 py-2 text-sm font-medium hover:cursor-pointer text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 dark:bg-gray-600 dark:border-gray-700 dark:text-white dark:hover:bg-gray-500 rounded-t-lg", onClick: () => window.open(`${explorerUrl}/@${user}`) }, "View In Explorer"),
React.createElement("button", { type: "button", className: "flex-1 px-4 py-2 text-sm font-medium hover:cursor-pointer text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 dark:bg-gray-600 dark:border-gray-700 dark:text-white dark:hover:bg-gray-500", onClick: onSwitchUser }, "Switch User"),
React.createElement("button", { type: "button", className: "flex-1 px-4 py-2 text-sm font-medium hover:cursor-pointer text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 dark:bg-gray-600 dark:border-gray-700 dark:text-white dark:hover:bg-gray-500 rounded-b-lg", onClick: async () => {
await aioha.logout();
onClose(false);
if (Object.keys(otherUsers).length > 0)
onSwitchUser();
} }, "Logout")))));
};