@tabnews/ui
Version:
TabNews UI
3 lines (2 loc) • 2.02 kB
JavaScript
"use client";
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("@primer/octicons-react"),i=require("@primer/react"),b=require("./NotificationList.cjs"),p=require("./Provider.cjs");function B({topBar:n,sectionIntro:s,footer:r,buttonProps:o,overlayProps:t}){const{getCount:l,isMenuOpen:h,setMenuOpen:x,labels:d,notifications:g,onCloseMenu:c}=p.useNotifications(),a=l==null?void 0:l(g),j=()=>x(!0),f=()=>{c==null||c(),x(!1)};return e.jsxs(i.AnchoredOverlay,{open:h,onOpen:j,onClose:f,width:"large",preventOverflow:!1,renderAnchor:m=>e.jsx(i.IconButton,{"aria-label":d.getBellLabel(a),icon:()=>e.jsx(v,{count:a}),variant:"invisible",...m,...o,sx:{color:a===0?"bg.disabled":"fg.onEmphasis","&:hover":{color:"header.text",backgroundColor:"transparent"},...o==null?void 0:o.sx}}),overlayProps:{role:"dialog",...t,sx:{display:"flex",flexDirection:"column",maxHeight:"90vh",...t==null?void 0:t.sx}},children:[e.jsx(I,{labels:d,onClose:f,topBar:n}),e.jsxs(i.Box,{sx:{display:"flex",flexDirection:"column",overflowY:"auto"},children:[s,e.jsx(b.NotificationList,{}),r]})]})}function v({count:n}){return e.jsxs(i.Box,{sx:{position:"relative"},children:[e.jsx(u.BellIcon,{}),n>0&&e.jsx(i.Box,{"data-testid":"notification-badge",sx:{display:"flex",position:"absolute",left:"47%",bottom:"50%",borderRadius:"3px",backgroundColor:"danger.emphasis",padding:"0 0.2em"},children:e.jsx(i.Text,{fontSize:"0.8em",color:"fg.onEmphasis",children:n>99?"99+":n})})]})}function I({labels:n,onClose:s,topBar:r}){return e.jsxs(i.Box,{sx:{display:"flex",borderBottom:"1px solid",borderColor:"border.default"},children:[e.jsx(i.Box,{sx:{display:"flex",flexDirection:"column",flexGrow:1,textAlign:"center",alignItems:"center",justifyContent:"center"},children:r||e.jsx(i.Heading,{as:"h2",sx:{fontSize:4},children:n.notifications})}),e.jsx(i.IconButton,{variant:"invisible",icon:u.XIcon,onClick:s,"aria-label":n.close,sx:{color:"fg.subtle",m:2}})]})}exports.NotificationMenu=B;