@aioha/react-ui
Version:
Ready-made React modal for Aioha
20 lines (19 loc) • 2.07 kB
JavaScript
import React, { useState } from 'react';
import { BackButton } from './BackButton.js';
import { SpinningIcon } from '../Icons.js';
export const UsernameInput = ({ onPrevious, onNext }) => {
const [username, setUsername] = useState('');
const [inProgress, setInProgress] = useState(false);
const proceed = async () => {
setInProgress(true);
await onNext(username);
setInProgress(false);
};
return (React.createElement(React.Fragment, null,
React.createElement("div", { className: "mb-3" },
React.createElement(BackButton, { onPrevious: onPrevious })),
React.createElement("div", { className: "inline-flex flex-row gap-1.5 w-full" },
React.createElement("input", { type: "text", id: "small-input", className: "bg-gray-50 border border-gray-300 text-gray-900 h-auto text-sm rounded-lg focus:outline-hidden focus:border-gray-900 grow p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:border-white", placeholder: "Enter Hive Username", autoCapitalize: "off", value: username, onChange: (evt) => setUsername(evt.target.value), onKeyDown: (evt) => (evt.key === 'Enter' ? proceed() : null), disabled: inProgress }),
React.createElement("button", { type: "button", className: "text-gray-900 bg-white border border-gray-300 focus:outline-hidden hover:bg-gray-100 font-medium rounded-lg text-sm px-3 py-1.5 items-center flex-none dark:bg-gray-600 dark:text-white dark:border-gray-600 dark:hover:bg-gray-500 dark:hover:border-gray-500", onClick: proceed, "aria-label": "Proceed", disabled: inProgress }, inProgress ? (React.createElement(SpinningIcon, null)) : (React.createElement("svg", { className: "w-6 h-6 text-gray-800 dark:text-white", "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 24 24" },
React.createElement("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "m9 5 7 7-7 7" })))))));
};