https://simulahealth-2a3be.web.app/_next/static/chunks/pages/ui-element/basic/badges-5ed19d30012aa2ab.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2741],{37722:function(e,r,i){(window.__NEXT_P=window.__NEXT_P||[]).push(["/ui-element/basic/badges",function(){return i(98064)}])},28834:function(e,r,i){"use strict";var t=i(85893),n=i(2734),a=i(21023),s=i(49990),l=i(23795),c=i(2789);let o=e=>{let{title:r,link:i,icon:o}=e,d=(0,n.Z)();return(0,t.jsx)(a.Z,{title:r||"Reference",placement:"left",children:(0,t.jsxs)(s.Z,{disableRipple:!0,children:[!o&&(0,t.jsx)(c.Z,{component:l.Z,href:i,target:"_blank",alt:"MUI Logo",size:"badge",color:"primary","aria-label":"ui material icon",outline:!0,children:(0,t.jsxs)("svg",{width:"500",height:"500",viewBox:"0 0 500 500",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[(0,t.jsxs)("g",{clipPath:"url(#clip0)",children:[(0,t.jsx)("path",{d:"M100 260.9V131L212.5 195.95V239.25L137.5 195.95V282.55L100 260.9Z",fill:d.palette.primary[800]}),(0,t.jsx)("path",{d:"M212.5 195.95L325 131V260.9L250 304.2L212.5 282.55L287.5 239.25V195.95L212.5 239.25V195.95Z",fill:d.palette.primary.main}),(0,t.jsx)("path",{d:"M212.5 282.55V325.85L287.5 369.15V325.85L212.5 282.55Z",fill:d.palette.primary[800]}),(0,t.jsx)("path",{d:"M287.5 369.15L400 304.2V217.6L362.5 239.25V282.55L287.5 325.85V369.15ZM362.5 195.95V152.65L400 131V174.3L362.5 195.95Z",fill:d.palette.primary.main})]}),(0,t.jsx)("defs",{children:(0,t.jsx)("clipPath",{id:"clip0",children:(0,t.jsx)("rect",{width:"300",height:"238.3",fill:"white",transform:"translate(100 131)"})})})]})}),o&&(0,t.jsx)(c.Z,{component:l.Z,href:i,target:"_blank",size:"badge",color:"primary",outline:!0,children:o})]})})};r.Z=o},91262:function(e,r,i){"use strict";var t=i(85893),n=i(67294),a=i(2734),s=i(66242),l=i(78445),c=i(15861),o=i(67720),d=i(44267);let x=n.forwardRef((e,r)=>{let{children:i,className:n,content:x,contentClass:h,darkTitle:j,secondary:Z,sx:p={},contentSX:g={},title:m,...b}=e,u=(0,a.Z)();return(0,t.jsxs)(s.Z,{ref:r,sx:{border:"1px solid",borderColor:"dark"===u.palette.mode?u.palette.dark.light+15:u.palette.grey[200],":hover":{boxShadow:"dark"===u.palette.mode?"0 2px 14px 0 rgb(33 150 243 / 10%)":"0 2px 14px 0 rgb(32 40 45 / 8%)"},...p},...b,children:[!j&&m&&(0,t.jsx)(l.Z,{sx:{p:2.5},title:(0,t.jsx)(c.Z,{variant:"h5",children:m}),action:Z}),j&&m&&(0,t.jsx)(l.Z,{sx:{p:2.5},title:(0,t.jsx)(c.Z,{variant:"h4",children:m}),action:Z}),m&&(0,t.jsx)(o.Z,{sx:{opacity:1,borderColor:"dark"===u.palette.mode?u.palette.dark.light+15:u.palette.grey[200]}}),x&&(0,t.jsx)(d.Z,{sx:{p:2.5,...g},className:h||"",children:i}),!x&&i]})});x.defaultProps={content:!0},r.Z=x},2789:function(e,r,i){"use strict";var t=i(85893),n=i(2734),a=i(87952);let s=e=>{let{className:r,color:i,outline:s,size:l,sx:c,...o}=e,d=(0,n.Z)(),x=i&&!s&&{color:d.palette.background.paper,bgcolor:"".concat(i,".main")},h=s&&{color:i?"".concat(i,".main"):"primary.main",bgcolor:d.palette.background.paper,border:"2px solid",borderColor:i?"".concat(i,".main"):"primary.main"},j={};switch(l){case"badge":j={width:d.spacing(3.5),height:d.spacing(3.5)};break;case"xs":j={width:d.spacing(4.25),height:d.spacing(4.25)};break;case"sm":j={width:d.spacing(5),height:d.spacing(5)};break;case"lg":j={width:d.spacing(9),height:d.spacing(9)};break;case"xl":j={width:d.spacing(10.25),height:d.spacing(10.25)};break;case"md":j={width:d.spacing(7.5),height:d.spacing(7.5)};break;default:j={}}return(0,t.jsx)(a.Z,{sx:{...x,...h,...j,...c},...o})};r.Z=s},98064:function(e,r,i){"use strict";i.r(r);var t=i(85893),n=i(67294),a=i(90948),s=i(49425),l=i(87357),c=i(86886),o=i(15861),d=i(93946),x=i(56863),h=i(11057),j=i(50480),Z=i(72852),p=i(95312),g=i(58823),m=i(91262),b=i(50011),u=i(28834),P=i(196),y=i(8443),f=i(1875),C=i(96540),k=i(94895);let v=(0,a.ZP)(s.Z)(e=>{let{theme:r}=e;return{"& .MuiBadge-badge":{right:-3,top:13,border:"2px solid ".concat(r.palette.background.paper),padding:"0 4px"}}}),w=(0,a.ZP)(s.Z)(e=>{let{theme:r}=e;return{"& .MuiBadge-badge":{background:r.palette.background.paper,color:r.palette.primary.main,border:"1px solid ".concat(r.palette.primary.main),padding:"0 4px"}}}),L=(0,a.ZP)(s.Z)(e=>{let{theme:r}=e;return{"& .MuiBadge-badge":{background:r.palette.primary.light,color:r.palette.primary.main,padding:"0 4px"}}}),V={bgcolor:"primary.light",width:40,height:40},B={borderRadius:"50%"},_=()=>{let e=(0,t.jsx)(l.Z,{sx:V}),r=(0,t.jsx)(l.Z,{sx:{...V,...B}}),[i,a]=n.useState(1),[p,_]=n.useState(!1),M=()=>{_(!p)};return(0,t.jsx)(g.Z,{title:"Badges",children:(0,t.jsx)(b.Z,{title:"Badges",secondary:(0,t.jsx)(u.Z,{link:"https://next.material-ui.com/components/badges/"}),children:(0,t.jsxs)(c.ZP,{container:!0,spacing:P.dv,children:[(0,t.jsx)(c.ZP,{item:!0,xs:12,sm:6,md:4,children:(0,t.jsx)(m.Z,{title:"Basic",children:(0,t.jsxs)(c.ZP,{container:!0,spacing:2,justifyContent:"center",children:[(0,t.jsx)(c.ZP,{item:!0,children:(0,t.jsx)(s.Z,{badgeContent:4,color:"default",children:(0,t.jsx)(y.Z,{})})}),(0,t.jsx)(c.ZP,{item:!0,children:(0,t.jsx)(s.Z,{badgeContent:4,color:"primary",children:(0,t.jsx)(y.Z,{})})}),(0,t.jsx)(c.ZP,{item:!0,children:(0,t.jsx)(s.Z,{badgeContent:4,color:"secondary",children:(0,t.jsx)(y.Z,{})})}),(0,t.jsx)(c.ZP,{item:!0,children:(0,t.jsx)(s.Z,{badgeContent:4,color:"error",children:(0,t.jsx)(y.Z,{})})})]})})}),(0,t.jsx)(c.ZP,{item:!0,xs:12,sm:6,md:4,children:(0,t.jsx)(m.Z,{title:"Maximum Value Badges",children:(0,t.jsxs)(c.ZP,{container:!0,spacing:4,justifyContent:"center",children:[(0,t.jsx)(c.ZP,{item:!0,children:(0,t.jsx)(s.Z,{badgeContent:99,color:"primary",children:(0,t.jsx)(y.Z,{})})}),(0,t.jsx)(c.ZP,{item:!0,children:(0,t.jsx)(s.Z,{badgeContent:100,color:"secondary",children:(0,t.jsx)(y.Z,{})})}),(0,t.jsx)(c.ZP,{item:!0,children:(0,t.jsx)(s.Z,{badgeContent:1e3,max:999,color:"error",children:(0,t.jsx)(y.Z,{})})})]})})}),(0,t.jsx)(c.ZP,{item:!0,xs:12,sm:6,md:4,children:(0,t.jsx)(m.Z,{title:"Dot Badges",children:(0,t.jsxs)(c.ZP,{container:!0,spacing:2,justifyContent:"center",children:[(0,t.jsx)(c.ZP,{item:!0,children:(0,t.jsx)(s.Z,{variant:"dot",color:"primary",children:(0,t.jsx)(y.Z,{})})}),(0,t.jsx)(c.ZP,{item:!0,children:(0,t.jsx)(s.Z,{variant:"dot",color:"secondary",children:(0,t.jsx)(y.Z,{})})}),(0,t.jsx)(c.ZP,{item:!0,children:(0,t.jsx)(s.Z,{variant:"dot",color:"error",children:(0,t.jsx)(o.Z,{children:"Typography"})})})]})})}),(0,t.jsx)(c.ZP,{item:!0,xs:12,sm:6,md:4,children:(0,t.jsx)(m.Z,{title:"Badge Alignment",children:(0,t.jsxs)(c.ZP,{container:!0,spacing:2,justifyContent:"center",children:[(0,t.jsx)(c.ZP,{item:!0,children:(0,t.jsx)(s.Z,{badgeContent:4,color:"primary",anchorOrigin:{vertical:"top",horizontal:"right"},children:(0,t.jsx)(y.Z,{})})}),(0,t.jsx)(c.ZP,{item:!0,children:(0,t.jsx)(s.Z,{variant:"dot",color:"error",anchorOrigin:{vertical:"bottom",horizontal:"right"},children:(0,t.jsx)(y.Z,{})})}),(0,t.jsx)(c.ZP,{item:!0,children:(0,t.jsx)(s.Z,{badgeContent:4,color:"primary",anchorOrigin:{vertical:"top",horizontal:"left"},children:(0,t.jsx)(y.Z,{})})}),(0,t.jsx)(c.ZP,{item:!0,children:(0,t.jsx)(s.Z,{variant:"dot",color:"error",anchorOrigin:{vertical:"bottom",horizontal:"left"},children:(0,t.jsx)(y.Z,{})})})]})})}),(0,t.jsx)(c.ZP,{item:!0,xs:12,sm:6,md:4,children:(0,t.jsx)(m.Z,{title:"Customized Badges",children:(0,t.jsxs)(c.ZP,{container:!0,spacing:3,justifyContent:"center",alignItems:"center",children:[(0,t.jsx)(c.ZP,{item:!0,children:(0,t.jsx)(d.Z,{"aria-label":"cart",size:"large",children:(0,t.jsx)(v,{badgeContent:4,color:"error",children:(0,t.jsx)(f.Z,{})})})}),(0,t.jsx)(c.ZP,{item:!0,children:(0,t.jsx)(L,{badgeContent:4,children:(0,t.jsx)(y.Z,{})})}),(0,t.jsx)(c.ZP,{item:!0,children:(0,t.jsx)(w,{badgeContent:4,children:(0,t.jsx)(y.Z,{})})})]})})}),(0,t.jsx)(c.ZP,{item:!0,xs:12,sm:6,md:4,children:(0,t.jsx)(m.Z,{title:"Badge Visibility",children:(0,t.jsxs)(c.ZP,{container:!0,spacing:2,direction:"column",children:[(0,t.jsx)(c.ZP,{item:!0,children:(0,t.jsxs)(c.ZP,{container:!0,spacing:3,justifyContent:"center",children:[(0,t.jsx)(c.ZP,{item:!0,children:(0,t.jsx)(s.Z,{color:"secondary",badgeContent:i,

