1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[47],{80229:function(e,s,a){(window.__NEXT_P=window.__NEXT_P||[]).push(["/components/bootstrap/badgespills",function(){return a(2445)}])},2445:function(e,s,a){"use strict";a.r(s);var n=a(85893),i=a(33272),d=a(67294),l=a(34051),t=a(31555),r=a(52686),c=a(34289),o=a(27977),g=a(9966),m=a(35005),h=a(72867);let x=()=>{let[e,s]=(0,d.useState)(!1),[a,x]=(0,d.useState)(!1),[u,j]=(0,d.useState)(!1),[b,p]=(0,d.useState)(!1),[N,B]=(0,d.useState)(!1),[Z,f]=(0,d.useState)(!1),[v,w]=(0,d.useState)(!1),[y,H]=(0,d.useState)(!1);return(0,n.jsxs)("div",{children:[(0,n.jsx)(i.Z,{title:"Badges"}),(0,n.jsx)(h.Z,{titles:"Badges",active:"Badges",items:["Componets"]}),(0,n.jsxs)(l.Z,{children:[(0,n.jsx)(t.Z,{md:12,lg:6,children:(0,n.jsxs)(r.Z,{children:[(0,n.jsxs)(r.Z.Header,{children:[(0,n.jsx)(r.Z.Title,{children:"Badges"}),(0,n.jsx)(c.Z,{className:"ms-auto",children:(0,n.jsx)(c.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>s(!e),className:"showcode d-flex ms-auto mx-2"})})]}),(0,n.jsxs)(r.Z.Body,{children:[(0,n.jsx)("p",{children:"Add any of the below mentioned modifier classes to change the appearance of a badge."}),(0,n.jsxs)("div",{className:"example",children:[(0,n.jsx)(o.Z,{bg:"default",children:"Default"})," "," ",(0,n.jsx)(o.Z,{bg:"primary",children:"Primary"})," ",(0,n.jsx)(o.Z,{bg:"success",children:"Success"})," ",(0,n.jsx)(o.Z,{bg:"danger",children:"Danger"})," ",(0,n.jsx)(o.Z,{bg:"info",children:"Info"})," ",(0,n.jsx)(o.Z,{bg:"warning",children:"Warning"})," "]}),(0,n.jsx)(g.Z,{in:e,className:"mt-2",children:(0,n.jsx)("pre",{children:(0,n.jsx)("code",{children:'\n <div className="example">\n <Badge bg="default">Default</Badge> {\' \'}\n <Badge bg="primary">Primary</Badge>{\' \'}\n <Badge bg="success">Success</Badge>{\' \'}\n <Badge bg="danger">Danger</Badge>{\' \'}\n <Badge bg="info">Info</Badge>{\' \'}\n <Badge bg="warning">Warning</Badge>{\' \'}\n\n </div>\n'})})})]})]})}),(0,n.jsx)(t.Z,{md:12,lg:6,children:(0,n.jsxs)(r.Z,{children:[(0,n.jsxs)(r.Z.Header,{children:[(0,n.jsx)(r.Z.Title,{children:"Pill Badges"}),(0,n.jsx)(c.Z,{className:"ms-auto",children:(0,n.jsx)(c.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>x(!a),className:"showcode d-flex ms-auto mx-2"})})]}),(0,n.jsxs)(r.Z.Body,{children:[(0,n.jsxs)("p",{className:"text-muted card-sub-title",children:["Use the ",(0,n.jsx)("code",{className:"highlighter-rouge",children:".rounded-pill"})," modifier className to make badges more rounded."]}),(0,n.jsxs)("div",{className:"example",children:[(0,n.jsx)(o.Z,{pill:!0,bg:"default",children:"Default"})," "," ",(0,n.jsx)(o.Z,{pill:!0,bg:"primary",children:"Primary"})," ",(0,n.jsx)(o.Z,{pill:!0,bg:"success",children:"Success"})," ",(0,n.jsx)(o.Z,{pill:!0,bg:"danger",children:"Danger"})," ",(0,n.jsx)(o.Z,{pill:!0,bg:"info",children:"Info"})," ",(0,n.jsx)(o.Z,{pill:!0,bg:"warning",children:"Warning"})," "]}),(0,n.jsx)(g.Z,{in:a,className:"mt-2",children:(0,n.jsx)("pre",{children:(0,n.jsx)("code",{children:'\n <div className="example">\n <Badge pill bg="default">Default</Badge> {\' \'}\n <Badge pill bg="primary">Primary</Badge>{\' \'}\n <Badge pill bg="success">Success</Badge>{\' \'}\n <Badge pill bg="danger">Danger</Badge>{\' \'}\n <Badge pill bg="info">Info</Badge>{\' \'}\n <Badge pill bg="warning">Warning</Badge>{\' \'}\n </div>\n'})})})]})]})}),(0,n.jsx)(t.Z,{md:12,lg:6,children:(0,n.jsxs)(r.Z,{children:[(0,n.jsxs)(r.Z.Header,{children:[(0,n.jsx)(r.Z.Title,{children:"Gradient Badges"}),(0,n.jsx)(c.Z,{className:"ms-auto",children:(0,n.jsx)(c.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>j(!u),className:"showcode d-flex ms-auto mx-2"})})]}),(0,n.jsxs)(r.Z.Body,{children:[(0,n.jsx)("p",{children:"Add any of the below mentioned modifier classes to change the appearance of a badge."}),(0,n.jsxs)("div",{className:"example",children:[(0,n.jsx)(o.Z,{bg:"default",children:"Default"})," "," ",(0,n.jsx)(o.Z,{bg:"primary-gradient",children:"Primary"})," ",(0,n.jsx)(o.Z,{bg:"success-gradient",children:"Success"})," ",(0,n.jsx)(o.Z,{bg:"danger-gradient",children:"Danger"})," ",(0,n.jsx)(o.Z,{bg:"info-gradient",children:"Info"})," ",(0,n.jsx)(o.Z,{bg:"warning-gradient",children:"Warning"})," "]}),(0,n.jsx)(g.Z,{in:u,className:"mt-2",children:(0,n.jsx)("pre",{children:(0,n.jsx)("code",{children:'\n <div className="example">\n <Badge bg="default">Default</Badge> {\' \'}\n <Badge bg="primary-gradient">Primary</Badge>{\' \'}\n <Badge bg="success-gradient">Success</Badge>{\' \'}\n <Badge bg="danger-gradient">Danger</Badge>{\' \'}\n <Badge bg="info-gradient">Info</Badge>{\' \'}\n <Badge bg="warning-gradient">Warning</Badge>{\' \'}\n\n </div>\n'})})})]})]})}),(0,n.jsx)(t.Z,{md:12,lg:6,children:(0,n.jsxs)(r.Z,{children:[(0,n.jsxs)(r.Z.Header,{children:[(0,n.jsx)(r.Z.Title,{children:"Gradient Pill Badges"}),(0,n.jsx)(c.Z,{className:"ms-auto",children:(0,n.jsx)(c.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>p(!b),className:"showcode d-flex ms-auto mx-2"})})]}),(0,n.jsxs)(r.Z.Body,{children:[(0,n.jsxs)("p",{className:"text-muted card-sub-title",children:["Use the ",(0,n.jsx)("code",{className:"highlighter-rouge",children:".rounded-pill"})," modifier className to make badges more rounded."]}),(0,n.jsxs)("div",{className:"example",children:[(0,n.jsx)(o.Z,{pill:!0,bg:"default",children:"Default"})," "," ",(0,n.jsx)(o.Z,{pill:!0,bg:"primary-gradient",children:"Primary"})," ",(0,n.jsx)(o.Z,{pill:!0,bg:"success-gradient",children:"Success"})," ",(0,n.jsx)(o.Z,{pill:!0,bg:"danger-gradient",children:"Danger"})," ",(0,n.jsx)(o.Z,{pill:!0,bg:"info-gradient",children:"Info"})," ",(0,n.jsx)(o.Z,{pill:!0,bg:"warning-gradient",children:"Warning"})," "]}),(0,n.jsx)(g.Z,{in:b,className:"mt-2",children:(0,n.jsx)("pre",{children:(0,n.jsx)("code",{children:'\n <div className="example">\n <Badge pill bg="default">Default</Badge> {\' \'}\n <Badge pill bg="primary-gradient">Primary</Badge>{\' \'}\n <Badge pill bg="success-gradient">Success</Badge>{\' \'}\n <Badge pill bg="danger-gradient">Danger</Badge>{\' \'}\n <Badge pill bg="info-gradient">Info</Badge>{\' \'}\n <Badge pill bg="warning-gradient">Warning</Badge>{\' \'}\n </div>\n\n'})})})]})]})})]}),(0,n.jsxs)(l.Z,{children:[(0,n.jsx)(t.Z,{xl:12,children:(0,n.jsxs)(r.Z,{children:[(0,n.jsxs)(r.Z.Header,{children:[(0,n.jsx)(r.Z.Title,{children:"Buttons with Badges"}),(0,n.jsx)(c.Z,{className:"ms-auto",children:(0,n.jsx)(c.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>B(!N),className:"showcode d-flex ms-auto mx-2"})})]}),(0,n.jsxs)(r.Z.Body,{children:[(0,n.jsx)("p",{children:"Badges can be used as part of links or buttons to provide a counter."}),(0,n.jsxs)("div",{className:"example2",children:[(0,n.jsxs)(m.Z,{className:"mt-1 mb-1 me-3",variant:"primary",children:["Notifications",(0,n.jsx)(o.Z,{bg:"white",className:"text-primary ms-2",children:"2"})]}),(0,n.jsxs)(m.Z,{className:"mt-1 mb-1 me-3",variant:"secondary",children:["Notifications",(0,n.jsx)(o.Z,{bg:"white",className:"text-secondary ms-2",children:"2"})]}),(0,n.jsxs)(m.Z,{className:"mt-1 mb-1 me-3",variant:"success",children:["Notifications",(0,n.jsx)(o.Z,{bg:"white",className:"text-success ms-2",children:"2"})]}),(0,n.jsxs)(m.Z,{className:"mt-1 mb-1 me-3",variant:"info",children:["Notifications",(0,n.jsx)(o.Z,{bg:"white",className:"text-info ms-2",children:"2"})]}),(0,n.jsxs)(m.Z,{className:"mt-1 mb-1 me-3",variant:"warning",children:["Notifications",(0,n.jsx)(o.Z,{bg:"white",className:"text-warning ms-2",children:"2"})]}),(0,n.jsxs)(m.Z,{className:"mt-1 mb-1 me-3",variant:"danger",children:["Notifications",(0,n.jsx)(o.Z,{bg:"white",className:"text-danger ms-2",children:"2"})]})]}),(0,n.jsx)(g.Z,{in:N,className:"mt-2",children:(0,n.jsx)("pre",{children:(0,n.jsx)("code",{children:'\n <div className="example2">\n\n <Button className="mt-1 mb-1 me-3" variant="primary">Notifications<Badge bg="white" className="text-primary ms-2">2</Badge></Button>\n\n <Button className="mt-1 mb-1 me-3" variant="secondary">Notifications<Badge bg="white" className="text-secondary ms-2">2</Badge></Button>\n\n <Button className="mt-1 mb-1 me-3" variant="success">Notifications<Badge bg="white" className="text-success ms-2">2</Badge></Button>\n\n <Button className="mt-1 mb-1 me-3" variant="info">Notifications<Badge bg="white" className="text-info ms-2">2</Badge></Button>\n\n <Button className="mt-1 mb-1 me-3" variant="warning">Notifications<Badge bg="white" className="text-warning ms-2">2</Badge></Button>\n\n <Button className="mt-1 mb-1 me-3" variant="danger">Notifications<Badge bg="white" className="text-danger ms-2">2</Badge></Button>\n</div>\n'})})})]})]})}),(0,n.jsx)(t.Z,{xl:12,children:(0,n.jsxs)(r.Z,{children:[(0,n.jsxs)(r.Z.Header,{children:[(0,n.jsx)(r.Z.Title,{children:"Buttons with Rounded Badges"}),(0,n.jsx)(c.Z,{className:"ms-auto",children:(0,n.jsx)(c.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>f(!Z),className:"showcode d-flex ms-auto mx-2"})})]}),(0,n.jsxs)(r.Z.Body,{children:[(0,n.jsx)("p",{children:"Badges can be used as part of links or buttons to provide a counter."}),(0,n.jsxs)("div",{className:"example",children:[(0,n.jsxs)(m.Z,{variant:"primary",className:"position-relative me-5 mb-3",children:[" Projects",(0,n.jsx)(o.Z,{bg:"danger",className:"position-absolute top-0 start-100 translate-middle badge rounded-pill",children:"20+"}),(0,n.jsx)("span",{className:"visually-hidden",children:"unread messages"})]}),(0,n.jsxs)(m.Z,{variant:"secondary",className:"position-relative me-5 mb-3",children:[" Projects",(0,n.jsx)(o.Z,{bg:"danger",className:"position-absolute top-0 start-100 translate-middle badge rounded-pill",children:"20+"}),(0,n.jsx)("span",{className:"visually-hidden",children:"unread messages"})]}),(0,n.jsxs)(m.Z,{variant:"success",className:"position-relative me-5 mb-3",children:[" Projects",(0,n.jsx)(o.Z,{bg:"danger",className:"position-absolute top-0 start-100 translate-middle badge rounded-pill",children:"20+"}),(0,n.jsx)("span",{className:"visually-hidden",children:"unread messages"})]}),(0,n.jsxs)(m.Z,{variant:"info",className:"position-relative me-5 mb-3",children:[" Projects",(0,n.jsx)(o.Z,{bg:"danger",className:"position-absolute top-0 start-100 translate-middle badge rounded-pill",children:"20+"}),(0,n.jsx)("span",{className:"visually-hidden",children:"unread messages"})]}),(0,n.jsxs)(m.Z,{variant:"warning",className:"position-relative me-5 mb-3",children:[" Projects",(0,n.jsx)(o.Z,{bg:"danger",className:"position-absolute top-0 start-100 translate-middle badge rounded-pill",children:"20+"}),(0,n.jsx)("span",{className:"visually-hidden",children:"unread messages"})]}),(0,n.jsxs)(m.Z,{variant:"green",className:"position-relative me-5 mb-3",children:[" Projects",(0,n.jsx)(o.Z,{bg:"danger",className:"position-absolute top-0 start-100 translate-middle badge rounded-pill",children:"20+"}),(0,n.jsx)("span",{className:"visually-hidden",children:"unread messages"})]})]}),(0,n.jsx)(g.Z,{in:Z,className:"mt-2",children:(0,n.jsx)("pre",{children:(0,n.jsx)("code",{children:'\n<div className="example">\n\n<Button variant="primary" className="position-relative me-5 mb-2"> Projects\n <Badge bg="danger" className="position-absolute top-0 start-100 translate-middle badge rounded-pill">
120+</Badge>\n <span className="visually-hidden">unread messages</span></Button>\n\n\n<Button variant="secondary" className="position-relative me-5 mb-2"> Projects\n <Badge bg="danger" className="position-absolute top-0 start-100 translate-middle badge rounded-pill">20+</Badge>\n <span className="visually-hidden">unread messages</span></Button>\n\n<Button variant="success" className="position-relative me-5 mb-2"> Projects\n <Badge bg="danger" className="position-absolute top-0 start-100 translate-middle badge rounded-pill">20+</Badge>\n <span className="visually-hidden">unread messages</span></Button>\n\n<Button variant="info" className="position-relative me-5 mb-2"> Projects\n <Badge bg="danger" className="position-absolute top-0 start-100 translate-middle badge rounded-pill">20+</Badge>\n <span className="visually-hidden">unread messages</span></Button>\n\n<Button variant="warning" className="position-relative me-5 mb-2"> Projects\n <Badge bg="danger" className="position-absolute top-0 start-100 translate-middle badge rounded-pill">20+</Badge>\n <span className="visually-hidden">unread messages</span></Button>\n\n<Button variant="green" className="position-relative me-5 mb-2"> Projects\n <Badge bg="danger" className="position-absolute top-0 start-100 translate-middle badge rounded-pill">20+</Badge>\n <span className="visually-hidden">unread messages</span></Button>\n</div>\n'})})})]})]})})]}),(0,n.jsxs)(l.Z,{children:[(0,n.jsx)(t.Z,{md:12,xl:6,children:(0,n.jsxs)(r.Z,{children:[(0,n.jsxs)(r.Z.Header,{children:[(0,n.jsx)(r.Z.Title,{children:"Heading Badges"}),(0,n.jsx)(c.Z,{className:"ms-auto",children:(0,n.jsx)(c.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>w(!v),className:"showcode d-flex ms-auto mx-2"})})]}),(0,n.jsxs)(r.Z.Body,{children:[(0,n.jsxs)("p",{children:["Badges scale to match the size of the immediate parent element by using relative font sizing and ",(0,n.jsx)("code",{className:"highlighter-rouge",children:"em"})," units. As of v5, badges no longer have focus or hover styles for links."]}),(0,n.jsxs)("div",{className:"example",children:[(0,n.jsxs)("h1",{children:["Heading 01",(0,n.jsx)(o.Z,{bg:"default",children:"New"})]}),(0,n.jsxs)("h2",{children:["Heading 01",(0,n.jsx)(o.Z,{bg:"default",children:"New"})]}),(0,n.jsxs)("h3",{children:["Heading 01",(0,n.jsx)(o.Z,{bg:"default",children:"New"})]}),(0,n.jsxs)("h4",{children:["Heading 01",(0,n.jsx)(o.Z,{bg:"default",children:"New"})]}),(0,n.jsxs)("h5",{children:["Heading 01",(0,n.jsx)(o.Z,{bg:"default",children:"New"})]}),(0,n.jsxs)("h6",{children:["Heading 01",(0,n.jsx)(o.Z,{bg:"default",children:"New"})]})]}),(0,n.jsx)(g.Z,{in:v,className:"mt-2",children:(0,n.jsx)("pre",{children:(0,n.jsx)("code",{children:'\n <div className="example">\n <h1>Heading 01<Badge bg="default">New</Badge></h1>\n <h2>Heading 01<Badge bg="default">New</Badge></h2>\n <h3>Heading 01<Badge bg="default">New</Badge></h3>\n <h4>Heading 01<Badge bg="default">New</Badge></h4>\n <h5>Heading 01<Badge bg="default">New</Badge></h5>\n <h6>Heading 01<Badge bg="default">New</Badge></h6>\n</div>\n'})})})]})]})}),(0,n.jsx)(t.Z,{md:12,xl:6,children:(0,n.jsxs)(r.Z,{children:[(0,n.jsxs)(r.Z.Header,{children:[(0,n.jsx)(r.Z.Title,{children:"Color Heading Badges"}),(0,n.jsx)(c.Z,{className:"ms-auto",children:(0,n.jsx)(c.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>H(!y),className:"showcode d-flex ms-auto mx-2"})})]}),(0,n.jsxs)(r.Z.Body,{children:[(0,n.jsxs)("p",{children:["Badges scale to match the size of the immediate parent element by using relative font sizing and ",(0,n.jsx)("code",{className:"highlighter-rouge",children:"em"})," units. As of v5, badges no longer have focus or hover styles for links."]}),(0,n.jsxs)("div",{className:"example",children:[(0,n.jsxs)("h1",{className:"text-primary",children:["Heading 01",(0,n.jsx)(o.Z,{bg:"primary",children:"New"})]}),(0,n.jsxs)("h2",{className:"text-red",children:["Heading 01",(0,n.jsx)(o.Z,{bg:"danger",children:"New"})]}),(0,n.jsxs)("h3",{className:"text-yellow",children:["Heading 01",(0,n.jsx)(o.Z,{bg:"warning",children:"New"})]}),(0,n.jsxs)("h4",{className:"text-green",children:["Heading 01",(0,n.jsx)(o.Z,{bg:"success",children:"New"})]}),(0,n.jsxs)("h5",{className:"text-info",children:["Heading 01",(0,n.jsx)(o.Z,{bg:"info",children:"New"})]}),(0,n.jsxs)("h6",{className:"text-secondary",children:["Heading 01",(0,n.jsx)(o.Z,{bg:"secondary",children:"New"})]})]}),(0,n.jsx)(g.Z,{in:y,className:"mt-2",children:(0,n.jsx)("pre",{children:(0,n.jsx)("code",{children:'\n <div className="example">\n <h1 className="text-primary" >Heading 01<Badge bg="primary">New</Badge></h1>\n <h2 className="text-red" >Heading 01<Badge bg="danger">New</Badge></h2>\n <h3 className="text-yellow" >Heading 01<Badge bg="warning">New</Badge></h3>\n <h4 className="text-green" >Heading 01<Badge bg="success">New</Badge></h4>\n <h5 className="text-info" >Heading 01<Badge bg="info">New</Badge></h5>\n <h6 className="text-secondary" >Heading 01<Badge bg="secondary">New</Badge></h6>\n\n </div>\n\n'})})})]})]})})]})]})};x.layout="Contentlayout",s.default=x},72867:function(e,s,a){"use strict";var n=a(85893);a(67294);var i=a(26699);let d=e=>(0,n.jsx)("div",{children:(0,n.jsxs)("div",{className:"page-header",children:[(0,n.jsx)("h1",{className:"page-title",children:e.titles}),(0,n.jsx)("div",{children:(0,n.jsxs)(i.Z,{children:[e.items.map((e,s)=>(0,n.jsx)(i.Z.Item,{href:"#!",children:e},s)),(0,n.jsx)(i.Z.Item,{href:"#!",active:!0,children:e.active})]})})]})});s.Z=d},33272:function(e,s,a){"use strict";a.d(s,{Z:function(){return r}});var n=a(85893);a(67294);var i=a(9008),d=a.n(i),l={src:"/_next/static/media/favicon.00e6795d.ico",height:16,width:16,blurWidth:0,blurHeight:0};let t=e=>{let{title:s}=e;return(0,n.jsxs)(d(),{children:[(0,n.jsx)("title",{children:" Fandoro Technologies
1- Making Businesses Responsible"}),(0,n.jsx)("link",{rel:"icon",href:l.src}),(0,n.jsx)("meta",{name:"description",content:"Fandoro Technologies - making businesses responsible"}),(0,n.jsx)("meta",{name:"author",content:"Fandoro Technologies Private Limited"}),(0,n.jsx)("meta",{name:"keywords",content:"next js dashboard template, admin dashboard nextjs, next js admin template, next js admin panel, admin dashboard, nextjs react bootstrap, react bootstrap with next js, next js admin dashboard, nextjs admin dashboard template, admin panel template, admin template react bootstrap, nextjs dashboard,next js react bootstrap"})]})};var r=t},9008:function(e,s,a){e.exports=a(42636)},26699:function(e,s,a){"use strict";a.d(s,{Z:function(){return g}});var n=a(93967),i=a.n(n),d=a(67294),l=a(76792),t=a(13551),r=a(85893);let c=d.forwardRef(({bsPrefix:e,active:s=!1,children:a,className:n,as:d="li",linkAs:c=t.Z,linkProps:o={},href:g,title:m,target:h,...x},u)=>{let j=(0,l.vE)(e,"breadcrumb-item");return(0,r.jsx)(d,{ref:u,...x,className:i()(j,n,{active:s}),"aria-current":s?"page":void 0,children:s?a:(0,r.jsx)(c,{...o,href:g,title:m,target:h,children:a})})});c.displayName="BreadcrumbItem";let o=d.forwardRef(({bsPrefix:e,className:s,listProps:a={},children:n,label:d="breadcrumb",as:t="nav",...c},o)=>{let g=(0,l.vE)(e,"breadcrumb");return(0,r.jsx)(t,{"aria-label":d,className:s,ref:o,...c,children:(0,r.jsx)("ol",{...a,className:i()(g,null==a?void 0:a.className),children:n})})});o.displayName="Breadcrumb";var g=Object.assign(o,{Item:c})}},function(e){e.O(0,[9774,2888,179],function(){return e(e.s=80229)}),_N_E=e.O()}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.