phx-react
Version:
PHX REACT
66 lines • 7.23 kB
JavaScript
import React, { Fragment, useState } from 'react';
import { FaceFrownIcon, FaceSmileIcon, FireIcon, HandThumbUpIcon, HeartIcon, PaperClipIcon, XMarkIcon, } from '@heroicons/react/20/solid';
import { Listbox, Transition } from '@headlessui/react';
var moods = [
{ name: 'Excited', value: 'excited', icon: FireIcon, iconColor: 'text-white', bgColor: 'bg-red-500' },
{ name: 'Loved', value: 'loved', icon: HeartIcon, iconColor: 'text-white', bgColor: 'bg-pink-400' },
{ name: 'Happy', value: 'happy', icon: FaceSmileIcon, iconColor: 'text-white', bgColor: 'bg-green-400' },
{ name: 'Sad', value: 'sad', icon: FaceFrownIcon, iconColor: 'text-white', bgColor: 'bg-yellow-400' },
{ name: 'Thumbsy', value: 'thumbsy', icon: HandThumbUpIcon, iconColor: 'text-white', bgColor: 'bg-blue-500' },
{ name: 'I feel nothing', value: null, icon: 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 = useState(moods[5]), selected = _a[0], setSelected = _a[1];
return (React.createElement("div", null,
React.createElement("div", { className: 'flex items-start space-x-4' },
React.createElement("div", { className: 'flex-shrink-0' },
React.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.createElement("div", { className: 'min-w-0 flex-1' },
React.createElement("form", { action: '#', className: 'relative' },
React.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.createElement("label", { htmlFor: 'comment', className: 'sr-only' }, "Add your comment"),
React.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.createElement("div", { className: 'py-2', "aria-hidden": 'true' },
React.createElement("div", { className: 'py-px' },
React.createElement("div", { className: 'h-9' })))),
React.createElement("div", { className: 'absolute inset-x-0 bottom-0 flex justify-between py-2 pl-3 pr-2' },
React.createElement("div", { className: 'flex items-center space-x-5' },
React.createElement("div", { className: 'flex items-center' },
React.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.createElement(PaperClipIcon, { className: 'h-5 w-5', "aria-hidden": 'true' }),
React.createElement("span", { className: 'sr-only' }, "Attach a file"))),
React.createElement("div", { className: 'flex items-center' },
React.createElement(Listbox, { value: selected, onChange: setSelected }, function (_a) {
var open = _a.open;
return (React.createElement(React.Fragment, null,
React.createElement(Listbox.Label, { className: 'sr-only' }, "Your mood"),
React.createElement("div", { className: 'relative' },
React.createElement(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.createElement("span", { className: 'flex items-center justify-center' }, selected.value === null ? (React.createElement("span", null,
React.createElement(FaceSmileIcon, { className: 'h-5 w-5 flex-shrink-0', "aria-hidden": 'true' }),
React.createElement("span", { className: 'sr-only' }, "Add your mood"))) : (React.createElement("span", null,
React.createElement("span", { className: classNames(selected.bgColor, 'flex h-8 w-8 items-center justify-center rounded-full') },
React.createElement(selected.icon, { className: 'h-5 w-5 flex-shrink-0 text-white', "aria-hidden": 'true' })),
React.createElement("span", { className: 'sr-only' }, selected.name))))),
React.createElement(Transition, { show: open, as: Fragment, leave: 'transition ease-in duration-100', leaveFrom: 'opacity-100', leaveTo: 'opacity-0' },
React.createElement(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.createElement(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.createElement("div", { className: 'flex items-center' },
React.createElement("div", { className: classNames(mood.bgColor, 'flex h-8 w-8 items-center justify-center rounded-full') },
React.createElement(mood.icon, { className: classNames(mood.iconColor, 'h-5 w-5 flex-shrink-0'), "aria-hidden": 'true' })),
React.createElement("span", { className: 'ml-3 block truncate font-medium' }, mood.name)))); }))))));
}))),
React.createElement("div", { className: 'flex-shrink-0' },
React.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"))))))));
};
export default MyCounter;
//# sourceMappingURL=App.js.map