@nexusui/components
Version:
These are custom components specially-developed for NexusUI applications. They will make your life easier by giving you out-of-the-box implementations for various high-level UI elements that you can drop directly into your application.
2 lines (1 loc) • 1.68 kB
JavaScript
import{jsx as i,jsxs as o}from"react/jsx-runtime";import{useMemo as t}from"react";import r from"@mui/material/Box";import a from"@mui/material/Typography";import e from"@mui/material/Stack";import l from"@mui/icons-material/Close";import d from"@mui/icons-material/MarkEmailReadOutlined";import m from"@mui/material/Tooltip";import s from"@mui/material/IconButton";import{useTheme as n}from"@mui/material/styles";import{NotificationFilter as c}from"../NotificationFilter/NotificationFilter.js";const p={light:"action.disabled",dark:"action.disabled"},h="NexusNotificationsHeader",f=f=>{const{disabled:u,disableMarkAllAsRead:g,onMarkAllAsRead:k,onClose:b,t:y,isMobile:x,...M}=f,A=n(),C=t((()=>u?p:{light:"grey.600",dark:"grey.400"}),[u]),w=t((()=>g?p:C),[g,C]);return i(e,{direction:"column",spacing:2,className:`${h}-root`,"data-testid":`${h}-root`,sx:{px:6,py:4,borderBottom:"1px solid",borderBottomColor:"divider"},children:o(r,{display:"flex",flexDirection:"row",justifyContent:"space-between",alignItems:"center",children:[i(a,{variant:"subtitle2",children:y("notifications")}),o(e,{direction:"row",spacing:4,children:[i(m,{title:y("markAsRead"),children:i("span",{children:i(s,{"aria-label":y("markAsRead"),"data-testid":`${h}-mark-as-read`,disabled:u||g,sx:{width:32,height:32,"& .MuiSvgIcon-root":{color:w.light,...A.applyStyles("dark",{color:w.dark})}},onClick:k,children:i(d,{})})})}),i(c,{disabled:u,t:y,isMobile:x,...M}),x&&i(s,{"aria-label":y("close"),"data-testid":`${h}-close-toggle`,sx:{width:32,height:32,"& .MuiSvgIcon-root":{color:C.light,...A.applyStyles("dark",{color:C.dark})}},onClick:b,children:i(l,{})})]})]})})};export{f as NotificationsHeader,h as prefix};