1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[4586],{97560:function(e,n,o){(window.__NEXT_P=window.__NEXT_P||[]).push(["/components/bootstrap/dropdowns",function(){return o(31143)}])},31143:function(e,n,o){"use strict";o.r(n),o.d(n,{default:function(){return b}});var t=o(85893),r=o(67294),d=o(34051),i=o(31555),s=o(52686),a=o(34289),l=o(2086),m=o(70552),c=o(9966),p=o(45697),w=o.n(p),D=o(35005),h=o(41714);let v={id:w().string,toggleLabel:w().string,href:w().string,target:w().string,onClick:w().func,title:w().node.isRequired,type:w().string,disabled:w().bool,align:h.r,menuRole:w().string,renderMenuOnMount:w().bool,rootCloseEvent:w().string,flip:w().bool,bsPrefix:w().string,variant:w().string,size:w().string},x=r.forwardRef(({id:e,bsPrefix:n,size:o,variant:r,title:d,type:i="button",toggleLabel:s="Toggle dropdown",children:a,onClick:c,href:p,target:w,menuRole:h,renderMenuOnMount:v,rootCloseEvent:x,flip:j,...u},I)=>(0,t.jsxs)(m.Z,{ref:I,...u,as:l.Z,children:[(0,t.jsx)(D.Z,{size:o,variant:r,disabled:u.disabled,bsPrefix:n,href:p,target:w,onClick:c,type:i,children:d}),(0,t.jsx)(m.Z.Toggle,{split:!0,id:e,size:o,variant:r,disabled:u.disabled,childBsPrefix:n,children:(0,t.jsx)("span",{className:"visually-hidden",children:s})}),(0,t.jsx)(m.Z.Menu,{role:h,renderOnMount:v,rootCloseEvent:x,flip:j,children:a})]}));x.propTypes=v,x.displayName="SplitButton";var j=o(68125),u=o(41664),I=o.n(u),Z=o(72867),g=o(33272);let y=()=>{let[e,n]=(0,r.useState)(!1),[o,p]=(0,r.useState)(!1),[w,D]=(0,r.useState)(!1),[h,v]=(0,r.useState)(!1),[u,y]=(0,r.useState)(!1),[b,K]=(0,r.useState)(!1),[N,A]=(0,r.useState)(!1),[S,k]=(0,r.useState)(!1),[f,B]=(0,r.useState)(!1),[H,T]=(0,r.useState)(!1),[M,G]=(0,r.useState)(!1),[C,L]=(0,r.useState)(!1);return(0,t.jsxs)("div",{children:[(0,t.jsx)(g.Z,{title:"Dropdowns"}),(0,t.jsx)(Z.Z,{titles:"Dropdowns",active:"Dropdowns",items:["Componets"]}),(0,t.jsxs)(d.Z,{children:[(0,t.jsx)(i.Z,{md:12,xl:6,children:(0,t.jsxs)(s.Z,{children:[(0,t.jsxs)(s.Z.Header,{children:[(0,t.jsx)(s.Z.Title,{children:"Single button dropdowns"}),(0,t.jsx)(a.Z,{className:"ms-auto",children:(0,t.jsx)(a.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>n(!e),className:"showcode d-flex ms-auto mx-2"})})]}),(0,t.jsxs)(s.Z.Body,{children:[(0,t.jsxs)("div",{className:"text-wrap",children:[(0,t.jsxs)("p",{children:["Any single ",(0,t.jsx)("code",{className:"highlighter-rouge",children:".btn"})," can be turned into Link dropdown toggle with some markup changes.The best part is you can do this with any button variant, too"]}),(0,t.jsxs)("div",{className:"example",children:[(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(m.Z,{children:[(0,t.jsx)(m.Z.Toggle,{variant:"default",id:"dropdown-basic",children:"Action"}),(0,t.jsxs)(m.Z.Menu,{children:[(0,t.jsx)(m.Z.Header,{children:"Dropdown"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Something else"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})]})}),(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(m.Z,{children:[(0,t.jsx)(m.Z.Toggle,{variant:"primary",id:"dropdown-basic",children:"Action"}),(0,t.jsxs)(m.Z.Menu,{children:[(0,t.jsx)(m.Z.Header,{children:"Dropdown"}),(0,t.jsx)(m.Z.Divider,{className:"bg-primary"}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Something else"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})]})}),(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(m.Z,{children:[(0,t.jsx)(m.Z.Toggle,{variant:"success",id:"dropdown-basic",children:"Action"}),(0,t.jsxs)(m.Z.Menu,{children:[(0,t.jsx)(m.Z.Header,{children:"Dropdown"}),(0,t.jsx)(m.Z.Divider,{className:"bg-success"}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Something else"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})]})}),(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(m.Z,{children:[(0,t.jsx)(m.Z.Toggle,{variant:"info",id:"dropdown-basic",children:"Action"}),(0,t.jsxs)(m.Z.Menu,{children:[(0,t.jsx)(m.Z.Header,{children:"Dropdown"}),(0,t.jsx)(m.Z.Divider,{className:"bg-info"}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Something else"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})]})}),(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(m.Z,{children:[(0,t.jsx)(m.Z.Toggle,{variant:"warning",id:"dropdown-basic",children:"Action"}),(0,t.jsxs)(m.Z.Menu,{children:[(0,t.jsx)(m.Z.Header,{children:"Dropdown"}),(0,t.jsx)(m.Z.Divider,{className:"bg-warning"}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Something else"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})]})}),(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(m.Z,{children:[(0,t.jsx)(m.Z.Toggle,{variant:"danger",id:"dropdown-basic",children:"Action"}),(0,t.jsxs)(m.Z.Menu,{children:[(0,t.jsx)(m.Z.Header,{children:"Dropdown"}),(0,t.jsx)(m.Z.Divider,{className:"bg-danger"}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Something else"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})]})})]})]}),(0,t.jsx)(c.Z,{in:e,className:"mt-2 max-height-250",children:(0,t.jsx)("pre",{children:(0,t.jsx)("code",{children:'\n <div className="text-wrap">\n <p>Any single <code className="highlighter-rouge">.btn</code> can be turned into Link dropdown toggle with some markup changes.The best part is you can do this with any button variant, too</p>\n <div className="example">\n <ButtonGroup className="mt-2 mb-2 me-1">\n <Dropdown>\n <Dropdown.Toggle variant="default" id="dropdown-basic">\n Action\n </Dropdown.Toggle>\n <Dropdown.Menu>\n <Dropdown.Header>\n Dropdown\n </Dropdown.Header>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">Something else</Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n </ButtonGroup>\n <ButtonGroup className="mt-2 mb-2 me-1">\n <Dropdown>\n <Dropdown.Toggle variant="primary" id="dropdown-basic">\n Action\n </Dropdown.Toggle>\n <Dropdown.Menu>\n <Dropdown.Header>\n Dropdown\n </Dropdown.Header>\n <Dropdown.Divider className="bg-primary" />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">Something else</Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n </ButtonGroup>\n\n\n <ButtonGroup className="mt-2 mb-2 me-1">\n <Dropdown>\n <Dropdown.Toggle variant="success" id="dropdown-basic">\n Action\n </Dropdown.Toggle>\n <Dropdown.Menu>\n <Dropdown.Header>\n Dropdown\n </Dropdown.Header>\n <Dropdown.Divider className="bg-success" />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">Something else</Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n </ButtonGroup>\n\n <ButtonGroup className="mt-2 mb-2 me-1">\n <Dropdown>\n <Dropdown.Toggle variant="info" id="dropdown-basic">\n Action\n </Dropdown.Toggle>\n <Dropdown.Menu>\n <Dropdown.Header>\n Dropdown\n </Dropdown.Header>\n <Dropdown.Divider className="bg-info" />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">Something else</Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n </ButtonGroup>\n <ButtonGroup className="mt-2 mb-2 me-1">\n <Dropdown>\n <Dropdown.Toggle variant="warning" id="dropdown-basic">\n Action\n </Dropdown.Toggle>\n <Dropdown.Menu>\n <Dropdown.Header>\n Dropdown\n </Dropdown.Header>\n <Dropdown.Divider className="bg-warning" />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">Something else</Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n </ButtonGroup>\n <ButtonGroup className="mt-2 mb-2 me-1">\n <Dropdown>\n <Dropdown.Toggle variant="danger" id="dropdown-basic">\n Action\n </Dropdown.Toggle>\n <Dropdown.Menu>\n <Dropdown.Header>\n Dropdown\n </Dropdown.Header>\n <Dropdown.Divider className="bg-danger" />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">Something else</Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n </ButtonGroup>\n </div>\n</div>\n'})})})]})]})}),(0,t.jsx)(i.Z,{md:12,xl:6,children:(0,t.jsxs)(s.Z,{children:[(0,t.jsxs)(s.Z.Header,{children:[(0,t.jsx)(s.Z.Title,{children:"Single Square outline button dropdowns"}),(0,t.jsx)(a.Z,{className:"ms-auto",children:(0,t.jsx)(a.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>p(!o),className:"showcode d-flex ms-auto mx-2"})})]}),(0,t.jsxs)(s.Z.Body,{children:[(0,t.jsxs)("div",{className:"text-wrap",children:[(0,t.jsxs)("p",{children:["Any single ",(0,t.jsx)("code",{className:"highlighter-rouge",children:".btn"})," can be turned into Link dropdown toggle with some markup changes.The best part is you can do this with any button variant, too"]}),(0,t.jsxs)("div",{className:"example",children:[(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(m.Z,{children:[(0,t.jsx)(m.Z.Toggle,{variant:"outline-primary",id:"dropdown-basic",children:"Action"}),(0,t.jsxs)(m.Z.Menu,{children:[(0,t.jsx)(m.Z.Header,{children:"Dropdown"}),(0,t.jsx)(m.Z.Divider,{className:"bg-primary"}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Something else"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})]})}),(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(m.Z,{children:[(0,t.jsx)(m.Z.Toggle,{variant:"outline-success",id:"dropdown-basic",children:"Action"}),(0,t.jsxs)(m.Z.Menu,{children:[(0,t.jsx)(m.Z.Header,{children:"Dropdown"}),(0,t.jsx)(m.Z.Divider,{className:"bg-success"}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Something else"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})]})}),(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(m.Z,{children:[(0,t.jsx)(m.Z.Toggle,{variant:"outline-info",i
1d:"dropdown-basic",children:"Action"}),(0,t.jsxs)(m.Z.Menu,{children:[(0,t.jsx)(m.Z.Header,{children:"Dropdown"}),(0,t.jsx)(m.Z.Divider,{className:"bg-info"}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Something else"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})]})}),(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(m.Z,{children:[(0,t.jsx)(m.Z.Toggle,{variant:"outline-warning",id:"dropdown-basic",children:"Action"}),(0,t.jsxs)(m.Z.Menu,{children:[(0,t.jsx)(m.Z.Header,{children:"Dropdown"}),(0,t.jsx)(m.Z.Divider,{className:"bg-warning"}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Something else"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})]})}),(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(m.Z,{children:[(0,t.jsx)(m.Z.Toggle,{variant:"outline-danger",id:"dropdown-basic",children:"Action"}),(0,t.jsxs)(m.Z.Menu,{children:[(0,t.jsx)(m.Z.Header,{children:"Dropdown"}),(0,t.jsx)(m.Z.Divider,{className:"bg-danger"}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Something else"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})]})})]})]}),(0,t.jsx)(c.Z,{in:o,className:"mt-2 max-height-250",children:(0,t.jsx)("pre",{children:(0,t.jsx)("code",{children:'\n <div className="text-wrap">\n <p>Any single <code className="highlighter-rouge">.btn</code> can be turned into Link dropdown toggle with some markup changes.The best part is you can do this with any button variant, too</p>\n <div className="example">\n <ButtonGroup className="mt-2 mb-2 me-1">\n <Dropdown>\n <Dropdown.Toggle variant="outline-primary" id="dropdown-basic">\n Action\n </Dropdown.Toggle>\n <Dropdown.Menu>\n <Dropdown.Header>\n Dropdown\n </Dropdown.Header>\n <Dropdown.Divider className="bg-primary" />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">Something else</Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n </ButtonGroup>\n\n <ButtonGroup className="mt-2 mb-2 me-1">\n\n <Dropdown>\n <Dropdown.Toggle variant="outline-success" id="dropdown-basic">\n Action\n </Dropdown.Toggle>\n <Dropdown.Menu>\n <Dropdown.Header>\n Dropdown\n </Dropdown.Header>\n <Dropdown.Divider className="bg-success" />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">Something else</Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n </ButtonGroup>\n <ButtonGroup className="mt-2 mb-2 me-1">\n <Dropdown>\n <Dropdown.Toggle variant="outline-info" id="dropdown-basic">\n Action\n </Dropdown.Toggle>\n <Dropdown.Menu>\n <Dropdown.Header>\n Dropdown\n </Dropdown.Header>\n <Dropdown.Divider className="bg-info" />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">Something else</Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n </ButtonGroup>\n\n <ButtonGroup className="mt-2 mb-2 me-1">\n\n <Dropdown>\n <Dropdown.Toggle variant="outline-warning" id="dropdown-basic">\n Action\n </Dropdown.Toggle>\n <Dropdown.Menu>\n <Dropdown.Header>\n Dropdown\n </Dropdown.Header>\n <Dropdown.Divider className="bg-warning" />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">Something else</Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n </ButtonGroup>\n\n <ButtonGroup className="mt-2 mb-2 me-1">\n <Dropdown>\n <Dropdown.Toggle variant="outline-danger" id="dropdown-basic">\n Action\n </Dropdown.Toggle>\n <Dropdown.Menu>\n <Dropdown.Header>\n Dropdown\n </Dropdown.Header>\n <Dropdown.Divider className="bg-danger" />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">Something else</Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n </ButtonGroup>\n\n </div>\n </div>\n'})})})]})]})}),(0,t.jsx)(i.Z,{md:12,xl:6,children:(0,t.jsxs)(s.Z,{children:[(0,t.jsxs)(s.Z.Header,{children:[(0,t.jsx)(s.Z.Title,{children:"Single Light button dropdowns"}),(0,t.jsx)(a.Z,{className:"ms-auto",children:(0,t.jsx)(a.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>D(!w),className:"showcode d-flex ms-auto mx-2"})})]}),(0,t.jsxs)(s.Z.Body,{children:[(0,t.jsxs)("div",{className:"text-wrap",children:[(0,t.jsxs)("p",{children:["Any single ",(0,t.jsx)("code",{className:"highlighter-rouge",children:".btn"})," can be turned into Link dropdown toggle with some markup changes.The best part is you can do this with any button variant, too"]}),(0,t.jsxs)("div",{className:"example",children:[(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(m.Z,{children:[(0,t.jsx)(m.Z.Toggle,{variant:"default-light",id:"dropdown-basic",children:"Action"}),(0,t.jsxs)(m.Z.Menu,{children:[(0,t.jsx)(m.Z.Header,{children:"Dropdown"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Something else"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})]})}),(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(m.Z,{children:[(0,t.jsx)(m.Z.Toggle,{variant:"primary-light",id:"dropdown-basic",children:"Action"}),(0,t.jsxs)(m.Z.Menu,{children:[(0,t.jsx)(m.Z.Header,{children:"Dropdown"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Something else"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})]})}),(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(m.Z,{children:[(0,t.jsx)(m.Z.Toggle,{variant:"success-light",id:"dropdown-basic",children:"Action"}),(0,t.jsxs)(m.Z.Menu,{children:[(0,t.jsx)(m.Z.Header,{children:"Dropdown"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Something else"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})]})}),(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(m.Z,{children:[(0,t.jsx)(m.Z.Toggle,{variant:"info-light",id:"dropdown-basic",children:"Action"}),(0,t.jsxs)(m.Z.Menu,{children:[(0,t.jsx)(m.Z.Header,{children:"Dropdown"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Something else"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})]})}),(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(m.Z,{children:[(0,t.jsx)(m.Z.Toggle,{variant:"warning-light",id:"dropdown-basic",children:"Action"}),(0,t.jsxs)(m.Z.Menu,{children:[(0,t.jsx)(m.Z.Header,{children:"Dropdown"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Something else"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})]})}),(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(m.Z,{children:[(0,t.jsx)(m.Z.Toggle,{variant:"danger-light",id:"dropdown-basic",children:"Action"}),(0,t.jsxs)(m.Z.Menu,{children:[(0,t.jsx)(m.Z.Header,{children:"Dropdown"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Something else"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})]})})]})]}),(0,t.jsx)(c.Z,{in:w,className:"mt-2 max-height-250",children:(0,t.jsx)("pre",{children:(0,t.jsx)("code",{children:'\n <div className="text-wrap">\n <p>Any single <code className="highlighter-rouge">.btn</code> can be turned into Link dropdown toggle with some markup changes.The best part is you can do this with any button variant, too</p>\n <div className="example">\n <ButtonGroup className="mt-2 mb-2 me-1">\n\n <Dropdown>\n <Dropdown.Toggle variant="default-light" id="dropdown-basic">\n Action\n </Dropdown.Toggle>\n <Dropdown.Menu>\n <Dropdown.Header>\n Dropdown\n </Dropdown.Header>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">Something else</Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n </ButtonGroup>\n\n <ButtonGroup className="mt-2 mb-2 me-1">\n\n <Dropdown>\n <Dropdown.Toggle variant="primary-light" id="dropdown-basic">\n Action\n </Dropdown.Toggle>\n <Dropdown.Menu>\n <Dropdown.Header>\n Dropdown\n </Dropdown.Header>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">Something else</Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n </ButtonGroup>\n\n <ButtonGroup className="mt-2 mb-2 me-1">\n\n <Dropdown>\n <Dropdown.Toggle variant="success-light" id="dropdown-basic">\n Action\n </Dropdown.Toggle>\n <Dropdown.Menu>\n <Dropdown.Header>\n Dropdown\n </Dropdown.Header>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">Something else</Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n </ButtonGroup>\n\n <ButtonGroup className="mt-2 mb-2 me-1">\n\n <Dropdown>\n <Dropdown.Toggle variant="info-light" id="dropdown-basic">\n Action\n </Dropdown.Toggle>\n <Dropdown.Menu>\n <Dropdown.Header>\n Dropdown\n </Dropdown.Header>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">Something else</Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n </ButtonGroup>\n\n <ButtonGroup className="mt-2 mb-2 me-1">\n\n <Dropdown>\n <Dropdown.Toggle variant="warning-light" id="dropdown-basic">\n Action\n </Dropdown.Toggle>\n <Dropdown.Menu>\n <Dropdown.Header>\n Dropdown\n </Dropdown.Header>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">Something else</Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n </ButtonGroup>\n\n <ButtonGroup className="mt-2 mb-2 me-1">\n\n <Dropdown>\n <Dropdown.Toggle variant="danger-light" id="dropdown-basic">\n Action\n </Dropdown.Toggle>\n <Dropdown.Menu>\n <Dropdown.Header>\n Dropdown\n </Dropdown.Header>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">Something else</Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n </ButtonGroup>\n\n </div>\n </div>'})})})]})]})}),(0,t.jsx)(i.Z,{md:12,xl:6,children:(0,t.jsxs)(s.Z,{children:[(0,t.jsxs)(s.Z.Header,{children:[(0,t.jsx)(s.Z.Title,{children:"Rounded Light button dropdowns"}),(0,t.jsx)(a.Z,{className:"ms-auto",children:(0,t.jsx)(a.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>v(!h),className:"showcode d-flex ms-auto mx-2"})})]}),(0,t.jsxs)(s.Z.Body,{children:[(0,t.jsxs)("div",{className:"text-wrap",children:[(0,t.jsxs)("p",{children:["Any single ",(0,t.jsx)("code",{className:"highlighter-rouge",children:".btn"})," can be turned into Link dropdown toggle with some markup changes.The best part is you can do this with any button variant, too"]}),(0,t.jsxs)("div",{className:"example",children:[(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(m.Z,{children:[(0,t.jsx)(m.Z.Toggle,{className:"btn-pill",variant:"default-light",id:"dropdown-basic",children:"Action"}),(0,t.jsxs)(m.Z.Menu,{children:[(0,t.jsx)(m.Z.Header,{children:"Dropdown"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Something else"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})]})}),(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(m.Z,{children:[(0,t.jsx)(m.Z.Toggle,{className:"btn-pill",variant:"primary-light",id:"dropdown-basic",children:"Action"}),(0,t.jsxs)(m.Z.Menu,{children:[(0,t.jsx)(m.Z.Header,{children:"Dropdown"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Something else"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})]})}),(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(m.Z,{children:[(0,t.jsx)(m.Z.Toggle,{className:"btn-pill",variant:"success-light",id:"dropdown-basic",children:"Action"}),(0,t.jsxs)(m.Z.Menu,{children:[(0,t.jsx)(m.Z.Header,{children:"Dropdown"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKe
1y:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Something else"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})]})}),(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(m.Z,{children:[(0,t.jsx)(m.Z.Toggle,{className:"btn-pill",variant:"info-light",id:"dropdown-basic",children:"Action"}),(0,t.jsxs)(m.Z.Menu,{children:[(0,t.jsx)(m.Z.Header,{children:"Dropdown"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Something else"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})]})}),(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(m.Z,{children:[(0,t.jsx)(m.Z.Toggle,{className:"btn-pill",variant:"warning-light",id:"dropdown-basic",children:"Action"}),(0,t.jsxs)(m.Z.Menu,{children:[(0,t.jsx)(m.Z.Header,{children:"Dropdown"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Something else"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})]})}),(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(m.Z,{children:[(0,t.jsx)(m.Z.Toggle,{className:"btn-pill",variant:"danger-light",id:"dropdown-basic",children:"Action"}),(0,t.jsxs)(m.Z.Menu,{children:[(0,t.jsx)(m.Z.Header,{children:"Dropdown"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Something else"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})]})})]})]}),(0,t.jsx)(c.Z,{in:h,className:"mt-2 max-height-250",children:(0,t.jsx)("pre",{children:(0,t.jsx)("code",{children:'\n <div className="text-wrap">\n <p>Any single <code className="highlighter-rouge">.btn</code> can be turned into Link dropdown toggle with some markup changes.The best part is you can do this with any button variant, too</p>\n <div className="example">\n <ButtonGroup className="mt-2 mb-2 me-1">\n <Dropdown>\n <Dropdown.Toggle className=\'btn-pill\' variant="default-light" id="dropdown-basic">\n Action\n </Dropdown.Toggle>\n <Dropdown.Menu>\n <Dropdown.Header>\n Dropdown\n </Dropdown.Header>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">Something else</Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n </ButtonGroup>\n\n <ButtonGroup className="mt-2 mb-2 me-1">\n\n <Dropdown>\n <Dropdown.Toggle className=\'btn-pill\' variant="primary-light" id="dropdown-basic">\n Action\n </Dropdown.Toggle>\n <Dropdown.Menu>\n <Dropdown.Header>\n Dropdown\n </Dropdown.Header>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">Something else</Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n </ButtonGroup>\n\n <ButtonGroup className="mt-2 mb-2 me-1">\n\n <Dropdown>\n <Dropdown.Toggle className=\'btn-pill\' variant="success-light" id="dropdown-basic">\n Action\n </Dropdown.Toggle>\n <Dropdown.Menu>\n <Dropdown.Header>\n Dropdown\n </Dropdown.Header>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">Something else</Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n </ButtonGroup>\n\n <ButtonGroup className="mt-2 mb-2 me-1">\n\n <Dropdown>\n <Dropdown.Toggle className=\'btn-pill\' variant="info-light" id="dropdown-basic">\n Action\n </Dropdown.Toggle>\n <Dropdown.Menu>\n <Dropdown.Header>\n Dropdown\n </Dropdown.Header>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">Something else</Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n </ButtonGroup>\n\n <ButtonGroup className="mt-2 mb-2 me-1">\n\n <Dropdown>\n <Dropdown.Toggle className=\'btn-pill\' variant="warning-light" id="dropdown-basic">\n Action\n </Dropdown.Toggle>\n <Dropdown.Menu>\n <Dropdown.Header>\n Dropdown\n </Dropdown.Header>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">Something else</Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n </ButtonGroup>\n\n <ButtonGroup className="mt-2 mb-2 me-1">\n\n <Dropdown>\n <Dropdown.Toggle className=\'btn-pill\' variant="danger-light" id="dropdown-basic">\n Action\n </Dropdown.Toggle>\n <Dropdown.Menu>\n <Dropdown.Header>\n Dropdown\n </Dropdown.Header>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">Something else</Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n </ButtonGroup>\n\n </div>\n </div>\n'})})})]})]})}),(0,t.jsx)(i.Z,{md:12,xl:6,children:(0,t.jsxs)(s.Z,{children:[(0,t.jsxs)(s.Z.Header,{children:[(0,t.jsx)(s.Z.Title,{children:"Rounded button dropdowns"}),(0,t.jsx)(a.Z,{className:"ms-auto",children:(0,t.jsx)(a.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>y(!u),className:"showcode d-flex ms-auto mx-2"})})]}),(0,t.jsxs)(s.Z.Body,{children:[(0,t.jsxs)("div",{className:"text-wrap",children:[(0,t.jsxs)("p",{children:["Any single ",(0,t.jsx)("code",{className:"highlighter-rouge",children:".btn"})," can be turned into Link dropdown toggle with some markup changes.The best part is you can do this with any button variant, too"]}),(0,t.jsxs)("div",{className:"example",children:[(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(m.Z,{children:[(0,t.jsx)(m.Z.Toggle,{className:"btn-pill",variant:"default",id:"dropdown-basic",children:"Action"}),(0,t.jsxs)(m.Z.Menu,{children:[(0,t.jsx)(m.Z.Header,{children:"Dropdown"}),(0,t.jsx)(m.Z.Divider,{className:"bg-default"}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Something else"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})]})}),(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(m.Z,{children:[(0,t.jsx)(m.Z.Toggle,{className:"btn-pill",variant:"primary",id:"dropdown-basic",children:"Action"}),(0,t.jsxs)(m.Z.Menu,{children:[(0,t.jsx)(m.Z.Header,{children:"Dropdown"}),(0,t.jsx)(m.Z.Divider,{className:"bg-primary"}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Something else"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})]})}),(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(m.Z,{children:[(0,t.jsx)(m.Z.Toggle,{className:"btn-pill",variant:"success",id:"dropdown-basic",children:"Action"}),(0,t.jsxs)(m.Z.Menu,{children:[(0,t.jsx)(m.Z.Header,{children:"Dropdown"}),(0,t.jsx)(m.Z.Divider,{className:"bg-success"}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Something else"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})]})}),(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(m.Z,{children:[(0,t.jsx)(m.Z.Toggle,{className:"btn-pill",variant:"info",id:"dropdown-basic",children:"Action"}),(0,t.jsxs)(m.Z.Menu,{children:[(0,t.jsx)(m.Z.Header,{children:"Dropdown"}),(0,t.jsx)(m.Z.Divider,{className:"bg-info"}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Something else"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})]})}),(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(m.Z,{children:[(0,t.jsx)(m.Z.Toggle,{className:"btn-pill",variant:"warning",id:"dropdown-basic",children:"Action"}),(0,t.jsxs)(m.Z.Menu,{children:[(0,t.jsx)(m.Z.Header,{children:"Dropdown"}),(0,t.jsx)(m.Z.Divider,{className:"bg-warning"}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Something else"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})]})}),(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(m.Z,{children:[(0,t.jsx)(m.Z.Toggle,{className:"btn-pill",variant:"danger",id:"dropdown-basic",children:"Action"}),(0,t.jsxs)(m.Z.Menu,{children:[(0,t.jsx)(m.Z.Header,{children:"Dropdown"}),(0,t.jsx)(m.Z.Divider,{className:"bg-danger"}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Something else"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})]})})]})]}),(0,t.jsx)(c.Z,{in:u,className:"mt-2 max-height-250",children:(0,t.jsx)("pre",{children:(0,t.jsx)("code",{children:'\n <div className="text-wrap">\n <p>Any single <code className="highlighter-rouge">.btn</code> can be turned into Link dropdown toggle with some markup changes.The best part is you can do this with any button variant, too</p>\n <div className="example">\n <ButtonGroup className="mt-2 mb-2 me-1">\n <Dropdown>\n <Dropdown.Toggle className=\'btn-pill\' variant="default" id="dropdown-basic">\n Action\n </Dropdown.Toggle>\n <Dropdown.Menu>\n <Dropdown.Header>\n Dropdown\n </Dropdown.Header>\n <Dropdown.Divider className=\'bg-default\' />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">Something else</Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n </ButtonGroup>\n\n <ButtonGroup className="mt-2 mb-2 me-1">\n\n <Dropdown>\n <Dropdown.Toggle className=\'btn-pill\' variant="primary" id="dropdown-basic">\n Action\n </Dropdown.Toggle>\n <Dropdown.Menu>\n <Dropdown.Header>\n Dropdown\n </Dropdown.Header>\n <Dropdown.Divider className=\'bg-primary\' />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">Something else</Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n </ButtonGroup>\n\n <ButtonGroup className="mt-2 mb-2 me-1">\n\n <Dropdown>\n <Dropdown.Toggle className=\'btn-pill\' variant="success" id="dropdown-basic">\n Action\n </Dropdown.Toggle>\n <Dropdown.Menu>\n <Dropdown.Header>\n Dropdown\n </Dropdown.Header>\n <Dropdown.Divider className=\'bg-success\' />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">Something else</Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n </ButtonGroup>\n\n <ButtonGroup className="mt-2 mb-2 me-1">\n\n <Dropdown>\n <Dropdown.Toggle className=\'btn-pill\' variant="info" id="dropdown-basic">\n Action\n </Dropdown.Toggle>\n <Dropdown.Menu>\n <Dropdown.Header>\n Dropdown\n </Dropdown.Header>\n <Dropdown.Divider className=\'bg-info\' />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">Something else</Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n </ButtonGroup>\n\n <ButtonGroup className="mt-2 mb-2 me-1">\n\n\n <Dropdown>\n <Dropdown.Toggle className=\'btn-pill\' variant="warning" id="dropdown-basic">\n Action\n </Dropdown.Toggle>\n <Dropdown.Menu>\n <Dropdown.Header>\n Dropdown\n </Dropdown.Header>\n <Dropdown.Divider className=\'bg-warning\' />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">Something else</Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n </ButtonGroup>\n\n <ButtonGroup className="mt-2 mb-2 me-1">\n\n\n <Dropdown>\n <Dropdown.Toggle className=\'btn-pill\' variant="danger" id="dropdown-basic">\n Action\n </Dropdown.Toggle>\n <Dropdown.Menu>\n <Dropdown.Header>\n Dropdown\n </Dropdown.Header>\n <Dropdown.Divider className=\'bg-danger\' />\n <Dropdown.Item eventKey="1">Action</Dropdo
1wn.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">Something else</Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n </ButtonGroup>\n\n </div>\n </div>'})})})]})]})}),(0,t.jsx)(i.Z,{md:12,xl:6,children:(0,t.jsxs)(s.Z,{children:[(0,t.jsxs)(s.Z.Header,{children:[(0,t.jsx)(s.Z.Title,{children:"Rounded Split button dropdowns"}),(0,t.jsx)(a.Z,{className:"ms-auto",children:(0,t.jsx)(a.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>K(!b),className:"showcode d-flex ms-auto mx-2"})})]}),(0,t.jsxs)(s.Z.Body,{children:[(0,t.jsxs)("div",{className:"text-wrap",children:[(0,t.jsxs)("p",{children:["Any single ",(0,t.jsx)("code",{className:"highlighter-rouge",children:".btn"})," can be turned into Link dropdown toggle with some markup changes.The best part is you can do this with any button variant, too"]}),(0,t.jsxs)("div",{className:"example",children:[(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(x,{variant:"primary",title:"Action",className:"primary-pils",children:[(0,t.jsx)(m.Z.Header,{children:"Dropdown"}),(0,t.jsx)(m.Z.Divider,{className:"bg-primary"}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Active Item"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})}),(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(x,{className:"split",variant:"success",title:"Action",children:[(0,t.jsx)(m.Z.Header,{children:"Dropdown"}),(0,t.jsx)(m.Z.Divider,{className:"bg-success"}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Active Item"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})}),(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(x,{className:"split",variant:"info",title:"Action",children:[(0,t.jsx)(m.Z.Header,{children:"Dropdown"}),(0,t.jsx)(m.Z.Divider,{className:"bg-info"}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Active Item"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})}),(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(x,{className:"split",variant:"warning",title:"Action",children:[(0,t.jsx)(m.Z.Header,{children:"Dropdown"}),(0,t.jsx)(m.Z.Divider,{className:"bg-warning"}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Active Item"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})}),(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(x,{className:"split",variant:"danger",title:"Action",children:[(0,t.jsx)(m.Z.Header,{children:"Dropdown"}),(0,t.jsx)(m.Z.Divider,{className:"bg-danger"}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Active Item"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})})]})]}),(0,t.jsx)(c.Z,{in:b,className:"mt-2 max-height-250",children:(0,t.jsx)("pre",{children:(0,t.jsx)("code",{children:'\n <div className="text-wrap">\n <p>Any single <code className="highlighter-rouge">.btn</code> can be turned into Link dropdown toggle with some markup changes.The best part is you can do this with any button variant, too</p>\n <div className="example">\n <ButtonGroup className="mt-2 mb-2 me-1">\n\n <SplitButton variant="primary" title="Action" className="primary-pils">\n <Dropdown.Header>\n Dropdown\n </Dropdown.Header>\n <Dropdown.Divider className=\'bg-primary\' />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">\n Active Item\n </Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </SplitButton>\n </ButtonGroup>\n\n <ButtonGroup className="mt-2 mb-2 me-1">\n\n\n <SplitButton className="split" variant="success" title="Action">\n <Dropdown.Header>\n Dropdown\n </Dropdown.Header>\n <Dropdown.Divider className=\'bg-success\' />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">\n Active Item\n </Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </SplitButton>\n </ButtonGroup>\n\n <ButtonGroup className="mt-2 mb-2 me-1">\n\n\n <SplitButton className="split" variant="info" title="Action">\n <Dropdown.Header>\n Dropdown\n </Dropdown.Header>\n <Dropdown.Divider className=\'bg-info\' />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">\n Active Item\n </Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </SplitButton>\n </ButtonGroup>\n\n <ButtonGroup className="mt-2 mb-2 me-1">\n\n\n <SplitButton className="split" variant="warning" title="Action">\n <Dropdown.Header>\n Dropdown\n </Dropdown.Header>\n <Dropdown.Divider className=\'bg-warning\' />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">\n Active Item\n </Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </SplitButton>\n </ButtonGroup>\n\n <ButtonGroup className="mt-2 mb-2 me-1">\n\n\n <SplitButton className="split" variant="danger" title="Action">\n <Dropdown.Header>\n Dropdown\n </Dropdown.Header>\n <Dropdown.Divider className=\'bg-danger\' />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">\n Active Item\n </Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </SplitButton>\n </ButtonGroup>\n\n </div>\n </div>\n'})})})]})]})}),(0,t.jsx)(i.Z,{md:12,xl:6,children:(0,t.jsxs)(s.Z,{children:[(0,t.jsxs)(s.Z.Header,{children:[(0,t.jsx)(s.Z.Title,{children:"Split button dropdowns"}),(0,t.jsx)(a.Z,{className:"ms-auto",children:(0,t.jsx)(a.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>A(!N),className:"showcode d-flex ms-auto mx-2"})})]}),(0,t.jsxs)(s.Z.Body,{children:[(0,t.jsxs)("div",{className:"text-wrap",children:[(0,t.jsxs)("p",{children:["Any single ",(0,t.jsx)("code",{className:"highlighter-rouge",children:".btn"})," can be turned into Link dropdown toggle with some markup changes.The best part is you can do this with any button variant, too"]}),(0,t.jsxs)("div",{className:"example",children:[(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(x,{variant:"default",title:"Action",children:[(0,t.jsx)(m.Z.Header,{children:"Dropdown"}),(0,t.jsx)(m.Z.Divider,{className:"bg-default"}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Active Item"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})}),(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(x,{variant:"primary",title:"Action",children:[(0,t.jsx)(m.Z.Header,{children:"Dropdown"}),(0,t.jsx)(m.Z.Divider,{className:"bg-primary"}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Active Item"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})}),(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(x,{variant:"success",title:"Action",children:[(0,t.jsx)(m.Z.Header,{children:"Dropdown"}),(0,t.jsx)(m.Z.Divider,{className:"bg-success"}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Active Item"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})}),(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(x,{variant:"info",title:"Action",children:[(0,t.jsx)(m.Z.Header,{children:"Dropdown"}),(0,t.jsx)(m.Z.Divider,{className:"info"}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Active Item"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})}),(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(x,{variant:"warning",title:"Action",children:[(0,t.jsx)(m.Z.Header,{children:"Dropdown"}),(0,t.jsx)(m.Z.Divider,{className:"bg-warning"}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Active Item"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})}),(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(x,{variant:"danger",title:"Action",children:[(0,t.jsx)(m.Z.Header,{children:"Dropdown"}),(0,t.jsx)(m.Z.Divider,{className:"bg-danger"}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Active Item"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})})]})]}),(0,t.jsx)(c.Z,{in:N,className:"mt-2 max-height-250",children:(0,t.jsx)("pre",{children:(0,t.jsx)("code",{children:'\n <div className="text-wrap">\n <p>Any single <code className="highlighter-rouge">.btn</code> can be turned into Link dropdown toggle with some markup changes.The best part is you can do this with any button variant, too</p>\n <div className="example">\n <ButtonGroup className="mt-2 mb-2 me-1">\n\n\n <SplitButton variant="default" title="Action">\n <Dropdown.Header>\n Dropdown\n </Dropdown.Header>\n <Dropdown.Divider className=\'bg-default\' />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">\n Active Item\n </Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </SplitButton>\n </ButtonGroup>\n\n <ButtonGroup className="mt-2 mb-2 me-1">\n\n <SplitButton variant="primary" title="Action">\n <Dropdown.Header>\n Dropdown\n </Dropdown.Header>\n <Dropdown.Divider className=\'bg-primary\' />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">\n Active Item\n </Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </SplitButton>\n </ButtonGroup>\n\n <ButtonGroup className="mt-2 mb-2 me-1">\n\n\n <SplitButton variant="success" title="Action">\n <Dropdown.Header>\n Dropdown\n </Dropdown.Header>\n <Dropdown.Divider className=\'bg-success\' />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">\n Active Item\n </Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </SplitButton>\n </ButtonGroup>\n\n <ButtonGroup className="mt-2 mb-2 me-1">\n <SplitButton variant="info" title="Action">\n <Dropdown.Header>\n Dropdown\n </Dropdown.Header>\n <Dropdown.Divider className=\'info\' />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">\n Active Item\n </Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </SplitButton>\n </ButtonGroup>\n\n <ButtonGroup className="mt-2 mb-2 me-1">\n\n <SplitButton variant="warning" title="Action">\n <Dropdown.Header>\n Dropdown\n </Dropdown.Header>\n <Dropdown.Divider className=\'bg-warning\' />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">\n Active Item\n </Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </SplitButton>\n </ButtonGroup>\n\n <ButtonGroup className="mt-2 mb-2 me-1">\n\n <SplitButton variant="danger" title="Action">\n <Dropdown.Header>\n Dropdown\n </Dropdown.Header>\n <Dropdown.Divider className=\'bg-danger\' />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">\n Active Item\n </Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </SplitButton>\n </ButtonGroup>\n\n </div>\n </div>\n'})})})]})]})}),(0,t.jsx)(i.Z,{md:12,xl:
16,children:(0,t.jsxs)(s.Z,{children:[(0,t.jsxs)(s.Z.Header,{children:[(0,t.jsx)(s.Z.Title,{children:"Split button dropdowns"}),(0,t.jsx)(a.Z,{className:"ms-auto",children:(0,t.jsx)(a.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>k(!S),className:"showcode d-flex ms-auto mx-2"})})]}),(0,t.jsxs)(s.Z.Body,{children:[(0,t.jsxs)("div",{className:"text-wrap",children:[(0,t.jsxs)("p",{children:["Any single ",(0,t.jsx)("code",{className:"highlighter-rouge",children:".btn"})," can be turned into Link dropdown toggle with some markup changes.The best part is you can do this with any button variant, too"]}),(0,t.jsxs)("div",{className:"example",children:[(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(x,{variant:"outline-default",title:"Action",children:[(0,t.jsx)(m.Z.Header,{children:"Dropdown"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Active Item"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})}),(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(x,{variant:"outline-success",title:"Action",children:[(0,t.jsx)(m.Z.Header,{children:"Dropdown"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Active Item"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})}),(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(x,{variant:"outline-info",title:"Action",children:[(0,t.jsx)(m.Z.Header,{children:"Dropdown"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Active Item"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})}),(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(x,{variant:"outline-warning",title:"Action",children:[(0,t.jsx)(m.Z.Header,{children:"Dropdown"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Active Item"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})}),(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(x,{variant:"outline-danger",title:"Action",children:[(0,t.jsx)(m.Z.Header,{children:"Dropdown"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Active Item"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})}),(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(x,{variant:"outline-secondary",title:"Action",children:[(0,t.jsx)(m.Z.Header,{children:"Dropdown"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Active Item"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})})]})]}),(0,t.jsx)(c.Z,{in:S,className:"mt-2 max-height-250",children:(0,t.jsx)("pre",{children:(0,t.jsx)("code",{children:'\n <div className="text-wrap">\n <p>Any single <code className="highlighter-rouge">.btn</code> can be turned into Link dropdown toggle with some markup changes.The best part is you can do this with any button variant, too</p>\n <div className="example">\n <ButtonGroup className="mt-2 mb-2 me-1">\n\n <SplitButton variant="outline-default" title="Action">\n <Dropdown.Header>\n Dropdown\n </Dropdown.Header>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">\n Active Item\n </Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </SplitButton>\n </ButtonGroup>\n\n <ButtonGroup className="mt-2 mb-2 me-1">\n\n <SplitButton variant="outline-success" title="Action">\n <Dropdown.Header>\n Dropdown\n </Dropdown.Header>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">\n Active Item\n </Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </SplitButton>\n </ButtonGroup>\n\n <ButtonGroup className="mt-2 mb-2 me-1">\n\n <SplitButton variant="outline-info" title="Action">\n <Dropdown.Header>\n Dropdown\n </Dropdown.Header>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">\n Active Item\n </Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </SplitButton>\n </ButtonGroup>\n\n <ButtonGroup className="mt-2 mb-2 me-1">\n\n <SplitButton variant="outline-warning" title="Action">\n <Dropdown.Header>\n Dropdown\n </Dropdown.Header>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">\n Active Item\n </Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </SplitButton>\n </ButtonGroup>\n\n <ButtonGroup className="mt-2 mb-2 me-1">\n\n <SplitButton variant="outline-danger" title="Action">\n <Dropdown.Header>\n Dropdown\n </Dropdown.Header>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">\n Active Item\n </Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </SplitButton>\n </ButtonGroup>\n\n <ButtonGroup className="mt-2 mb-2 me-1">\n\n <SplitButton variant="outline-secondary" title="Action">\n <Dropdown.Header>\n Dropdown\n </Dropdown.Header>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">\n Active Item\n </Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </SplitButton>\n </ButtonGroup>\n\n </div>\n </div>\n'})})})]})]})}),(0,t.jsx)(i.Z,{md:12,xl:6,children:(0,t.jsxs)(s.Z,{children:[(0,t.jsxs)(s.Z.Header,{children:[(0,t.jsx)(s.Z.Title,{children:"Dropdown Sizes"}),(0,t.jsx)(a.Z,{className:"ms-auto",children:(0,t.jsx)(a.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>B(!f),className:"showcode d-flex ms-auto mx-2"})})]}),(0,t.jsxs)(s.Z.Body,{children:[(0,t.jsxs)("div",{className:"text-wrap",children:[(0,t.jsx)("p",{children:"Button dropdowns work with buttons of all sizes, including default and split dropdown buttons"}),(0,t.jsxs)("div",{className:"example",children:[(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(m.Z,{children:[(0,t.jsx)(m.Z.Toggle,{size:"lg",variant:"primary",id:"dropdown-basic",children:"Larger Dropdown"}),(0,t.jsxs)(m.Z.Menu,{children:[(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Something else"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})]})}),(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(m.Z,{children:[(0,t.jsx)(m.Z.Toggle,{variant:"primary",id:"dropdown-basic",children:"Default Dropdown"}),(0,t.jsxs)(m.Z.Menu,{children:[(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Something else"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})]})}),(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(m.Z,{children:[(0,t.jsx)(m.Z.Toggle,{size:"sm",variant:"primary",id:"dropdown-basic",children:"Small Dropdown"}),(0,t.jsxs)(m.Z.Menu,{children:[(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Something else"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})]})})]})]}),(0,t.jsx)(c.Z,{in:f,className:"mt-2 max-height-250",children:(0,t.jsx)("pre",{children:(0,t.jsx)("code",{children:'\n <div className="text-wrap">\n <p>
1Button dropdowns work with buttons of all sizes, including default and split dropdown buttons</p>\n <div className="example">\n <ButtonGroup className="mt-2 mb-2 me-1">\n\n <Dropdown>\n <Dropdown.Toggle size="lg" variant="primary" id="dropdown-basic">\n Larger Dropdown\n </Dropdown.Toggle>\n <Dropdown.Menu>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">Something else</Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n </ButtonGroup>\n\n <ButtonGroup className="mt-2 mb-2 me-1">\n\n <Dropdown>\n <Dropdown.Toggle variant="primary" id="dropdown-basic">\n Default Dropdown\n </Dropdown.Toggle>\n <Dropdown.Menu>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">Something else</Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n </ButtonGroup>\n\n <ButtonGroup className="mt-2 mb-2 me-1">\n\n <Dropdown>\n <Dropdown.Toggle size="sm" variant="primary" id="dropdown-basic">\n Small Dropdown\n </Dropdown.Toggle>\n <Dropdown.Menu>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">Something else</Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n </ButtonGroup>\n\n </div>\n </div>\n'})})})]})]})}),(0,t.jsx)(i.Z,{md:12,xl:6,children:(0,t.jsxs)(s.Z,{children:[(0,t.jsxs)(s.Z.Header,{children:[(0,t.jsx)(s.Z.Title,{children:"Dropup, Dropright, Dropleft variation"}),(0,t.jsx)(a.Z,{className:"ms-auto",children:(0,t.jsx)(a.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>T(!H),className:"showcode d-flex ms-auto mx-2"})})]}),(0,t.jsxs)(s.Z.Body,{children:[(0,t.jsxs)("div",{className:"text-wrap",children:[(0,t.jsxs)("p",{children:["Trigger dropdown menus above elements by adding ",(0,t.jsx)("code",{className:"highlighter-rouge",children:".dropup"})," , ",(0,t.jsx)("code",{className:"highlighter-rouge",children:".dropend"})," , ",(0,t.jsx)("code",{className:"highlighter-rouge",children:".dropstart"})," to the parent element."]}),(0,t.jsxs)("div",{className:"example",children:[(0,t.jsx)(l.Z,{className:"dropup mt-2 mb-2 me-1",children:(0,t.jsx)(m.Z,{children:(0,t.jsxs)(j.Z,{drop:"up",variant:"primary",title:"Drop up",children:[(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"HTML"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"CSS"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"JavaScript"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})})}),(0,t.jsx)(l.Z,{className:"dropend mt-2 mb-2 me-1",children:(0,t.jsxs)(j.Z,{drop:"end",variant:"primary",title:"Drop right",children:[(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"HTML"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"CSS"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"JavaScript"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"About Us"})]})}),(0,t.jsx)("div",{className:"dropstart btn-group mt-2 mb-2 me-1",children:(0,t.jsxs)(j.Z,{drop:"start",variant:"primary",title:"Drop left",children:[(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"HTML"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"CSS"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"JavaScript"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"About Us"})]})})]})]}),(0,t.jsx)(c.Z,{in:H,className:"mt-2 max-height-250",children:(0,t.jsx)("pre",{children:(0,t.jsx)("code",{children:'\n <div className="text-wrap">\n <p>Trigger dropdown menus above elements by adding <code className="highlighter-rouge">.dropup</code> , <code className="highlighter-rouge">.dropend</code> , <code className="highlighter-rouge">.dropstart</code> to the parent\n element.\n </p>\n <div className="example">\n <ButtonGroup className="dropup mt-2 mb-2 me-1">\n\n <Dropdown>\n <DropdownButton drop="up" variant="primary" title="Drop up">\n\n <Dropdown.Divider />\n <Dropdown.Item eventKey="1">HTML</Dropdown.Item>\n <Dropdown.Item eventKey="2">CSS</Dropdown.Item>\n <Dropdown.Item eventKey="3">JavaScript</Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n\n </DropdownButton>\n </Dropdown>\n </ButtonGroup>\n\n <ButtonGroup className="dropend mt-2 mb-2 me-1">\n\n <DropdownButton\n drop="end"\n variant="primary"\n title="Drop right"\n >\n <Dropdown.Item eventKey="1">HTML</Dropdown.Item>\n <Dropdown.Item eventKey="2">CSS</Dropdown.Item>\n <Dropdown.Item eventKey="3">JavaScript</Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">About Us</Dropdown.Item>\n </DropdownButton>\n </ButtonGroup>\n\n <div className="dropstart btn-group mt-2 mb-2 me-1">\n\n <DropdownButton\n drop="start"\n variant="primary"\n title="Drop left"\n >\n <Dropdown.Item eventKey="1">HTML</Dropdown.Item>\n <Dropdown.Item eventKey="2">CSS</Dropdown.Item>\n <Dropdown.Item eventKey="3">JavaScript</Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">About Us</Dropdown.Item>\n </DropdownButton>\n </div>\n </div>\n </div>\n'})})})]})]})}),(0,t.jsx)(i.Z,{md:12,xl:6,children:(0,t.jsxs)(s.Z,{children:[(0,t.jsxs)(s.Z.Header,{children:[(0,t.jsx)(s.Z.Title,{children:"Dropdown Menu Content"}),(0,t.jsx)(a.Z,{className:"ms-auto",children:(0,t.jsx)(a.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>G(!M),className:"showcode d-flex ms-auto mx-2"})})]}),(0,t.jsxs)(s.Z.Body,{children:[(0,t.jsxs)("div",{className:"text-wrap",children:[(0,t.jsx)("p",{children:"Samples of Dropdown menus Headers, Dividers, Text, Forms "}),(0,t.jsxs)("div",{className:"example",children:[(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(j.Z,{variant:"primary",title:"Dropdown header",children:[(0,t.jsx)(m.Z.Header,{children:"Dropdown header"}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"})]})}),(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(j.Z,{variant:"primary",title:"Dropdown divider",children:[(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another Action"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})}),(0,t.jsxs)(m.Z,{className:"btn-group mt-2 mb-2 me-1",children:[(0,t.jsxs)(m.Z.Toggle,{className:"btn btn-primary dropdown-toggle",type:"button","data-bs-toggle":"dropdown",children:["Dropdown Text",(0,t.jsx)("span",{className:"caret"})]}),(0,t.jsx)(m.Z.Menu,{className:"dropdown-menu p-4 text-muted",children:(0,t.jsxs)("p",{children:["Some example text ","that's"," free-flowing within the dropdown menu.And this is more example text."]})})]}),(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsx)(j.Z,{as:l.Z,drop:"up",variant:"primary",title:"Dropdown form",children:(0,t.jsxs)(a.Z,{className:"card-body w-260",children:[(0,t.jsxs)(a.Z.Group,{children:[(0,t.jsx)(a.Z.Label,{children:"Mail or Username"}),(0,t.jsx)(a.Z.Control,{placeholder:"Email",type:"email"})]}),(0,t.jsxs)(a.Z.Group,{children:[(0,t.jsx)(a.Z.Label,{children:"Password"}),(0,t.jsx)(a.Z.Control,{placeholder:"password",type:"password"})]}),(0,t.jsx)(a.Z.Group,{children:(0,t.jsx)(a.Z.Check,{type:"checkbox",label:"Remeber me"})}),(0,t.jsx)("div",{className:"submit",children:(0,t.jsx)(I(),{className:"btn btn-primary btn-block",href:"#!",children:"Login"})}),(0,t.jsxs)("div",{className:"text-center mt-3",children:[(0,t.jsx)("p",{className:"mb-2",children:(0,t.jsx)(I(),{href:"#!",children:"Forgot Password"})}),(0,t.jsxs)("p",{className:"text-dark mb-0",children:["Don't"," have account?",(0,t.jsx)(I(),{className:"text-primary.ms-1",href:"#!",children:"Register"})]})]})]})})}),(0,t.jsxs)(m.Z,{className:"btn-group mt-2 mb-2 me-1",children:[(0,t.jsxs)(m.Z.Toggle,{className:"btn-primary",children:[(0,t.jsx)("span",{className:"caret",children:(0,t.jsx)("i",{className:"fe fe-settings me-1"})})," Dropdown Options"]}),(0,t.jsxs)(m.Z.Menu,{children:[(0,t.jsx)(m.Z.Header,{children:(0,t.jsxs)("h6",{children:["Auto Correct ",(0,t.jsxs)("span",{className:"float-end",children:["yes",(0,t.jsx)("i",{className:"fe fe-chevron-right"})]})]})}),(0,t.jsxs)(m.Z.Item,{href:"#!",children:["Screen Light",(0,t.jsx)("span",{className:"float-end me-3",children:(0,t.jsx)("i",{className:"fe fe-sun"})})]}),(0,t.jsx)(m.Z.Item,{className:"ps-4",children:(0,t.jsx)(a.Z.Group,{className:"mg-b-10 mb-0",children:(0,t.jsxs)("label",{className:"custom-switch",children:[(0,t.jsx)("input",{type:"checkbox",name:"custom-switch-checkbox",className:"custom-switch-input"}
1),(0,t.jsx)("span",{className:"custom-switch-description mg-l-10",children:"Notification"}),(0,t.jsx)("span",{className:"custom-switch-indicator ms-5"})]})})}),(0,t.jsx)(m.Z.Item,{children:(0,t.jsx)(a.Z.Group,{children:(0,t.jsxs)("label",{className:"custom-switch",children:[(0,t.jsx)("input",{type:"checkbox",name:"custom-switch-checkbox",className:"custom-switch-input"}),(0,t.jsx)("span",{className:"custom-switch-description mg-l-10 ms-0",children:"Reminders"}),(0,t.jsx)("span",{className:"custom-switch-indicator ms-5"})]})})})]})]})]})]}),(0,t.jsx)(c.Z,{in:M,className:"mt-2 max-height-250",children:(0,t.jsx)("pre",{children:(0,t.jsx)("code",{children:'\n <div className="text-wrap">\n <p>Samples of Dropdown menus Headers, Dividers, Text, Forms </p>\n <div className="example">\n <ButtonGroup className="mt-2 mb-2 me-1">\n\n <DropdownButton variant="primary" title="Dropdown header">\n <Dropdown.Header>\n Dropdown header\n </Dropdown.Header>\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n </DropdownButton>\n\n </ButtonGroup>\n <ButtonGroup className="mt-2 mb-2 me-1">\n\n <DropdownButton variant="primary" title="Dropdown divider">\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another Action</Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </DropdownButton>\n </ButtonGroup>\n <Dropdown className="btn-group mt-2 mb-2 me-1">\n <Dropdown.Toggle className="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">Dropdown Text\n <span className="caret"></span>\n </Dropdown.Toggle>\n <Dropdown.Menu className="dropdown-menu p-4 text-muted">\n <p>\n Some example text that\'s free-flowing within the dropdown menu.And this is more example text.\n </p>\n </Dropdown.Menu>\n </Dropdown>\n <ButtonGroup className="mt-2 mb-2 me-1">\n\n <Dropdown >\n <Dropdown.Toggle variant="primary" title="Dropdown form">\n Dropdown form\n </Dropdown.Toggle>\n <Dropdown.Menu className=\' w-260\' >\n <Form className="card-body" >\n <Form.Group >\n <Form.Label >Mail or Username</Form.Label>\n <Form.Control placeholder="Email" type="email" />\n </Form.Group>\n\n <Form.Group>\n <Form.Label >Password</Form.Label>\n <Form.Control placeholder="password" type="password" />\n </Form.Group>\n <Form.Group >\n <Form.Check type="checkbox" label="Remeber me" />\n </Form.Group>\n <div className="submit">\n <Link className="btn btn-primary btn-block" href="#!">Login</Link>\n </div>\n <div className="text-center mt-3">\n <p className="mb-2"><Link href="#!">Forgot Password</Link></p>\n <p className="text-dark mb-0">Don\'t have account?<Link className="text-primary.ms-1" href="#!">Register</Link></p>\n </div>\n </Form>\n </Dropdown.Menu>\n\n </Dropdown>\n\n </ButtonGroup>\n <Dropdown className="btn-group mt-2 mb-2 me-1">\n <Dropdown.Toggle className="btn-primary">\n <span className="caret"><i className="fe fe-settings me-1"></i></span> Dropdown Options\n </Dropdown.Toggle>\n <Dropdown.Menu>\n <Dropdown.Header>\n <h6>Auto Correct <span className="float-end">yes<i className="fe fe-chevron-right"></i></span></h6>\n </Dropdown.Header>\n <Dropdown.Item href=\'#!\'>Screen Light<span className="float-end me-3"><i className="fe fe-sun"></i></span></Dropdown.Item>\n <Dropdown.Item className="ps-4">\n <Form.Group className="mg-b-10 mb-0">
1\n <label className="custom-switch">\n <input type="checkbox" name="custom-switch-checkbox" className="custom-switch-input" />\n <span className="custom-switch-description mg-l-10">Notification</span>\n <span className="custom-switch-indicator ms-5"></span>\n </label>\n </Form.Group>\n </Dropdown.Item>\n <Dropdown.Item>\n <Form.Group >\n <label className="custom-switch">\n <input type="checkbox" name="custom-switch-checkbox" className="custom-switch-input" />\n <span className="custom-switch-description mg-l-10">Reminders</span>\n <span className="custom-switch-indicator ms-5"></span>\n </label>\n </Form.Group>\n </Dropdown.Item>\n </Dropdown.Menu>\n\n </Dropdown>\n </div>\n </div>\n'})})})]})]})}),(0,t.jsx)(i.Z,{md:12,xl:6,children:(0,t.jsxs)(s.Z,{children:[(0,t.jsxs)(s.Z.Header,{children:[(0,t.jsx)(s.Z.Title,{children:"Icon Drop Downs dropdowns"}),(0,t.jsx)(a.Z,{className:"ms-auto",children:(0,t.jsx)(a.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>L(!C),className:"showcode d-flex ms-auto mx-2"})})]}),(0,t.jsxs)(s.Z.Body,{children:[(0,t.jsx)("div",{className:"example panel panel-default",children:(0,t.jsxs)("div",{className:"panel-body p-0",children:[(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(m.Z,{children:[(0,t.jsx)(m.Z.Toggle,{className:"btn-pill",variant:"info",children:(0,t.jsx)("i",{className:"fa fa-facebook"})}),(0,t.jsxs)(m.Z.Menu,{children:[(0,t.jsx)(m.Z.Header,{children:(0,t.jsx)("b",{children:"Dropdown"})}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Something else"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})]})}),(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(m.Z,{children:[(0,t.jsx)(m.Z.Toggle,{className:"btn-pill",variant:"danger",children:(0,t.jsx)("i",{className:"fa fa-youtube "})}),(0,t.jsxs)(m.Z.Menu,{children:[(0,t.jsx)(m.Z.Header,{children:(0,t.jsx)("b",{children:"Dropdown"})}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Something else"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})]})}),(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(m.Z,{children:[(0,t.jsx)(m.Z.Toggle,{className:"btn-pill",variant:"info",children:(0,t.jsx)("i",{className:"fa fa-google"})}),(0,t.jsxs)(m.Z.Menu,{children:[(0,t.jsx)(m.Z.Header,{children:(0,t.jsx)("b",{children:"Dropdown"})}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Something else"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})]})}),(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(m.Z,{children:[(0,t.jsx)(m.Z.Toggle,{className:"btn-pill",variant:"dark",children:(0,t.jsx)("i",{className:"fa fa-github"})}),(0,t.jsxs)(m.Z.Menu,{children:[(0,t.jsx)(m.Z.Header,{children:(0,t.jsx)("b",{children:"Dropdown"})}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Something else"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})]})}),(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(m.Z,{children:[(0,t.jsx)(m.Z.Toggle,{className:"btn-pill",variant:"danger",children:(0,t.jsx)("i",{className:"fa fa-pinterest-p"})}),(0,t.jsxs)(m.Z.Menu,{children:[(0,t.jsx)(m.Z.Header,{children:(0,t.jsx)("b",{children:"Dropdown"})}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Something else"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})]})}),(0,t.jsx)(l.Z,{className:"mt-2 mb-2 me-1",children:(0,t.jsxs)(m.Z,{children:[(0,t.jsx)(m.Z.Toggle,{className:"btn-pill",variant:"secondary",children:(0,t.jsx)("i",{className:"fa fa-twitter"})}),(0,t.jsxs)(m.Z.Menu,{children:[(0,t.jsx)(m.Z.Header,{children:(0,t.jsx)("b",{children:"Dropdown"})}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"1",children:"Action"}),(0,t.jsx)(m.Z.Item,{eventKey:"2",children:"Another action"}),(0,t.jsx)(m.Z.Item,{eventKey:"3",children:"Something else"}),(0,t.jsx)(m.Z.Divider,{}),(0,t.jsx)(m.Z.Item,{eventKey:"4",children:"Separated link"})]})]})})]})}),(0,t.jsx)(c.Z,{in:C,className:"mt-2 max-height-250",children:(0,t.jsx)("pre",{children:(0,t.jsx)("code",{children:'\n <div className="example panel panel-default">\n <div className="panel-body p-0">\n <ButtonGroup className="mt-2 mb-2 me-1">\n\n <Dropdown>\n <Dropdown.Toggle className=\'btn-pill\' variant="info">\n <i className="fa fa-facebook"></i>\n </Dropdown.Toggle>\n <Dropdown.Menu>\n <Dropdown.Header>\n <b>Dropdown</b>\n </Dropdown.Header>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">Something else</Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n </ButtonGroup>\n <ButtonGroup className="mt-2 mb-2 me-1">\n\n <Dropdown>\n <Dropdown.Toggle className=\'btn-pill\' variant="danger">\n <i className="fa fa-youtube "></i>\n </Dropdown.Toggle>\n <Dropdown.Menu>\n <Dropdown.Header>\n <b>Dropdown</b>\n </Dropdown.Header>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">Something else</Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n </ButtonGroup>\n <ButtonGroup className="mt-2 mb-2 me-1">\n\n <Dropdown>\n <Dropdown.Toggle className=\'btn-pill\' variant="info">\n <i className="fa fa-google"></i>\n </Dropdown.Toggle>\n <Dropdown.Menu>\n <Dropdown.Header>\n <b>Dropdown</b>\n </Dropdown.Header>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">Something else</Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n </ButtonGroup>\n <ButtonGroup className="mt-2 mb-2 me-1">\n\n <Dropdown>\n <Dropdown.Toggle className=\'btn-pill\' variant="dark">\n <i className="fa fa-github"></i>\n </Dropdown.Toggle>\n <Dropdown.Menu>\n <Dropdown.Header>\n <b>Dropdown</b>\n </Dropdown.Header>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">Something else</Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n </ButtonGroup>\n <ButtonGroup className="mt-2 mb-2 me-1">\n\n <Dropdown>\n <Dropdown.Toggle className=\'btn-pill\' variant="danger">\n <i className="fa fa-pinterest-p"></i>\n </Dropdown.Toggle>\n <Dropdown.Menu>\n <Dropdown.Header>\n <b>Dropdown</b>\n </Dropdown.Header>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">Something else</Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n\n </ButtonGroup>\n <ButtonGroup className="mt-2 mb-2 me-1">\n\n <Dropdown>\n <Dropdown.Toggle className=\'btn-pill\' variant="secondary">\n <i className="fa fa-twitter"></i>\n </Dropdown.Toggle>\n <Dropdown.Menu>\n <Dropdown.Header>\n <b>Dropdown</b>\n </Dropdown.Header>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="1">Action</Dropdown.Item>\n <Dropdown.Item eventKey="2">Another action</Dropdown.Item>\n <Dropdown.Item eventKey="3">Something else</Dropdown.Item>\n <Dropdown.Divider />\n <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>\n </Dropdown.Menu>\n </Dropdown>\n </ButtonGroup>\n </div>\n </div>\n'})})})]})]})})]})]})};y.layout="Contentlayout";var b=y},72867:function(e,n,o){"use strict";var t=o(85893);o(67294);var r=o(26699);let d=e=>(0,t.jsx)("div",{children:(0,t.jsxs)("div",{className:"page-header",children:[(0,t.jsx)("h1",{className:"page-title",children:e.titles}),(0,t.jsx)("div",{children:(0,t.jsxs)(r.Z,{children:[e.items.map((e,n)=>(0,t.jsx)(r.Z.Item,{href:"#!",children:e},n)),(0,t.jsx)(r.Z.Item,{href:"#!",active:!0,children:e.active})]})})]})});n.Z=d},33272:function(e,n,o){"use strict";o.d(n,{Z:function(){return a}});var t=o(85893);o(67294);var r=o(9008),d=o.n(r),i={src:"/_next/static/media/favicon.00e6795d.ico",height:16,width:16,blurWidth:0,blurHeight:0};let s=e=>{let{title:n}=e;return(0,t.jsxs)(d(),{children:[(0,t.jsx)("title",{children:" Fandoro Technologies
1- Making Businesses Responsible"}),(0,t.jsx)("link",{rel:"icon",href:i.src}),(0,t.jsx)("meta",{name:"description",content:"Fandoro Technologies - making businesses responsible"}),(0,t.jsx)("meta",{name:"author",content:"Fandoro Technologies Private Limited"}),(0,t.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 a=s},9008:function(e,n,o){e.exports=o(42636)},26699:function(e,n,o){"use strict";o.d(n,{Z:function(){return c}});var t=o(93967),r=o.n(t),d=o(67294),i=o(76792),s=o(13551),a=o(85893);let l=d.forwardRef(({bsPrefix:e,active:n=!1,children:o,className:t,as:d="li",linkAs:l=s.Z,linkProps:m={},href:c,title:p,target:w,...D},h)=>{let v=(0,i.vE)(e,"breadcrumb-item");return(0,a.jsx)(d,{ref:h,...D,className:r()(v,t,{active:n}),"aria-current":n?"page":void 0,children:n?o:(0,a.jsx)(l,{...m,href:c,title:p,target:w,children:o})})});l.displayName="BreadcrumbItem";let m=d.forwardRef(({bsPrefix:e,className:n,listProps:o={},children:t,label:d="breadcrumb",as:s="nav",...l},m)=>{let c=(0,i.vE)(e,"breadcrumb");return(0,a.jsx)(s,{"aria-label":d,className:n,ref:m,...l,children:(0,a.jsx)("ol",{...o,className:r()(c,null==o?void 0:o.className),children:t})})});m.displayName="Breadcrumb";var c=Object.assign(m,{Item:l})},2086:function(e,n,o){"use strict";var t=o(93967),r=o.n(t),d=o(67294),i=o(76792),s=o(85893);let a=d.forwardRef(({bsPrefix:e,size:n,vertical:o=!1,className:t,role:d="group",as:a="div",...l},m)=>{let c=(0,i.vE)(e,"btn-group"),p=c;return o&&(p=`${c}-vertical`),(0,s.jsx)(a,{...l,ref:m,role:d,className:r()(t,p,n&&`${c}-${n}`)})});a.displayName="ButtonGroup",n.Z=a},68125:function(e,n,o){"use strict";var t=o(67294),r=o(45697),d=o.n(r),i=o(70552),s=o(24486),a=o(29100),l=o(41714),m=o(85893);let c={id:d().string,href:d().string,onClick:d().func,title:d().node.isRequired,disabled:d().bool,align:l.r,menuRole:d().string,renderMenuOnMount:d().bool,rootCloseEvent:d().string,menuVariant:d().oneOf(["dark"]),flip:d().bool,bsPrefix:d().string,variant:d().string,size:d().string},p=t.forwardRef(({title:e,children:n,bsPrefix:o,rootCloseEvent:t,variant:r,size:d,menuRole:l,renderMenuOnMount:c,disabled:p,href:w,id:D,menuVariant:h,flip:v,...x},j)=>(0,m.jsxs)(i.Z,{ref:j,...x,children:[(0,m.jsx)(s.Z,{id:D,href:w,size:d,variant:r,disabled:p,childBsPrefix:o,children:e}),(0,m.jsx)(a.Z,{role:l,renderOnMount:c,rootCloseEvent:t,variant:h,flip:v,children:n})]}));p.displayName="DropdownButton",p.propTypes=c,n.Z=p},41714:function(e,n,o){"use strict";o.d(n,{r:function(){return i}});var t=o(45697),r=o.n(t);let d=r().oneOf(["start","end"]),i=r().oneOfType([d,r().shape({sm:d}),r().shape({md:d}),r().shape({lg:d}),r().shape({xl:d}),r().shape({xxl:d}),r().object])}},function(e){e.O(0,[9774,2888,179],function(){return e(e.s=97560)}),_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.