1children:(0,t.jsx)(y.Z,{})})}),(0,t.jsx)(c.ZP,{item:!0,children:(0,t.jsxs)(x.Z,{children:[(0,t.jsx)(h.Z,{"aria-label":"reduce",onClick:()=>{a(Math.max(i-1,0))},children:(0,t.jsx)(k.Z,{fontSize:"small"})}),(0,t.jsx)(h.Z,{"aria-label":"increase",onClick:()=>{a(i+1)},children:(0,t.jsx)(C.Z,{fontSize:"small"})})]})})]})}),(0,t.jsx)(c.ZP,{item:!0,children:(0,t.jsxs)(c.ZP,{container:!0,spacing:3,justifyContent:"center",children:[(0,t.jsx)(c.ZP,{item:!0,children:(0,t.jsx)(s.Z,{color:"secondary",variant:"dot",invisible:p,children:(0,t.jsx)(y.Z,{})})}),(0,t.jsx)(c.ZP,{item:!0,children:(0,t.jsx)(j.Z,{control:(0,t.jsx)(Z.Z,{color:"primary",checked:!p,onChange:M}),label:"Show Badge"})})]})})]})})}),(0,t.jsx)(c.ZP,{item:!0,xs:12,sm:6,md:4,children:(0,t.jsx)(m.Z,{title:"Badge Overlap",children:(0,t.jsxs)(c.ZP,{container:!0,spacing:4,justifyContent:"center",children:[(0,t.jsx)(c.ZP,{item:!0,children:(0,t.jsx)(s.Z,{color:"secondary",badgeContent:" ",children:e})}),(0,t.jsx)(c.ZP,{item:!0,children:(0,t.jsx)(s.Z,{color:"secondary",badgeContent:" ",variant:"dot",children:e})}),(0,t.jsx)(c.ZP,{item:!0,children:(0,t.jsx)(s.Z,{color:"secondary",overlap:"circular",badgeContent:" ",children:r})}),(0,t.jsx)(c.ZP,{item:!0,children:(0,t.jsx)(s.Z,{color:"secondary",overlap:"circular",badgeContent:" ",variant:"dot",children:r})})]})})})]})})})};_.getLayout=function(e){return(0,t.jsx)(p.Z,{children:e})},r.default=_}},function(e){e.O(0,[9584,7819,7520,8220,350,5064,8246,5312,9774,2888,179],function(){return e(e.s=37722)}),_N_E=e.O()}]);