phx-react
Version:
PHX REACT
26 lines • 3.8 kB
JavaScript
import { Transition } from '@headlessui/react';
import { XMarkIcon } from '@heroicons/react/24/outline';
import React, { Fragment } from 'react';
function DefaultActionIcon() {
return (React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 18 18', fill: 'none' },
React.createElement("path", { d: 'M7.85883 17C7.85844 17 7.85795 17 7.85746 17C7.35675 16.9996 6.88591 16.8043 6.53198 16.4498L1.54686 11.4579C0.817712 10.7274 0.817712 9.53887 1.54686 8.8085L8.26687 2.07607C8.9594 1.38223 9.88085 1 10.8614 1H15.1249C16.1587 1 17 1.84102 17 2.875V7.1251C17 8.10488 16.6181 9.02588 15.9249 9.71826L9.18402 16.4517C8.8299 16.8053 8.35926 17 7.85883 17ZM10.8614 2.25C10.2152 2.25 9.60808 2.50186 9.1517 2.95908L2.43159 9.6915C2.18851 9.93506 2.18851 10.3312 2.43159 10.5747L7.41671 15.5666C7.53459 15.6847 7.69144 15.7499 7.85844 15.75H7.85893C8.02574 15.75 8.18258 15.6851 8.30056 15.5673L15.0415 8.83398C15.4983 8.37773 15.7499 7.7707 15.7499 7.1251V2.875C15.7499 2.53037 15.4695 2.25 15.1249 2.25H10.8614ZM12.4683 7.34375C11.4344 7.34375 10.5932 6.50273 10.5932 5.46875C10.5932 4.43477 11.4344 3.59375 12.4683 3.59375C13.5023 3.59375 14.3435 4.43477 14.3435 5.46875C14.3435 6.50273 13.5023 7.34375 12.4683 7.34375ZM12.4683 4.84375C12.1237 4.84375 11.8433 5.12412 11.8433 5.46875C11.8433 5.81338 12.1237 6.09375 12.4683 6.09375C12.8131 6.09375 13.0934 5.81338 13.0934 5.46875C13.0934 5.12412 12.8131 4.84375 12.4683 4.84375Z', fill: 'currentColor' })));
}
export default function PHXBottomAction({ actions, name, onHide, show }) {
return (React.createElement("div", { "aria-live": 'assertive', className: 'pointer-events-none absolute inset-0 flex items-center sm:items-start sm:px-4 sm:py-6' },
React.createElement("div", { className: 'fixed bottom-10 left-0 z-[9999] mr-8 hidden w-full flex-col items-center sm:flex' },
React.createElement(Transition, { as: Fragment, enter: 'transform ease-out duration-300 transition', enterFrom: 'translate-y-2 opacity-0 sm:translate-y-0 sm:translate-y-10', enterTo: 'translate-y-0 opacity-300 sm:translate-y-0', leave: 'transition ease-in duration-100', leaveFrom: 'translate-y-0 opacity-100 sm:translate-y-0', leaveTo: 'translate-y-2 opacity-0 sm:translate-y-0 sm:translate-y-10', show: show },
React.createElement("div", { className: 'pointer-events-auto flex items-center gap-x-10 rounded-xl bg-indigo-800 p-2.5 text-[12px] sm:min-w-[30rem] sm:justify-between sm:gap-x-20 sm:text-xs' },
React.createElement("button", { className: 'flex items-center gap-x-2 rounded-lg border border-gray-600 p-1.5 text-gray-300 hover:bg-white hover:bg-opacity-10 hover:text-white', onClick: onHide, type: 'button' },
React.createElement("p", { className: 'font-normal' }, name),
React.createElement(XMarkIcon, { className: 'mt-0.5 h-4 w-4' })),
React.createElement("div", { className: 'flex items-center gap-x-1' }, (actions || []).map((action) => {
const icon = action.icon || React.createElement(DefaultActionIcon, null);
return (React.createElement("button", { key: action.name, className: 'flex items-center gap-x-1.5 rounded-lg px-2.5 py-1.5 text-xs text-gray-300 hover:bg-white hover:bg-opacity-10 hover:text-white', onClick: () => {
action.onClick();
onHide === null || onHide === void 0 ? void 0 : onHide();
}, type: 'button' },
React.createElement("span", { className: 'h-4 w-4' }, icon),
React.createElement("span", null, action.name)));
})))))));
}
//# sourceMappingURL=bottom-action.js.map