@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 954 B
JavaScript
;var e=require("react/jsx-runtime"),t=require("@mui/material"),i=require("../../BrandCore/Icon/Icon.js"),n=require("../ButtonBase/Button.variant-helpers.js");require("../ButtonBase/ButtonBase.js");var r=require("../IconButton/IconButton.js");require("../../BrandCore/primitiveVariables.js");const s=t.styled(r)(({theme:e})=>({alignItems:"center",display:"flex",height:40,justifyContent:"center",position:"relative",width:40,...n.buttonInteraction(e)})),o=t.styled(t.Box)(({theme:e})=>({background:e.custom.palette.red[500],borderRadius:e.custom.radius.round,height:e.spacing(1),position:"absolute",right:e.spacing(.5),top:e.spacing(.5),width:e.spacing(1)}));module.exports=({notification:n,onClick:r})=>e.jsxs(t.Box,{sx:{position:"relative"},children:[e.jsx(s,{icon:e.jsx(i.default,{name:"notification"}),variation:"raised",onClick:r}),n&&e.jsx(t.Fade,{in:!0,style:{transitionDelay:"200ms"},children:e.jsx(t.Box,{children:e.jsx(o,{})})})]});