import { Menu } from '@headlessui/react';
import { BellIcon } from '@heroicons/react/24/outline';
import React from 'react';
export default function NotiBellButton({ onClick, unreadCount }) {
    return (React.createElement(Menu.Button, { className: `
        group inline-flex h-7 ${unreadCount > 0 ? 'w-12' : 'w-7'}
        cursor-pointer items-center justify-center gap-0.5 rounded-lg
        transition-all duration-150 ease-out
        hover:border-gray-300 hover:bg-white
        active:border-b-gray-300 active:bg-gray-200
        active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]
      `, onClick: onClick, type: 'button' },
        React.createElement("div", { className: 'flex items-center gap-0.5 transition-transform duration-150 ease-[cubic-bezier(0.22,1,0.36,1)] group-active:translate-y-[1px]' },
            React.createElement(BellIcon, { className: 'h-[19px] w-[22px] text-gray-600' }),
            unreadCount > 0 && (React.createElement("span", { className: 'shadow-sm min-w-4 rounded-md bg-red-500 p-1 text-center text-[10px] font-semibold leading-none text-white' }, unreadCount > 9 ? '9+' : unreadCount)))));
}
//# sourceMappingURL=NotiBellButton.js.map