1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[4729],{10567:function(e,s,i){(window.__NEXT_P=window.__NEXT_P||[]).push(["/dashboard/components/list-group",function(){return i(45849)}])},45849:function(e,s,i){"use strict";i.r(s),i.d(s,{default:function(){return A}});var t=i(85893),n=i(67294),a=i(68888),r=i(88083),l=i(68041),c=i(5401),d=i(14676),m=i(63029),o=i(40157),h=i(36762),x=i(728),u=i(38571),j=i(91140),p=i(76195),b=i(90791),Z=i(45698),I=i(14976);let L=" \n<ListGroup>\n <ListGroup.Item>Cras justo odio</ListGroup.Item>\n <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>\n <ListGroup.Item>Morbi leo risus</ListGroup.Item>\n <ListGroup.Item>Porta ac consectetur ac</ListGroup.Item>\n <ListGroup.Item>Vestibulum at eros</ListGroup.Item>\n</ListGroup>\n".trim(),g=" \n<ListGroup>\n <ListGroup.Item active>Cras justo odio</ListGroup.Item>\n <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>\n <ListGroup.Item>Morbi leo risus</ListGroup.Item>\n <ListGroup.Item>Porta ac consectetur ac</ListGroup.Item>\n <ListGroup.Item>Vestibulum at eros</ListGroup.Item>\n</ListGroup>\n".trim(),v=" \n<ListGroup>\n <ListGroup.Item disabled>Cras justo odio</ListGroup.Item>\n <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>\n <ListGroup.Item>Morbi leo risus</ListGroup.Item>\n <ListGroup.Item>Porta ac consectetur ac</ListGroup.Item>\n <ListGroup.Item>Vestibulum at eros</ListGroup.Item>\n</ListGroup>\n".trim(),N=' \n<ListGroup defaultActiveKey="#link1">\n <ListGroup.Item action href="#link1" active >Cras justo odio</ListGroup.Item>\n <ListGroup.Item action href="#link2">Dapibus ac facilisis in</ListGroup.Item>\n <ListGroup.Item action href="#link3">Morbi leo risus</ListGroup.Item>\n <ListGroup.Item action href="#link4">Porta ac consectetur ac</ListGroup.Item>\n <ListGroup.Item action href="#link5" disabled>Vestibulum at eros</ListGroup.Item>\n</ListGroup>\n'.trim(),G=' \n<ListGroup defaultActiveKey="#link1">\n <ListGroup.Item action onClick={alertClicked} active >Cras justo odio</ListGroup.Item>\n <ListGroup.Item action onClick={alertClicked}>Dapibus ac facilisis in</ListGroup.Item>\n <ListGroup.Item action onClick={alertClicked}>Morbi leo risus</ListGroup.Item>\n <ListGroup.Item action onClick={alertClicked}>Porta ac consectetur ac</ListGroup.Item>\n <ListGroup.Item action onClick={alertClicked} disabled>Vestibulum at eros</ListGroup.Item> \n</ListGroup>\n'.trim(),f=' \n<ListGroup variant="flush">\n <ListGroup.Item>Cras justo odio</ListGroup.Item>\n <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>\n <ListGroup.Item>Morbi leo risus</ListGroup.Item>\n <ListGroup.Item>Porta ac consectetur ac</ListGroup.Item>\n <ListGroup.Item>Vestibulum at eros</ListGroup.Item>\n</ListGroup>\n'.trim(),y=" \n<ListGroup horizontal>\n <ListGroup.Item>Cras justo odio</ListGroup.Item>\n <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>\n <ListGroup.Item>Morbi leo risus</ListGroup.Item> \n</ListGroup>\n".trim(),C=' \n<ListGroup horizontal>\n <ListGroup.Item className="flex-fill">Cras justo odio</ListGroup.Item>\n <ListGroup.Item className="flex-fill">Dapibus ac facilisis in</ListGroup.Item>\n <ListGroup.Item className="flex-fill">Morbi leo risus</ListGroup.Item> \n</ListGroup>\n'.trim(),k=' \n<ListGroup>\n <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>\n <ListGroup.Item variant="primary">This is a Primary list group item</ListGroup.Item>\n <ListGroup.Item variant="secondary">This is a Secondary list group item</ListGroup.Item>\n <ListGroup.Item variant="success">This is a Success list group item</ListGroup.Item>\n <ListGroup.Item variant="danger">This is a Danger list group item</ListGroup.Item>\n <ListGroup.Item variant="warning">This is a Warning list group item</ListGroup.Item>\n <ListGroup.Item variant="info">This is a Info list group item</ListGroup.Item>\n <ListGroup.Item variant="light">This is a Light list group item</ListGroup.Item>\n <ListGroup.Item variant="dark">This is a Dark list group item</ListGroup.Item>\n</ListGroup>\n'.trim(),K=' \n<ListGroup>\n <ListGroup.Item className="d-flex justify-content-between" >Cras justo odio <Badge bg="primary">14</Badge> </ListGroup.Item>\n <ListGroup.Item className="d-flex justify-content-between" >Dapibus ac facilisis in <Badge bg="primary">2</Badge></ListGroup.Item>\n <ListGroup.Item className="d-flex justify-content-between" >Morbi leo risus <Badge bg="primary">1</Badge></ListGroup.Item> \n</ListGroup>\n'.trim(),D=' \n<ListGroup defaultActiveKey="#link1" >\n <ListGroup.Item action href="#link1" active> \n <div className="d-flex w-100 justify-content-between">\n <h5 className="mb-1">List group item heading</h5>\n <small>3 days ago</small>\n </div>\n <p className="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>\n <small>Donec id elit non mi porta.</small>\n </ListGroup.Item>\n <ListGroup.Item action href="#link2" > \n <div className="d-flex w-100 justify-content-between">\n <h5 className="mb-1">List group item heading</h5>\n <small>3 days ago</small>\n </div>\n <p className="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>\n <small>Donec id elit non mi porta.</small>\n </ListGroup.Item>\n <ListGroup.Item action href="#link3" > \n <div className="d-flex w-100 justify-content-between">\n <h5 className="mb-1">List group item heading</h5>\n <small>3 days ago</small>\n </div>\n <p className="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>\n <small>Donec id elit non mi porta.</small>\n </ListGroup.Item> \n</ListGroup>\n'.trim(),P=' \n<ListGroup variant="flush">\n <ListGroup.Item>\n <PlayCircle size="15px" className="align-middle me-2 text-primary"/>\n 12 hours video\n </ListGroup.Item>\n <ListGroup.Item>\n <Award size="15px" className="align-middle me-2 text-success"/>\n Certificate\n </ListGroup.Item>\n <ListGroup.Item>\n <Calendar size="15px" className="align-middle me-2 text-info"/>\n 12 Article\n </ListGroup.Item>\n <ListGroup.Item>\n <Video size="15px" className="align-middle me-2 text-secondary"/>\n Watch Offline\n </ListGroup.Item>\n <ListGroup.Item>\n <Clock size="15px" className="align-middle me-2 text-warning"/>\n Lifetime access\n </ListGroup.Item>\n</ListGroup>
1\n'.trim(),w=' \n// Below import is required to use DotBadge custom component\n// import DotBadge from \'./DotBadge\'; \n\n<ListGroup variant="flush">\n <ListGroup.Item>\n <span>Post ID</span>\n <h5>8693637308</h5>\n </ListGroup.Item>\n <ListGroup.Item>\n <span>Status</span>\n <h5><DotBadge bg="success" >Published (unsaved changes)</DotBadge></h5>\n </ListGroup.Item>\n <ListGroup.Item>\n <span>Created by</span>\n <div className="d-flex mt-2">\n <Image src={Avatar1} alt="" className="avatar-sm rounded-circle"/>\n <div className="ms-2">\n <h5 className="mb-n1">Geeks Courses</h5>\n <small>Admin</small>\n </div>\n </div>\n </ListGroup.Item>\n <ListGroup.Item>\n <span>Created at</span>\n <h5>Jul 30, 2:21 PM</h5>\n </ListGroup.Item>\n <ListGroup.Item>\n <span>First published at</span>\n <h5>Jul 30, 2:21 PM</h5>\n </ListGroup.Item>\n <ListGroup.Item>\n <span>Last update</span>\n <h5>Aug 31, 12:21 PM</h5>\n </ListGroup.Item>\n <ListGroup.Item>\n <span>Last Published</span>\n <h5>Aug 31, 12:21 PM</h5>\n </ListGroup.Item>\n</ListGroup>\n'.trim();var A=()=>{function e(){alert("You clicked a ListGroupItem")}return(0,t.jsxs)(n.Fragment,{children:[(0,t.jsx)(a.Z,{children:(0,t.jsx)(r.Z,{lg:12,md:12,sm:12,children:(0,t.jsx)("div",{className:"border-bottom pb-4 mb-4 d-md-flex align-items-center justify-content-between",children:(0,t.jsxs)("div",{className:"mb-3 mb-md-0",children:[(0,t.jsx)("h1",{className:"mb-1 h2 fw-bold",children:"Listgroup"}),(0,t.jsx)("p",{className:"mb-0 ",children:"List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within."})]})})})}),(0,t.jsx)(a.Z,{children:(0,t.jsxs)(r.Z,{xl:12,lg:12,md:12,sm:12,children:[(0,t.jsxs)("div",{id:"basic-example",className:"mb-4",children:[(0,t.jsx)("h3",{children:"Basic list"}),(0,t.jsx)("p",{children:"The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed."})]}),(0,t.jsx)(l.Z.Container,{defaultActiveKey:"design",children:(0,t.jsxs)(c.Z,{children:[(0,t.jsx)(c.Z.Header,{className:"border-bottom-0 p-0",children:(0,t.jsxs)(d.Z,{className:"nav-lb-tab",children:[(0,t.jsx)(d.Z.Item,{children:(0,t.jsx)(d.Z.Link,{eventKey:"design",className:"mb-sm-3 mb-md-0",children:"Design"})}),(0,t.jsx)(d.Z.Item,{children:(0,t.jsx)(d.Z.Link,{eventKey:"react",className:"mb-sm-3 mb-md-0",children:"Code"})})]})}),(0,t.jsx)(c.Z.Body,{className:"p-0",children:(0,t.jsxs)(l.Z.Content,{children:[(0,t.jsx)(l.Z.Pane,{eventKey:"design",className:"pb-4 p-4",children:(0,t.jsxs)(m.Z,{children:[(0,t.jsx)(m.Z.Item,{children:"Cras justo odio"}),(0,t.jsx)(m.Z.Item,{children:"Dapibus ac facilisis in"}),(0,t.jsx)(m.Z.Item,{children:"Morbi leo risus"}),(0,t.jsx)(m.Z.Item,{children:"Porta ac consectetur ac"}),(0,t.jsx)(m.Z.Item,{children:"Vestibulum at eros"})]})}),(0,t.jsx)(l.Z.Pane,{eventKey:"react",className:"pb-4 p-4 react-code",children:(0,t.jsx)(I.TU,{code:L})})]})})]})})]})}),(0,t.jsx)("hr",{className:"mb-5 mt-7"}),(0,t.jsx)(a.Z,{children:(0,t.jsxs)(r.Z,{xl:12,lg:12,md:12,sm:12,children:[(0,t.jsxs)("div",{id:"active-items",className:"mb-4",children:[(0,t.jsx)("h3",{children:"Active Item"}),(0,t.jsxs)("p",{children:["Set the ",(0,t.jsx)("code",{children:"active"})," prop to indicate the list groups current active selection."]})]}),(0,t.jsx)(l.Z.Container,{defaultActiveKey:"design",children:(0,t.jsxs)(c.Z,{children:[(0,t.jsx)(c.Z.Header,{className:"border-bottom-0 p-0",children:(0,t.jsxs)(d.Z,{className:"nav-lb-tab",children:[(0,t.jsx)(d.Z.Item,{children:(0,t.jsx)(d.Z.Link,{eventKey:"design",className:"mb-sm-3 mb-md-0",children:"Design"})}),(0,t.jsx)(d.Z.Item,{children:(0,t.jsx)(d.Z.Link,{eventKey:"react",className:"mb-sm-3 mb-md-0",children:"Code"})})]})}),(0,t.jsx)(c.Z.Body,{className:"p-0",children:(0,t.jsxs)(l.Z.Content,{children:[(0,t.jsx)(l.Z.Pane,{eventKey:"design",className:"pb-4 p-4",children:(0,t.jsxs)(m.Z,{children:[(0,t.jsx)(m.Z.Item,{active:!0,children:"Cras justo odio"}),(0,t.jsx)(m.Z.Item,{children:"Dapibus ac facilisis in"}),(0,t.jsx)(m.Z.Item,{children:"Morbi leo risus"}),(0,t.jsx)(m.Z.Item,{children:"Porta ac consectetur ac"}),(0,t.jsx)(m.Z.Item,{children:"Vestibulum at eros"})]})}),(0,t.jsx)(l.Z.Pane,{eventKey:"react",className:"pb-4 p-4 react-code",children:(0,t.jsx)(I.TU,{code:g})})]})})]})})]})}),(0,t.jsx)("hr",{className:"mb-5 mt-7"}),(0,t.jsx)(a.Z,{children:(0,t.jsxs)(r.Z,{xl:12,lg:12,md:12,sm:12,children:[(0,t.jsxs)("div",{id:"disabled-items",className:"mb-4",children:[(0,t.jsx)("h3",{children:"Disabled Items"}),(0,t.jsxs)("p",{children:["Set the ",(0,t.jsx)("code",{children:"disabled"})," prop to prevent actions on a"," ",(0,t.jsx)("code",{children:"<ListGroup.Item>"}),". For elements that aren't naturally disable-able (like anchors) ",(0,t.jsx)("code",{children:"onClick"})," ","handlers are added that call ",(0,t.jsx)("code",{children:"preventDefault"})," to mimick disabled behavior."]})]}),(0,t.jsx)(l.Z.Container,{defaultActiveKey:"design",children:(0,t.jsxs)(c.Z,{children:[(0,t.jsx)(c.Z.Header,{className:"border-bottom-0 p-0",children:(0,t.jsxs)(d.Z,{className:"nav-lb-tab",children:[(0,t.jsx)(d.Z.Item,{children:(0,t.jsx)(d.Z.Link,{eventKey:"design",className:"mb-sm-3 mb-md-0",children:"Design"})}),(0,t.jsx)(d.Z.Item,{children:(0,t.jsx)(d.Z.Link,{eventKey:"react",className:"mb-sm-3 mb-md-0",children:"Code"})})]})}),(0,t.jsx)(c.Z.Body,{className:"p-0",children:(0,t.jsxs)(l.Z.Content,{children:[(0,t.jsx)(l.Z.Pane,{eventKey:"design",className:"pb-4 p-4",children:(0,t.jsxs)(m.Z,{children:[(0,t.jsx)(m.Z.Item,{disabled:!0,children:"Cras justo odio"}),(0,t.jsx)(m.Z.Item,{children:"Dapibus ac facilisis in"}),(0,t.jsx)(m.Z.Item,{children:"Morbi leo risus"}),(0,t.jsx)(m.Z.Item,{children:"Porta ac consectetur ac"}),(0,t.jsx)(m.Z.Item,{children:"Vestibulum at eros"})]})}),(0,t.jsx)(l.Z.Pane,{eventKey:"react",className:"pb-4 p-4 react-code",children:(0,t.jsx)(I.TU,{code:v})})]})})]})})]})}),(0,t.jsx)("hr",{className:"mb-5 mt-7"}),(0,t.jsx)(a.Z,{children:(0,t.jsxs)(r.Z,{xl:12,lg:12,md:12,sm:12,children:[(0,t.jsxs)("div",{id:"links-and-buttons",className:"mb-4",children:[(0,t.jsx)("h3",{children:"Links and buttons"}),(0,t.jsxs)("p",{children:["Use ",(0,t.jsx)("code",{children:"href"})," and ",(0,t.jsx)("code",{children:"action"})," props to create"," ",(0,t.jsx)("em",{children:"actionable"})," list group items with hover, disabled, and active states."]})]}),(0,t.jsx)(l.Z.Container,{defaultActiveKey:"design",children:(0,t.jsxs)(c.Z,{children:[(0,t.jsx)(c.Z.Header,{className:"border-bottom-0 p-0",children:(0,t.jsxs)(d.Z,{className:"nav-lb-tab",children:[(0,t.jsx)(d.Z.Item,{children:(0,t.jsx)(d.Z.Link,{eventKey:"design",className:"mb-sm-3 mb-md-0",children:"Design"})}),(0,t.jsx)(d.Z.Item,{children:(0,t.jsx)(d.Z.Link,{eventKey:"react",className:"mb-sm-3 mb-md-0",children:"Code"})})]})}),(0,t.jsx)(c.Z.Body,{className:"p-0",children:(0,t.jsxs)(l.Z.Content,{children:[(0,t.jsx)(l.Z.Pane,{eventKey:"design",className:"pb-4 p-4",children:(0,t.jsxs)(m.Z,{defaultActiveKey:"#link1",children:[(0,t.jsx)(m.Z.Item,{action:!0,href:"#link1",active:!0,children:"Cras justo odio"}),(0,t.jsx)(m.Z.Item,{action:!0,href:"#link2",children:"Dapibus ac facilisis in"}),(0,t.jsx)(m.Z.Item,{action:!0,href:"#link3",children:"Morbi leo risus"}),(0,t.jsx)(m.Z.Item,{action:!0,href:"#link4",children:"Porta ac consectetur ac"}),(0,t.jsx)(m.Z.Item,{action:!0,href:"#link5",disabled:!0,children:"Vestibulum at eros"})]})}),(0,t.jsx)(l.Z.Pane,{eventKey:"react",className:"pb-4 p-4 react-code",children:(0,t.jsx)(I.TU,{code:N})})]})})]})})]})}),(0,t.jsx)("hr",{className:"mb-5 mt-7"}),(0,t.jsx)(a.Z,{children:(0,t.jsxs)(r.Z,{xl:12,lg:12,md:12,sm:12,children:[(0,t.jsx)("div",{className:"mb-4",children:(0,t.jsxs)("p",{children:["With ",(0,t.jsx)("code",{children:"onClick"})," function parameter, list group will create ",(0,t.jsx)("code",{children:"<button>"}),"s, you can also make use of the"," ",(0,t.jsx)("code",{children:"disabled"})," and ",(0,t.jsx)("code",{children:"active"})," attributes."]})}),(0,t.jsx)(l.Z.Container,{defaultActiveKey:"design",children:(0,t.jsxs)(c.Z,{children:[(0,t.jsx)(c.Z.Header,{className:"border-bottom-0 p-0",children:(0,t.jsxs)(d.Z,{className:"nav-lb-tab",children:[(0,t.jsx)(d.Z.Item,{children:(0,t.jsx)(d.Z.Link,{eventKey:"design",className:"mb-sm-3 mb-md-0",children:"Design"})}),(0,t.jsx)(d.Z.Item,{children:(0,t.jsx)(d.Z.Link,{eventKey:"react",className:"mb-sm-3 mb-md-0",children:"Code"})})]})}),(0,t.jsx)(c.Z.Body,{className:"p-0",children:(0,t.jsxs)(l.Z.Content,{children:[(0,t.jsx)(l.Z.Pane,{eventKey:"design",className:"pb-4 p-4",children:(0,t.jsxs)(m.Z,{defaultActiveKey:"#link1",children:[(0,t.jsx)(m.Z.Item,{action:!0,onClick:e,active:!0,children:"Cras justo odio"}),(0,t.jsx)(m.Z.Item,{action:!0,onClick:e,children:"Dapibus ac facilisis in"}),(0,t.jsx)(m.Z.Item,{action:!0,onClick:e,children:"Morbi leo risus"}),(0,t.jsx)(m.Z.Item,{action:!0,onClick:e,children:"Porta ac consectetur ac"}),(0,t.jsx)(m.Z.Item,{action:!0,onClick:e,disabled:!0,children:"Vestibulum at eros"})]})}),(0,t.jsx)(l.Z.Pane,{eventKey:"react",className:"pb-4 p-4 react-code",children:(0,t.jsx)(I.TU,{code:G})})]})})]})})]})}),(0,t.jsx)("hr",{className:"mb-5 mt-7"}),(0,t.jsx)(a.Z,{children:(0,t.jsxs)(r.Z,{xl:12,lg:12,md:12,sm:12,children:[(0,t.jsxs)("div",{id:"flush",className:"mb-4",children:[(0,t.jsx)("h3",{children:"Flush"}),(0,t.jsxs)("p",{children:["Add the ",(0,t.jsx)("code",{children:"flush"})," variant to remove outer borders and rounded corners to render list group items edge-to-edge in a parent container such as a Card."]})]}),(0,t.jsx)(l.Z.Container,{defaultActiveKey:"design",children:(0,t.jsxs)(c.Z,{children:[(0,t.jsx)(c.Z.Header,{className:"border-bottom-0 p-0",children:(0,t.jsxs)(d.Z,{className:"nav-lb-tab",children:[(0,t.jsx)(d.Z.Item,{children:(0,t.jsx)(d.Z.Link,{eventKey:"design",className:"mb-sm-3 mb-md-0",children:"Design"})}),(0,t.jsx)(d.Z.Item,{children:(0,t.jsx)(d.Z.Link,{eventKey:"react",className:"mb-sm-3 mb-md-0",children:"Code"})})]})}),(0,t.jsx)(c.Z.Body,{className:"p-0",children:(0,t.jsxs)(l.Z.Content,{children:[(0,t.jsx)(l.Z.Pane,{eventKey:"design",className:"pb-4 p-4",children:(0,t.jsxs)(m.Z,{variant:"flush",children:[(0,t.jsx)(m.Z.Item,{children:"Cras justo odio"}),(0,t.jsx)(m.Z.Item,{children:"Dapibus ac facilisis in"}),(0,t.jsx)(m.Z.Item,{children:"Morbi leo risus"}),(0,t.jsx)(m.Z.Item,{children:"Porta ac consectetur ac"}),(0,t.jsx)(m.Z.Item,{children:"Vestibulum at eros"})]})}),(0,t.jsx)(l.Z.Pane,{eventKey:"react",className:"pb-4 p-4 react-code",children:(0,t.jsx)(I.TU,{code:f})})]})})]})})]})}),(0,t.jsx)("hr",{className:"mb-5 mt-7"}),(0,t.jsx)(a.Z,{children:(0,t.jsxs)(r.Z,{xl:12,lg:12,md:12,sm:12,children:[(0,t.jsxs)("div",{id:"horizontal",className:"mb-4",children:[(0,t.jsx)("h3",{children:"Horizontal"}),(0,t.jsxs)("p",{children:["Use the ",(0,t.jsx)("code",{children:"horizontal"})," prop to make the ListGroup render horizontally. Currently"," ",(0,t.jsx)("strong",{children:"horizontal list groups cannot be combined with flush list groups."})]})]}),(0,t.jsx)(l.Z.Container,{defaultActiveKey:"design",children:(0,t.jsxs)(c.Z,{children:[(0,t.jsx)(c.Z.Header,{className:"border-bottom-0 p-0",children:(0,t.jsxs)(d.Z,{className:"nav-lb-tab",children:[(0,t.jsx)(d.Z.Item,{children:(0,t.jsx)(d.Z.Link,{eventKey:"design",className:"mb-sm-3 mb-md-0",children:"Design"})}),(0,t.jsx)(d.Z.Item,{children:(0,t.jsx)(d.Z.Link,{eventKey:"react",className:"mb-sm-3 mb-md-0",children:"Code"})})]})}),(0,t.jsx)(c.Z.Body,{className:"p-0",children:(0,t.jsxs)(l.Z.Content,{children:[(0,t.jsx)(l.Z.Pane,{eventKey:"design",className:"pb-4 p-4",children:(0,t.jsxs)(m.Z,{horizontal:!0,children:[(0,t.jsx)(m.Z.Item,{children:"Cras justo odio"}),(0,t.jsx)(m.Z.Item,{children:"Dapibus ac facilisis in"}),(0,t.jsx)(m.Z.Item,{children:"Morbi leo risus"})]})}),(0,t.jsx)(l.Z.Pane,{eventKey:"react",className:"pb-4 p-4 react-code",children:(0,t.jsx)(I.TU,{code:y})})]})})]})})]})}),(0,t.jsx)(a.Z,{children:(0,t.jsxs)(r.Z,{xl:12,lg:12,md:12,sm:12,children:[(0,t.jsx)("div",{id:"horizontal",className:"mb-4 mt-4",children:(0,t.jsxs)("p",{children:[(0,t.jsx)("strong",{children:"ProT
1ip:"})," Want equal-width list group items when horizontal? Add ",(0,t.jsx)("code",{children:".flex-fill"})," to each list group item."]})}),(0,t.jsx)(l.Z.Container,{defaultActiveKey:"design",children:(0,t.jsxs)(c.Z,{children:[(0,t.jsx)(c.Z.Header,{className:"border-bottom-0 p-0",children:(0,t.jsxs)(d.Z,{className:"nav-lb-tab",children:[(0,t.jsx)(d.Z.Item,{children:(0,t.jsx)(d.Z.Link,{eventKey:"design",className:"mb-sm-3 mb-md-0",children:"Design"})}),(0,t.jsx)(d.Z.Item,{children:(0,t.jsx)(d.Z.Link,{eventKey:"react",className:"mb-sm-3 mb-md-0",children:"Code"})})]})}),(0,t.jsx)(c.Z.Body,{className:"p-0",children:(0,t.jsxs)(l.Z.Content,{children:[(0,t.jsx)(l.Z.Pane,{eventKey:"design",className:"pb-4 p-4",children:(0,t.jsxs)(m.Z,{horizontal:!0,children:[(0,t.jsx)(m.Z.Item,{className:"flex-fill",children:"Cras justo odio"}),(0,t.jsx)(m.Z.Item,{className:"flex-fill",children:"Dapibus ac facilisis in"}),(0,t.jsx)(m.Z.Item,{className:"flex-fill",children:"Morbi leo risus"})]})}),(0,t.jsx)(l.Z.Pane,{eventKey:"react",className:"pb-4 p-4 react-code",children:(0,t.jsx)(I.TU,{code:C})})]})})]})})]})}),(0,t.jsx)("hr",{className:"mb-5 mt-7"}),(0,t.jsx)(a.Z,{children:(0,t.jsxs)(r.Z,{xl:12,lg:12,md:12,sm:12,children:[(0,t.jsxs)("div",{id:"contextual-classes",className:"mb-4",children:[(0,t.jsx)("h3",{children:"Contextual classes"}),(0,t.jsxs)("p",{children:["Use contextual ",(0,t.jsx)("code",{children:"variant"}),"s on"," ",(0,t.jsx)("code",{children:"<ListGroup.Item>"}),"s to style them with a stateful background and color."]})]}),(0,t.jsx)(l.Z.Container,{defaultActiveKey:"design",children:(0,t.jsxs)(c.Z,{children:[(0,t.jsx)(c.Z.Header,{className:"border-bottom-0 p-0",children:(0,t.jsxs)(d.Z,{className:"nav-lb-tab",children:[(0,t.jsx)(d.Z.Item,{children:(0,t.jsx)(d.Z.Link,{eventKey:"design",className:"mb-sm-3 mb-md-0",children:"Design"})}),(0,t.jsx)(d.Z.Item,{children:(0,t.jsx)(d.Z.Link,{eventKey:"react",className:"mb-sm-3 mb-md-0",children:"Code"})})]})}),(0,t.jsx)(c.Z.Body,{className:"p-0",children:(0,t.jsxs)(l.Z.Content,{children:[(0,t.jsx)(l.Z.Pane,{eventKey:"design",className:"pb-4 p-4",children:(0,t.jsxs)(m.Z,{children:[(0,t.jsx)(m.Z.Item,{children:"Dapibus ac facilisis in"}),(0,t.jsx)(m.Z.Item,{variant:"primary",children:"This is a Primary list group item"}),(0,t.jsx)(m.Z.Item,{variant:"secondary",children:"This is a Secondary list group item"}),(0,t.jsx)(m.Z.Item,{variant:"success",children:"This is a Success list group item"}),(0,t.jsx)(m.Z.Item,{variant:"danger",children:"This is a Danger list group item"}),(0,t.jsx)(m.Z.Item,{variant:"warning",children:"This is a Warning list group item"}),(0,t.jsx)(m.Z.Item,{variant:"info",children:"This is a Info list group item"}),(0,t.jsx)(m.Z.Item,{variant:"light",children:"This is a Light list group item"}),(0,t.jsx)(m.Z.Item,{variant:"dark",children:"This is a Dark list group item"})]})}),(0,t.jsx)(l.Z.Pane,{eventKey:"react",className:"pb-4 p-4 react-code",children:(0,t.jsx)(I.TU,{code:k})})]})})]})})]})}),(0,t.jsx)("hr",{className:"mb-5 mt-7"}),(0,t.jsx)(a.Z,{children:(0,t.jsxs)(r.Z,{xl:12,lg:12,md:12,sm:12,children:[(0,t.jsxs)("div",{id:"with-badges",className:"mb-4",children:[(0,t.jsx)("h3",{children:"With badges"}),(0,t.jsxs)("p",{children:["Add ",(0,t.jsx)("code",{children:"<Badge>"})," to any list group item to show unread counts, activity, and more with the help of some utilities."]})]}),(0,t.jsx)(l.Z.Container,{defaultActiveKey:"design",children:(0,t.jsxs)(c.Z,{children:[(0,t.jsx)(c.Z.Header,{className:"border-bottom-0 p-0",children:(0,t.jsxs)(d.Z,{className:"nav-lb-tab",children:[(0,t.jsx)(d.Z.Item,{children:(0,t.jsx)(d.Z.Link,{eventKey:"design",className:"mb-sm-3 mb-md-0",children:"Design"})}),(0,t.jsx)(d.Z.Item,{children:(0,t.jsx)(d.Z.Link,{eventKey:"react",className:"mb-sm-3 mb-md-0",children:"Code"})})]})}),(0,t.jsx)(c.Z.Body,{className:"p-0",children:(0,t.jsxs)(l.Z.Content,{children:[(0,t.jsx)(l.Z.Pane,{eventKey:"design",className:"pb-4 p-4",children:(0,t.jsxs)(m.Z,{children:[(0,t.jsxs)(m.Z.Item,{className:"d-flex justify-content-between",children:["Cras justo odio ",(0,t.jsx)(o.Z,{bg:"primary",children:"14"})," "]}),(0,t.jsxs)(m.Z.Item,{className:"d-flex justify-content-between",children:["Dapibus ac facilisis in ",(0,t.jsx)(o.Z,{bg:"primary",children:"2"})]}),(0,t.jsxs)(m.Z.Item,{className:"d-flex justify-content-between",children:["Morbi leo risus ",(0,t.jsx)(o.Z,{bg:"primary",children:"1"})]})]})}),(0,t.jsx)(l.Z.Pane,{eventKey:"react",className:"pb-4 p-4 react-code",children:(0,t.jsx)(I.TU,{code:K})})]})})]})})]})}),(0,t.jsx)("hr",{className:"mb-5 mt-7"}),(0,t.jsx)(a.Z,{children:(0,t.jsxs)(r.Z,{xl:12,lg:12,md:12,sm:12,children:[(0,t.jsxs)("div",{id:"custom-content",className:"mb-4",children:[(0,t.jsx)("h3",{children:"Custom content"}),(0,t.jsx)("p",{children:"Add nearly any HTML within, even for linked list groups like the one below, with the help of flexbox utilities."})]}),(0,t.jsx)(l.Z.Container,{defaultActiveKey:"design",children:(0,t.jsxs)(c.Z,{children:[(0,t.jsx)(c.Z.Header,{className:"border-bottom-0 p-0",children:(0,t.jsxs)(d.Z,{className:"nav-lb-tab",children:[(0,t.jsx)(d.Z.Item,{children:(0,t.jsx)(d.Z.Link,{eventKey:"design",className:"mb-sm-3 mb-md-0",children:"Design"})}),(0,t.jsx)(d.Z.Item,{children:(0,t.jsx)(d.Z.Link,{eventKey:"react",className:"mb-sm-3 mb-md-0",children:"Code"})})]})}),(0,t.jsx)(c.Z.Body,{className:"p-0",children:(0,t.jsxs)(l.Z.Content,{children:[(0,t.jsx)(l.Z.Pane,{eventKey:"design",className:"pb-4 p-4",children:(0,t.jsxs)(m.Z,{defaultActiveKey:"#link1",children:[(0,t.jsxs)(m.Z.Item,{action:!0,href:"#link1",active:!0,children:[(0,t.jsxs)("div",{className:"d-flex w-100 justify-content-between",children:[(0,t.jsx)("h5",{className:"mb-1",children:"List group item heading"}),(0,t.jsx)("small",{children:"3 days ago"})]}),(0,t.jsx)("p",{className:"mb-1",children:"Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit."}),(0,t.jsx)("small",{children:"Donec id elit non mi porta."})]}),(0,t.jsxs)(m.Z.Item,{action:!0,href:"#link2",children:[(0,t.jsxs)("div",{className:"d-flex w-100 justify-content-between",children:[(0,t.jsx)("h5",{className:"mb-1",children:"List group item heading"}),(0,t.jsx)("small",{children:"3 days ago"})]}),(0,t.jsx)("p",{className:"mb-1",children:"Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit."}),(0,t.jsx)("small",{children:"Donec id elit non mi porta."})]}),(0,t.jsxs)(m.Z.Item,{action:!0,href:"#link3",children:[(0,t.jsxs)("div",{className:"d-flex w-100 justify-content-between",children:[(0,t.jsx)("h5",{className:"mb-1",children:"List group item heading"}),(0,t.jsx)("small",{children:"3 days ago"})]}),(0,t.jsx)("p",{className:"mb-1",children:"Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit."}),(0,t.jsx)("small",{children:"Donec id elit non mi porta."})]})]})}),(0,t.jsx)(l.Z.Pane,{eventKey:"react",className:"pb-4 p-4 react-code",children:(0,t.jsx)(I.TU,{code:D})})]})})]})})]})}),(0,t.jsx)("hr",{className:"mb-5 mt-7"}),(0,t.jsx)(a.Z,{children:(0,t.jsxs)(r.Z,{xl:12,lg:12,md:12,sm:12,children:[(0,t.jsx)("div",{id:"withIcon",className:"mb-4",children:(0,t.jsx)("h3",{className:"mb-0",children:"List Group with Icon"})}),(0,t.jsx)(l.Z.Container,{defaultActiveKey:"design",children:(0,t.jsxs)(c.Z,{children:[(0,t.jsx)(c.Z.Header,{className:"border-bottom-0 p-0",children:(0,t.jsxs)(d.Z,{className:"nav-lb-tab",children:[(0,t.jsx)(d.Z.Item,{children:(0,t.jsx)(d.Z.Link,{eventKey:"design",className:"mb-sm-3 mb-md-0",children:"Design"})}),(0,t.jsx)(d.Z.Item,{children:(0,t.jsx)(d.Z.Link,{eventKey:"react",className:"mb-sm-3 mb-md-0",children:"Code"})})]})}),(0,t.jsx)(c.Z.Body,{className:"p-0",children:(0,t.jsxs)(l.Z.Content,{children:[(0,t.jsx)(l.Z.Pane,{eventKey:"design",className:"pb-4 p-4",children:(0,t.jsxs)(m.Z,{variant:"flush",children:[(0,t.jsxs)(m.Z.Item,{children:[(0,t.jsx)(x.Z,{size:"15px",className:"align-middle me-2 text-primary"}),"12 hours video"]}),(0,t.jsxs)(m.Z.Item,{children:[(0,t.jsx)(u.Z,{size:"15px",className:"align-middle me-2 text-success"}),"Certificate"]}),(0,t.jsxs)(m.Z.Item,{children:[(0,t.jsx)(j.Z,{size:"15px",className:"align-middle me-2 text-info"}),"12 Article"]}),(0,t.jsxs)(m.Z.Item,{children:[(0,t.jsx)(p.Z,{size:"15px",className:"align-middle me-2 text-secondary"}),"Watch Offline"]}),(0,t.jsxs)(m.Z.Item,{children:[(0,t.jsx)(b.Z,{size:"15px",className:"align-middle me-2 text-warning"}),"Lifetime access"]})]})}),(0,t.jsx)(l.Z.Pane,{eventKey:"react",className:"pb-4 p-4 react-code",children:(0,t.jsx)(I.TU,{code:P})})]})})]})})]})}),(0,t.jsx)("hr",{className:"mb-5 mt-7"}),(0,t.jsx)(a.Z,{children:(0,t.jsxs)(r.Z,{xl:12,lg:12,md:12,sm:12,children:[(0,t.jsx)("div",{id:"simpleList",className:"mb-4",children:(0,t.jsx)("h3",{className:"mb-0",children:"List with Data"})}),(0,t.jsx)(l.Z.Container,{defaultActiveKey:"design",children:(0,t.jsxs)(c.Z,{children:[(0,t.jsx)(c.Z.Header,{className:"border-bottom-0 p-0",children:(0,t.jsxs)(d.Z,{className:"nav-lb-tab",children:[(0,t.jsx)(d.Z.Item,{children:(0,t.jsx)(d.Z.Link,{eventKey:"design",className:"mb-sm-3 mb-md-0",children:"Design"})}),(0,t.jsx)(d.Z.Item,{children:(0,t.jsx)(d.Z.Link,{eventKey:"react",className:"mb-sm-3 mb-md-0",children:"Code"})})]})}),(0,t.jsx)(c.Z.Body,{className:"p-0",children:(0,t.jsxs)(l.Z.Content,{children:[(0,t.jsx)(l.Z.Pane,{eventKey:"design",className:"pb-4 p-4",children:(0,t.jsxs)(m.Z,{variant:"flush",children:[(0,t.jsxs)(m.Z.Item,{children:[(0,t.jsx)("span",{children:"Post ID"}),(0,t.jsx)("h5",{children:"8693637308"})]}),(0,t.jsxs)(m.Z.Item,{children:[(0,t.jsx)("span",{children:"Status"}),(0,t.jsx)("h5",{children:(0,t.jsx)(Z.Z,{bg:"success",children:"Published (unsaved changes)"})})]}),(0,t.jsxs)(m.Z.Item,{children:[(0,t.jsx)("span",{children:"Created by"}),(0,t.jsxs)("div",{className:"d-flex mt-2",children:[(0,t.jsx)(h.Z,{src:"/images/avatar/avatar-1.jpg",alt:"",className:"avatar-sm rounded-circle"}),(0,t.jsxs)("div",{className:"ms-2",children:[(0,t.jsx)("h5",{className:"mb-n1",children:"Geeks Courses"}),(0,t.jsx)("small",{children:"Admin"})]})]})]}),(0,t.jsxs)(m.Z.Item,{children:[(0,t.jsx)("span",{children:"Created at"}),(0,t.jsx)("h5",{children:"Jul 30, 2:21 PM"})]}),(0,t.jsxs)(m.Z.Item,{children:[(0,t.jsx)("span",{children:"First published at"}),(0,t.jsx)("h5",{children:"Jul 30, 2:21 PM"})]}),(0,t.jsxs)(m.Z.Item,{children:[(0,t.jsx)("span",{children:"Last update"}),(0,t.jsx)("h5",{children:"Aug 31, 12:21 PM"})]}),(0,t.jsxs)(m.Z.Item,{children:[(0,t.jsx)("span",{children:"Last Published"}),(0,t.jsx)("h5",{children:"Aug 31, 12:21 PM"})]})]})}),(0,t.jsx)(l.Z.Pane,{eventKey:"react",className:"pb-4 p-4 react-code",children:(0,t.jsx)(I.TU,{code:w})})]})})]})})]})})]})}}},function(e){e.O(0,[5129,2888,9774,179],function(){return e(e.s=10567)}),_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.