phx-react
Version:
PHX REACT
59 lines • 7.27 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const solid_1 = require("@heroicons/react/20/solid");
const react_2 = require("@headlessui/react");
const moods = [
{ name: 'Excited', value: 'excited', icon: solid_1.FireIcon, iconColor: 'text-white', bgColor: 'bg-red-500' },
{ name: 'Loved', value: 'loved', icon: solid_1.HeartIcon, iconColor: 'text-white', bgColor: 'bg-pink-400' },
{ name: 'Happy', value: 'happy', icon: solid_1.FaceSmileIcon, iconColor: 'text-white', bgColor: 'bg-green-400' },
{ name: 'Sad', value: 'sad', icon: solid_1.FaceFrownIcon, iconColor: 'text-white', bgColor: 'bg-yellow-400' },
{ name: 'Thumbsy', value: 'thumbsy', icon: solid_1.HandThumbUpIcon, iconColor: 'text-white', bgColor: 'bg-blue-500' },
{ name: 'I feel nothing', value: null, icon: solid_1.XMarkIcon, iconColor: 'text-gray-400', bgColor: 'bg-transparent' },
];
function classNames(...classes) {
return classes.filter(Boolean).join(' ');
}
const MyCounter = () => {
const [selected, setSelected] = (0, react_1.useState)(moods[5]);
return (react_1.default.createElement("div", null,
react_1.default.createElement("div", { className: 'flex items-start space-x-4' },
react_1.default.createElement("div", { className: 'flex-shrink-0' },
react_1.default.createElement("img", { className: 'inline-block h-10 w-10 rounded-full', src: 'https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80', alt: '' })),
react_1.default.createElement("div", { className: 'min-w-0 flex-1' },
react_1.default.createElement("form", { action: '#', className: 'relative' },
react_1.default.createElement("div", { className: 'overflow-hidden rounded-lg shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-indigo-600' },
react_1.default.createElement("label", { htmlFor: 'comment', className: 'sr-only' }, "Add your comment"),
react_1.default.createElement("textarea", { rows: 3, name: 'comment', id: 'comment', className: 'block w-full resize-none border-0 bg-transparent py-1.5 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6', placeholder: 'Add your comment...', defaultValue: '' }),
react_1.default.createElement("div", { className: 'py-2', "aria-hidden": 'true' },
react_1.default.createElement("div", { className: 'py-px' },
react_1.default.createElement("div", { className: 'h-9' })))),
react_1.default.createElement("div", { className: 'absolute inset-x-0 bottom-0 flex justify-between py-2 pl-3 pr-2' },
react_1.default.createElement("div", { className: 'flex items-center space-x-5' },
react_1.default.createElement("div", { className: 'flex items-center' },
react_1.default.createElement("button", { type: 'button', className: '-m-2.5 flex h-10 w-10 items-center justify-center rounded-full text-gray-400 hover:text-gray-500' },
react_1.default.createElement(solid_1.PaperClipIcon, { className: 'h-5 w-5', "aria-hidden": 'true' }),
react_1.default.createElement("span", { className: 'sr-only' }, "Attach a file"))),
react_1.default.createElement("div", { className: 'flex items-center' },
react_1.default.createElement(react_2.Listbox, { value: selected, onChange: setSelected }, ({ open }) => (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(react_2.Listbox.Label, { className: 'sr-only' }, "Your mood"),
react_1.default.createElement("div", { className: 'relative' },
react_1.default.createElement(react_2.Listbox.Button, { className: 'relative -m-2.5 flex h-10 w-10 items-center justify-center rounded-full text-gray-400 hover:text-gray-500' },
react_1.default.createElement("span", { className: 'flex items-center justify-center' }, selected.value === null ? (react_1.default.createElement("span", null,
react_1.default.createElement(solid_1.FaceSmileIcon, { className: 'h-5 w-5 flex-shrink-0', "aria-hidden": 'true' }),
react_1.default.createElement("span", { className: 'sr-only' }, "Add your mood"))) : (react_1.default.createElement("span", null,
react_1.default.createElement("span", { className: classNames(selected.bgColor, 'flex h-8 w-8 items-center justify-center rounded-full') },
react_1.default.createElement(selected.icon, { className: 'h-5 w-5 flex-shrink-0 text-white', "aria-hidden": 'true' })),
react_1.default.createElement("span", { className: 'sr-only' }, selected.name))))),
react_1.default.createElement(react_2.Transition, { show: open, as: react_1.Fragment, leave: 'transition ease-in duration-100', leaveFrom: 'opacity-100', leaveTo: 'opacity-0' },
react_1.default.createElement(react_2.Listbox.Options, { className: 'absolute z-10 -ml-6 mt-1 w-60 rounded-lg bg-white py-3 text-base shadow ring-1 ring-black ring-opacity-5 focus:outline-none sm:ml-auto sm:w-64 sm:text-sm' }, moods.map((mood) => (react_1.default.createElement(react_2.Listbox.Option, { key: mood.value, className: ({ active }) => classNames(active ? 'bg-gray-100' : 'bg-white', 'relative cursor-default select-none px-3 py-2'), value: mood },
react_1.default.createElement("div", { className: 'flex items-center' },
react_1.default.createElement("div", { className: classNames(mood.bgColor, 'flex h-8 w-8 items-center justify-center rounded-full') },
react_1.default.createElement(mood.icon, { className: classNames(mood.iconColor, 'h-5 w-5 flex-shrink-0'), "aria-hidden": 'true' })),
react_1.default.createElement("span", { className: 'ml-3 block truncate font-medium' }, mood.name))))))))))))),
react_1.default.createElement("div", { className: 'flex-shrink-0' },
react_1.default.createElement("button", { type: 'submit', className: 'inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600' }, "Post"))))))));
};
exports.default = MyCounter;
//# sourceMappingURL=App.js.map