@aioha/react-ui
Version:
Ready-made React modal for Aioha
46 lines (45 loc) • 4.68 kB
JavaScript
import React, { useState } from 'react';
import { useAioha } from '@aioha/providers/react';
import { CloseIcon, EditIcon, PlusIcon } from './Icons.js';
import { RightAngledArrow, RmRowIcon } from './TableUtils.js';
import { Badge } from './login/ProviderSelection.js';
export const SwitchUserModal = ({ onClose, onSelect, onAddAcc }) => {
const { aioha, user, provider, otherUsers } = useAioha();
const [editing, setEditing] = useState(false);
const onClickUser = (selected) => {
if (editing) {
selected === user ? aioha.logout() : aioha.removeOtherLogin(selected);
}
else {
onSelect(selected);
}
};
return (React.createElement(React.Fragment, null,
React.createElement("div", { className: "flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600" },
React.createElement("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white" }, "Switch User"),
React.createElement("button", { type: "button", className: "text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm h-8 w-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white", onClick: () => onClose(false) },
React.createElement(CloseIcon, null))),
React.createElement("div", { className: "w-full overflow-x-auto" },
React.createElement("table", { className: "min-w-full divide-y divide-gray-200 dark:divide-gray-600" },
React.createElement("tbody", { className: "bg-white divide-y divide-gray-200 dark:bg-gray-700 dark:divide-gray-600" },
user && (React.createElement("tr", { key: user, className: "hover:bg-gray-50 dark:hover:bg-gray-600 cursor-pointer", onClick: () => onClickUser(user) },
React.createElement("td", { className: "px-5 py-4 whitespace-nowrap" },
React.createElement("div", { className: "text-sm font-medium text-gray-900 dark:text-gray-100" }, user)),
React.createElement("td", { className: "px-3 py-4 whitespace-nowrap" },
React.createElement(Badge, null, provider)),
editing ? React.createElement(RmRowIcon, { w: 12 }) : React.createElement(RightAngledArrow, { w: 12 }))),
Object.keys(otherUsers).map((u, i) => (React.createElement("tr", { key: i, className: "hover:bg-gray-50 dark:hover:bg-gray-600 cursor-pointer", onClick: () => onClickUser(u) },
React.createElement("td", { className: "px-5 py-4 whitespace-nowrap" },
React.createElement("div", { className: "text-sm font-medium text-gray-900 dark:text-gray-100" }, u)),
React.createElement("td", { className: "px-3 py-4 whitespace-nowrap" },
React.createElement(Badge, null, otherUsers[u])),
editing ? React.createElement(RmRowIcon, { w: 12 }) : React.createElement(RightAngledArrow, { w: 12 })))))),
editing ? (React.createElement("div", { className: "flex gap-2 my-5 mx-auto justify-center" },
React.createElement("button", { type: "button", className: "flex gap-1 items-center justify-center text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 font-medium rounded-lg text-sm px-4 py-2.5 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-800 enabled:hover:cursor-pointer disabled:hover:cursor-not-allowed", onClick: () => setEditing(false) }, "Done"))) : (React.createElement("div", { className: "flex gap-2 my-5 mx-auto justify-center" },
React.createElement("button", { type: "button", className: "flex gap-1 items-center justify-center text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 font-medium rounded-lg text-sm pl-3.5 pr-4 py-2.5 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-800 enabled:hover:cursor-pointer disabled:hover:cursor-not-allowed", onClick: () => setEditing(true) },
React.createElement(EditIcon, null),
"Edit"),
React.createElement("button", { type: "button", className: "flex gap-1 items-center justify-center text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 font-medium rounded-lg text-sm pl-3 pr-4 py-2.5 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-800 enabled:hover:cursor-pointer disabled:hover:cursor-not-allowed", onClick: onAddAcc },
React.createElement(PlusIcon, null),
"Add account"))))));
};