phx-react
Version:
PHX REACT
69 lines • 7.89 kB
JavaScript
"use strict";
exports.__esModule = true;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var solid_1 = require("@heroicons/react/20/solid");
var react_2 = require("@headlessui/react");
var 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() {
var classes = [];
for (var _i = 0; _i < arguments.length; _i++) {
classes[_i] = arguments[_i];
}
return classes.filter(Boolean).join(' ');
}
var MyCounter = function () {
var _a = (0, react_1.useState)(moods[5]), selected = _a[0], setSelected = _a[1];
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 }, function (_a) {
var open = _a.open;
return (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(function (mood) { return (react_1["default"].createElement(react_2.Listbox.Option, { key: mood.value, className: function (_a) {
var active = _a.active;
return 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