"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.UserProfile = UserProfile;

var _react = require("@headlessui/react");

var _react2 = require("react");

var _context = require("../../context");

var _jsxRuntime = require("react/jsx-runtime");

function UserProfile() {
  var user = (0, _context.useUser)();
  var userNavigation = [{
    name: "Your Profile",
    href: "#"
  }, {
    name: "Settings",
    href: "#"
  }, {
    name: "Sign out",
    href: "#"
  }];
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Menu, {
    as: "div",
    className: "ml-3 relative flex-shrink-0",
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Menu.Button, {
        className: "max-w-xs flex items-center text-sm rounded-full",
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
          className: "sr-only",
          children: "Open user menu"
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
          className: "h-8 w-8 rounded-full",
          src: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
          alt: ""
        })]
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Transition, {
      as: _react2.Fragment,
      enter: "transition ease-out duration-100",
      enterFrom: "transform opacity-0 scale-95",
      enterTo: "transform opacity-100 scale-100",
      leave: "transition ease-in duration-75",
      leaveFrom: "transform opacity-100 scale-100",
      leaveTo: "transform opacity-0 scale-95",
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Menu.Items, {
        className: "origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 py-1 focus:outline-none",
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Menu.Item, {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
            className: "block py-2 px-4 text-sm text-gray-400",
            children: user.name
          })
        }), userNavigation.map(function (item) {
          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Menu.Item, {
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
              href: item.href,
              className: "block py-2 px-4 text-sm text-gray-700  hover:bg-gray-50 hover:text-gray-900 ",
              children: item.name
            })
          }, item.name);
        })]
      })
    })]
  });
}