1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[9679],{5963:function(e,t,n){"use strict";n.d(t,{W:function(){return h}});var s=n(7294),a=n(6626),i=n(7126),r=n(7514),d=n(5893);let l=["active","eventKey","mountOnEnter","transition","unmountOnExit","role","onEnter","onEntering","onEntered","onExit","onExiting","onExited"],c=["activeKey","getControlledId","getControllerId"],o=["as"];function m(e,t){if(null==e)return{};var n,s,a={},i=Object.keys(e);for(s=0;s<i.length;s++)n=i[s],t.indexOf(n)>=0||(a[n]=e[n]);return a}function h(e){let{active:t,eventKey:n,mountOnEnter:r,transition:d,unmountOnExit:o,role:h="tabpanel",onEnter:x,onEntering:j,onEntered:p,onExit:u,onExiting:b,onExited:Z}=e,C=m(e,l),y=(0,s.useContext)(a.Z);if(!y)return[Object.assign({},C,{role:h}),{eventKey:n,isActive:t,mountOnEnter:r,transition:d,unmountOnExit:o,onEnter:x,onEntering:j,onEntered:p,onExit:u,onExiting:b,onExited:Z}];let{activeKey:g,getControlledId:v,getControllerId:N}=y,T=m(y,c),f=(0,i.h)(n);return[Object.assign({},C,{role:h,id:v(n),"aria-labelledby":N(n)}),{eventKey:n,isActive:null==t&&null!=f?(0,i.h)(g)===f:t,transition:d||T.transition,mountOnEnter:null!=r?r:T.mountOnEnter,unmountOnExit:null!=o?o:T.unmountOnExit,onEnter:x,onEntering:j,onEntered:p,onExit:u,onExiting:b,onExited:Z}]}let x=s.forwardRef((e,t)=>{let{as:n="div"}=e,s=m(e,o),[l,{isActive:c,onEnter:x,onEntering:j,onEntered:p,onExit:u,onExiting:b,onExited:Z,mountOnEnter:C,unmountOnExit:y,transition:g=r.Z}]=h(s);return(0,d.jsx)(a.Z.Provider,{value:null,children:(0,d.jsx)(i.Z.Provider,{value:null,children:(0,d.jsx)(g,{in:c,onEnter:x,onEntering:j,onEntered:p,onExit:u,onExiting:b,onExited:Z,mountOnEnter:C,unmountOnExit:y,children:(0,d.jsx)(n,Object.assign({},l,{ref:t,hidden:!c,"aria-hidden":!c}))})})})});x.displayName="TabPanel",t.Z=x},3916:function(e,t,n){"use strict";var s=n(7294),a=n(7121),i=n(6769),r=n(6626),d=n(7126),l=n(5963),c=n(5893);let o=e=>{let{id:t,generateChildId:n,onSelect:l,activeKey:o,defaultActiveKey:m,transition:h,mountOnEnter:x,unmountOnExit:j,children:p}=e,[u,b]=(0,a.$c)(o,m,l),Z=(0,i.gP)(t),C=(0,s.useMemo)(()=>n||((e,t)=>Z?`${Z}-${t}-${e}`:null),[Z,n]),y=(0,s.useMemo)(()=>({onSelect:b,activeKey:u,transition:h,mountOnEnter:x||!1,unmountOnExit:j||!1,getControlledId:e=>C(e,"tabpane"),getControllerId:e=>C(e,"tab")}),[b,u,h,x,j,C]);return(0,c.jsx)(r.Z.Provider,{value:y,children:(0,c.jsx)(d.Z.Provider,{value:b||null,children:p})})};o.Panel=l.Z,t.Z=o},9871:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/components/cards",function(){return n(9474)}])},9474:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return k}});var s=n(5893);n(7294);var a=n(682),i=n(4051),r=n(1555),d=n(3192),l=n(8182),c=n(834),o=n(5005),m=n(6714),h=n(6518),x=n(8395);let j=' \n<Card style={{ width: \'18rem\' }}>\n <Card.Img variant="top" src="https://fakeimg.pl/640x360/?text=Image Placeholder" />\n <Card.Body>\n <Card.Title>Card Title</Card.Title>\n <Card.Text>\n Some quick example text to build on the card title and make up the bulk of the card\'s content.\n </Card.Text>\n <Button variant="primary">Go somewhere</Button>\n </Card.Body>\n</Card>\n'.trim(),p=" \n<Card>\n <Card.Body>This is some text within a card body.</Card.Body>\n</Card>\n".trim(),u=' \n<Card style={{ width: \'18rem\' }}>\n <Card.Body>\n <Card.Title>Card Title</Card.Title>\n <Card.Subtitle className="mb-2 text-muted">Card Subtitle</Card.Subtitle>\n <Card.Text>\n Some quick example text to build on the card title and make up the bulk of the card\'s content.\n </Card.Text>\n <Card.Link href="#">Card Link</Card.Link>\n <Card.Link href="#">Another Link</Card.Link>\n </Card.Body>\n</Card>\n'.trim(),b=" \n<Card style={{ width: '18rem' }}>\n <ListGroup variant=\"flush\">\n <ListGroup.Item>Cras justo odio</ListGroup.Item>\n <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>\n <ListGroup.Item>Vestibulum at eros</ListGroup.Item>\n </ListGroup>\n</Card>\n".trim(),Z=" \n<Card style={{ width: '18rem' }}>\n <Card.Header>Featured</Card.Header>\n <ListGroup variant=\"flush\">\n <ListGroup.Item>Cras justo odio</ListGroup.Item>\n <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>\n <ListGroup.Item>Vestibulum at eros</ListGroup.Item>\n </ListGroup>\n</Card>\n".trim(),C=' \n<Card style={{ width: \'18rem\' }}>\n <Card.Img variant="top" src="https://fakeimg.pl/640x360/?text=Image Placeholder" />\n <Card.Body>\n <Card.Text>\n Some quick example text to build on the card title and make up the bulk of the card\'s content.\n </Card.Text>\n </Card.Body>\n</Card>\n'.trim(),y=' \n<Card style={{ width: \'18rem\' }}>\n <Card.Img variant="top" src="https://fakeimg.pl/640x360/?text=Image Placeholder" />\n <Card.Body>\n <Card.Title>Card Title</Card.Title>\n <Card.Text>\n Some quick example text to build on the card title and make up the bulk of the card\'s content.\n </Card.Text>\n </Card.Body>\n <ListGroup className="list-group-flush">\n <ListGroupItem>Cras justo odio</ListGroupItem>\n <ListGroupItem>Dapibus ac facilisis in</ListGroupItem>\n <ListGroupItem>Vestibulum at eros</ListGroupItem>\n </ListGroup>\n <Card.Body>\n <Card.Link href="#">Card Link</Card.Link>\n <Card.Link href="#">Another Link</Card.Link>\n </Card.Body>\n</Card>\n'.trim(),g=' \n<Card>\n <Card.Header>Featured</Card.Header>\n <Card.Body>\n <Card.Title>Special title treatment</Card.Title>\n <Card.Text>
1\n With supporting text below as a natural lead-in to additional content.\n </Card.Text>\n <Button variant="primary">Go somewhere</Button>\n </Card.Body>\n</Card>\n'.trim(),v=' \n<Card className="text-center">\n <Card.Header>Featured</Card.Header>\n <Card.Body>\n <Card.Title>Special title treatment</Card.Title>\n <Card.Text>\n With supporting text below as a natural lead-in to additional content.\n </Card.Text>\n <Button variant="primary">Go somewhere</Button>\n </Card.Body>\n <Card.Footer className="text-muted">2 days ago</Card.Footer>\n</Card>\n'.trim(),N=' \n<Card style={{ width: \'18rem\' }}>\n <Card.Body>\n <Card.Title>Special title treatment</Card.Title>\n <Card.Text>\n With supporting text below as a natural lead-in to additional content.\n </Card.Text>\n <Button variant="primary">Go somewhere</Button>\n </Card.Body>\n</Card>\n\n<Card style={{ width: \'18rem\' }} className="text-center">\n <Card.Body>\n <Card.Title>Special title treatment</Card.Title>\n <Card.Text>\n With supporting text below as a natural lead-in to additional content.\n </Card.Text>\n <Button variant="primary">Go somewhere</Button>\n </Card.Body>\n</Card>\n\n<Card style={{ width: \'18rem\' }} className="text-end">\n <Card.Body>\n <Card.Title>Special title treatment</Card.Title>\n <Card.Text>\n With supporting text below as a natural lead-in to additional content.\n </Card.Text>\n <Button variant="primary">Go somewhere</Button>\n </Card.Body>\n</Card>\n'.trim(),T=' \n<Card>\n <Card.Img variant="top" src="https://fakeimg.pl/640x360/?text=Image Placeholder" />\n <Card.Body>\n <Card.Title>Card title</Card.Title>\n <Card.Text>\n This is a wider card with supporting text below as a natural lead-in to\n additional content. This content is a little bit longer.\n </Card.Text>\n <Card.Text>\n <small className="text-muted">Last updated 3 mins ago</small>\n </Card.Text>\n </Card.Body>\n</Card>\n<br />\n<Card>\n <Card.Body>\n <Card.Title>Card title</Card.Title>\n <Card.Text>\n This is a wider card with supporting text below as a natural lead-in to\n additional content. This content is a little bit longer.\n </Card.Text>\n <Card.Text>\n <small className="text-muted">Last updated 3 mins ago</small>\n </Card.Text>\n </Card.Body>\n <Card.Img variant="bottom" src="https://fakeimg.pl/640x360/?text=Image Placeholder" />\n</Card>\n'.trim(),f=' \n<Card className="bg-dark text-white">\n <Card.Img variant="bottom" src="https://fakeimg.pl/640x360/?text=Image Placeholder" />\n <Card.ImgOverlay>\n <Card.Title>Card title</Card.Title>\n <Card.Text>\n This is a wider card with supporting text below as a natural lead-in to\n additional content. This content is a little bit longer.\n </Card.Text>\n <Card.Text>Last updated 3 mins ago</Card.Text>\n </Card.ImgOverlay>\n</Card>\n'.trim(),w=()=>(0,s.jsxs)(a.Z,{fluid:!0,className:"p-6",children:[(0,s.jsx)(i.Z,{children:(0,s.jsx)(r.Z,{lg:12,md:12,sm:12,children:(0,s.jsx)("div",{className:"border-bottom pb-4 mb-4 d-md-flex align-items-center justify-content-between",children:(0,s.jsxs)("div",{className:"mb-3 mb-md-0",children:[(0,s.jsx)("h1",{className:"mb-1 h2 fw-bold",children:"Cards"}),(0,s.jsx)("p",{className:"mb-0 ",children:"Geek's cards provide a flexible and extensible content container with multiple variants and options."})]})})})}),(0,s.jsx)(i.Z,{children:(0,s.jsxs)(r.Z,{xl:12,lg:12,md:12,sm:12,children:[(0,s.jsxs)("div",{id:"card",className:"mb-4",children:[(0,s.jsx)("h3",{children:"Basic Example"}),(0,s.jsx)("p",{className:"mb-0",children:"Below is an example of a basic card with mixed content and a fixed width."})]}),(0,s.jsx)(d.Z.Container,{defaultActiveKey:"design",children:(0,s.jsxs)(l.Z,{children:[(0,s.jsx)(l.Z.Header,{className:"border-bottom-0 p-0 ",children:(0,s.jsxs)(c.Z,{className:"nav-lb-tab",children:[(0,s.jsx)(c.Z.Item,{children:(0,s.jsx)(c.Z.Link,{eventKey:"design",className:"mb-sm-3 mb-md-0",children:"Design"})}),(0,s.jsx)(c.Z.Item,{children:(0,s.jsx)(c.Z.Link,{eventKey:"react",className:"mb-sm-3 mb-md-0",children:"Code"})})]})}),(0,s.jsx)(l.Z.Body,{className:"p-0",children:(0,s.jsxs)(d.Z.Content,{children:[(0,s.jsx)(d.Z.Pane,{eventKey:"design",className:"pb-4 p-4",children:(0,s.jsxs)(l.Z,{style:{width:"18rem"},children:[(0,s.jsx)(l.Z.Img,{variant:"top",src:"/images/placeholder/placeholder-4by3.svg"}),(0,s.jsxs)(l.Z.Body,{children:[(0,s.jsx)(l.Z.Title,{children:"Card Title"}),(0,s.jsx)(l.Z.Text,{children:"Some quick example text to build on the card title and make up the bulk of the card's content."}),(0,s.jsx)(o.Z,{variant:"primary",children:"Go somewhere"})]})]})}),(0,s.jsx)(d.Z.Pane,{eventKey:"react",className:"pb-4 p-4 react-code",children:(0,s.jsx)(x.TU,{code:j})})]})})]})})]})}),(0,s.jsx)("hr",{className:"mb-5 mt-7"}),(0,s.jsx)(i.Z,{children:(0,s.jsxs)(r.Z,{xl:12,lg:12,md:12,sm:12,children:[(0,s.jsx)("div",{id:"content-types",className:"mb-4",children:(0,s.jsxs)("div",{className:"mt-3",id:"body",children:[(0,s.jsx)("h3",{children:"Card Body"}),(0,s.jsxs)("p",{children:["Use ",(0,s.jsx)("code",{children:"<Card.Body>"})," to pad content inside a"," ",(0,s.jsx)("code",{children:"<Card>"}),"."]})]})}),(0,s.jsx)(d.Z.Container,{defaultActiveKey:"design",children:(0,s.jsxs)(l.Z,{children:[(0,s.jsx)(l.Z.Header,{className:"border-bottom-0 p-0 ",children:(0,s.jsxs)(c.Z,{className:"nav-lb-tab",children:[(0,s.jsx)(c.Z.Item,{children:(0,s.jsx)(c.Z.Link,{eventKey:"design",className:"mb-sm-3 mb-md-0",children:"Design"})}),(0,s.jsx)(c.Z.Item,{children:(0,s.jsx)(c.Z.Link,{eventKey:"react",className:"mb-sm-3 mb-md-0",children:"Code"})})]})}),(0,s.jsx)(l.Z.Body,{className:"p-0",children:(0,s.jsxs)(d.Z.Content,{children:[(0,s.jsx)(d.Z.Pane,{eventKey:"design",className:"pb-4 p-4",children:(0,s.jsx)(l.Z,{children:(0,s.jsx)(l.Z.Body,{children:"This is some text within a card body."})})}),(0,s.jsx)(d.Z.Pane,{eventKey:"react",className:"pb-4 p-4 react-code",children:(0,s.jsx)(x.TU,{code:p})})]})})]})})]})}),(0,s.jsx)("hr",{className:"mb-5 mt-7"}),(0,s.jsx)(i.Z,{children:(0,s.jsxs)(r.Z,{xl:12,lg:12,md:12,sm:12,children:[(0,s.jsxs)("div",{id:"titles-text-links",className:"mb-4",children:[(0,s.jsx)("h3",{children:"Titles, text, and links"}),(0,s.jsxs)("p",{children:["Using ",(0,s.jsx)("code",{children:"<Card.Title>"}),","," ",(0,s.jsx)("code",{children:"<Card.Subtitle>"}),", and"," ",(0,s.jsx)("code",{children:"<Card.Text>"})," inside the"," ",(0,s.jsx)("code",{children:"<Card.Body>"})," will line them up nicely."," ",(0,s.jsx)("code",{children:"<Card.Link>"}),"s are used to line up links next to each other."]}
1),(0,s.jsxs)("p",{children:[" ",(0,s.jsx)("code",{children:"<Card.Text>"})," outputs ",(0,s.jsx)("code",{children:"<p>"})," tags around the content, so you can use multiple"," ",(0,s.jsx)("code",{children:"<Card.Text>"}),"s to create separate paragraphs."]})]}),(0,s.jsx)(d.Z.Container,{defaultActiveKey:"design",children:(0,s.jsxs)(l.Z,{children:[(0,s.jsx)(l.Z.Header,{className:"border-bottom-0 p-0 ",children:(0,s.jsxs)(c.Z,{className:"nav-lb-tab",children:[(0,s.jsx)(c.Z.Item,{children:(0,s.jsx)(c.Z.Link,{eventKey:"design",className:"mb-sm-3 mb-md-0",children:"Design"})}),(0,s.jsx)(c.Z.Item,{children:(0,s.jsx)(c.Z.Link,{eventKey:"react",className:"mb-sm-3 mb-md-0",children:"Code"})})]})}),(0,s.jsx)(l.Z.Body,{className:"p-0",children:(0,s.jsxs)(d.Z.Content,{children:[(0,s.jsx)(d.Z.Pane,{eventKey:"design",className:"pb-4 p-4",children:(0,s.jsx)(l.Z,{style:{width:"18rem"},children:(0,s.jsxs)(l.Z.Body,{children:[(0,s.jsx)(l.Z.Title,{children:"Card Title"}),(0,s.jsx)(l.Z.Subtitle,{className:"mb-2 text-muted",children:"Card Subtitle"}),(0,s.jsx)(l.Z.Text,{children:"Some quick example text to build on the card title and make up the bulk of the card's content."}),(0,s.jsx)(l.Z.Link,{href:"#",children:"Card Link"}),(0,s.jsx)(l.Z.Link,{href:"#",children:"Another Link"})]})})}),(0,s.jsx)(d.Z.Pane,{eventKey:"react",className:"pb-4 p-4 react-code",children:(0,s.jsx)(x.TU,{code:u})})]})})]})})]})}),(0,s.jsx)("hr",{className:"mb-5 mt-7"}),(0,s.jsx)(i.Z,{children:(0,s.jsxs)(r.Z,{xl:12,lg:12,md:12,sm:12,children:[(0,s.jsxs)("div",{id:"list-groups",className:"mb-4",children:[(0,s.jsx)("h3",{children:"List Groups"}),(0,s.jsx)("p",{children:"Create lists of content in a card with a flush list group."})]}),(0,s.jsx)(d.Z.Container,{defaultActiveKey:"design",children:(0,s.jsxs)(l.Z,{children:[(0,s.jsx)(l.Z.Header,{className:"border-bottom-0 p-0 ",children:(0,s.jsxs)(c.Z,{className:"nav-lb-tab",children:[(0,s.jsx)(c.Z.Item,{children:(0,s.jsx)(c.Z.Link,{eventKey:"design",className:"mb-sm-3 mb-md-0",children:"Design"})}),(0,s.jsx)(c.Z.Item,{children:(0,s.jsx)(c.Z.Link,{eventKey:"react",className:"mb-sm-3 mb-md-0",children:"Code"})})]})}),(0,s.jsx)(l.Z.Body,{className:"p-0",children:(0,s.jsxs)(d.Z.Content,{children:[(0,s.jsx)(d.Z.Pane,{eventKey:"design",className:"pb-4 p-4",children:(0,s.jsx)(l.Z,{style:{width:"18rem"},children:(0,s.jsxs)(m.Z,{variant:"flush",children:[(0,s.jsx)(m.Z.Item,{children:"Cras justo odio"}),(0,s.jsx)(m.Z.Item,{children:"Dapibus ac facilisis in"}),(0,s.jsx)(m.Z.Item,{children:"Vestibulum at eros"})]})})}),(0,s.jsx)(d.Z.Pane,{eventKey:"react",className:"pb-4 p-4 react-code",children:(0,s.jsx)(x.TU,{code:b})})]})})]})}),(0,s.jsx)("br",{}),(0,s.jsx)(d.Z.Container,{defaultActiveKey:"design",children:(0,s.jsxs)(l.Z,{children:[(0,s.jsx)(l.Z.Header,{className:"border-bottom-0 p-0 ",children:(0,s.jsxs)(c.Z,{className:"nav-lb-tab",children:[(0,s.jsx)(c.Z.Item,{children:(0,s.jsx)(c.Z.Link,{eventKey:"design",className:"mb-sm-3 mb-md-0",children:"Design"})}),(0,s.jsx)(c.Z.Item,{children:(0,s.jsx)(c.Z.Link,{eventKey:"react",className:"mb-sm-3 mb-md-0",children:"Code"})})]})}),(0,s.jsx)(l.Z.Body,{className:"p-0",children:(0,s.jsxs)(d.Z.Content,{children:[(0,s.jsx)(d.Z.Pane,{eventKey:"design",className:"pb-4 p-4",children:(0,s.jsxs)(l.Z,{style:{width:"18rem"},children:[(0,s.jsx)(l.Z.Header,{children:"Featured"}),(0,s.jsxs)(m.Z,{variant:"flush",children:[(0,s.jsx)(m.Z.Item,{children:"Cras justo odio"}),(0,s.jsx)(m.Z.Item,{children:"Dapibus ac facilisis in"}),(0,s.jsx)(m.Z.Item,{children:"Vestibulum at eros"})]})]})}),(0,s.jsx)(d.Z.Pane,{eventKey:"react",className:"pb-4 p-4 react-code",children:(0,s.jsx)(x.TU,{code:Z})})]})})]})})]})}),(0,s.jsx)("hr",{className:"mb-5 mt-7"}),(0,s.jsx)(i.Z,{children:(0,s.jsxs)(r.Z,{xl:12,lg:12,md:12,sm:12,children:[(0,s.jsxs)("div",{id:"image",className:"mb-4",children:[(0,s.jsx)("h3",{children:"Images"}),(0,s.jsxs)("p",{children:[(0,s.jsx)("code",{children:"<Card.Img>"})," with"," ",(0,s.jsx)("code",{children:'variant="top"'})," places an image to the top of the card. With ",(0,s.jsx)("code",{children:"<Card.Text>"}),", text can be added to the card. Text within ",(0,s.jsx)("code",{children:"<Card.Text>"})," can also be styled with the standard HTML tags."]})]}),(0,s.jsx)(d.Z.Container,{defaultActiveKey:"design",children:(0,s.jsxs)(l.Z,{children:[(0,s.jsx)(l.Z.Header,{className:"border-bottom-0 p-0 ",children:(0,s.jsxs)(c.Z,{className:"nav-lb-tab",children:[(0,s.jsx)(c.Z.Item,{children:(0,s.jsx)(c.Z.Link,{eventKey:"design",className:"mb-sm-3 mb-md-0",children:"Design"})}),(0,s.jsx)(c.Z.Item,{children:(0,s.jsx)(c.Z.Link,{eventKey:"react",className:"mb-sm-3 mb-md-0",children:"Code"})})]})}),(0,s.jsx)(l.Z.Body,{className:"p-0",children:(0,s.jsxs)(d.Z.Content,{children:[(0,s.jsx)(d.Z.Pane,{eventKey:"design",className:"pb-4 p-4",children:(0,s.jsxs)(l.Z,{style:{width:"18rem"},children:[(0,s.jsx)(l.Z.Img,{variant:"top",src:"/images/placeholder/placeholder-4by3.svg"}),(0,s.jsx)(l.Z.Body,{children:(0,s.jsx)(l.Z.Text,{children:"Some quick example text to build on the card title and make up the bulk of the card's content."})})]})}),(0,s.jsx)(d.Z.Pane,{eventKey:"react",className:"pb-4 p-4 react-code",children:(0,s.jsx)(x.TU,{code:C})})]})})]})})]})}),(0,s.jsx)("hr",{className:"mb-5 mt-7"}),(0,s.jsx)(i.Z,{children:(0,s.jsxs)(r.Z,{xl:12,lg:12,md:12,sm:12,children:[(0,s.jsxs)("div",{id:"kitchen-sink",className:"mb-4",children:[(0,s.jsx)("h3",{children:"Kitchen sink"}),(0,s.jsx)("p",{children:"Mix and match multiple content types to create the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list groupâall wrapped in a fixed-width card."})]}),(0,s.jsx)(d.Z.Container,{defaultActiveKey:"design",children:(0,s.jsxs)(l.Z,{children:[(0,s.jsx)(l.Z.Header,{className:"border-bottom-0 p-0 ",children:(0,s.jsxs)(c.Z,{className:"nav-lb-tab",children:[(0,s.jsx)(c.Z.Item,{children:(0,s.jsx)(c.Z.Link,{eventKey:"design",className:"mb-sm-3 mb-md-0",children:"Design"})}),(0,s.jsx)(c.Z.Item,{children:(0,s.jsx)(c.Z.Link,{eventKey:"react",className:"mb-sm-3 mb-md-0",children:"Code"})})]})}),(0,s.jsx)(l.Z.Body,{className:"p-0",children:(0,s.jsxs)(d.Z.Content,{children:[(0,s.jsx)(d.Z.Pane,{eventKey:"design",className:"pb-4 p-4",children:(0,s.jsxs)(l.Z,{style:{width:"18rem"},children:[(0,s.jsx)(l.Z.Img,{variant:"top",src:"/images/placeholder/placeholder-4by3.svg"}),(0,s.jsxs)(l.Z.Body,{children:[(0,s.jsx)(l.Z.Title,{children:"Card Title"}),(0,s.jsx)(l.Z.Text,{children:"Some quick example text to build on the card title and make up the bulk of the card's content."})]}),(0,s.jsxs)(m.Z,{className:"list-group-flush",children:[(0,s.jsx)(h.Z,{children:"Cras justo odio"}),(0,s.jsx)(h.Z,{children:"Dapibus ac facilisis in"}),(0,s.jsx)(h.Z,{children:"Vestibulum at eros"})]}),(0,s.jsxs)(l.Z.Body,{children:[(0,s.jsx)(l.Z.Link,{href:"#",children:"Card Link"}),(0,s.jsx)(l.Z.Link,{href:"#",children:"Another Link"})]})]})}),(0,s.jsx)(d.Z.Pane,{eventKey:"react",className:"pb-4 p-4 react-code",children:(0,s.jsx)(x.TU,{code:y})})]})})]})})]})}),(0,s.jsx)("hr",{className:"mb-5 mt-7"}),(0,s.jsx)(i.Z,{children:(0,s.jsxs)(r.Z,{xl:12,lg:12,md:12,sm:12,children:[(0,s.jsxs)("div",{id:"header-footer",className:"mb-4",children:[(0,s.jsx)("h3",{children:"Header and Footer"}),(0,s.jsxs)("p",{children:["You may add a header by adding a ",(0,s.jsx)("code",{children:"<Card.Header>"})," ","component."]})]}),(0,s.jsx)(d.Z.Container,{defaultActiveKey:"design",children:(0,s.jsxs)(l.Z,{children:[(0,s.jsx)(l.Z.Header,{className:"border-bottom-0 p-0 ",children:(0,s.jsxs)(c.Z,{className:"nav-lb-tab",children:[(0,s.jsx)(c.Z.Item,{children:(0,s.jsx)(c.Z.Link,{eventKey:"design",className:"mb-sm-3 mb-md-0",children:"Design"})}),(0,s.jsx)(c.Z.Item,{children:(0,s.jsx)(c.Z.Link,{eventKey:"react",className:"mb-sm-3 mb-md-0",children:"Code"})})]})}),(0,s.jsx)(l.Z.Body,{className:"p-0",children:(0,s.jsxs)(d.Z.Content,{children:[(0,s.jsx)(d.Z.Pane,{eventKey:"design",className:"pb-4 p-4",children:(0,s.jsxs)(l.Z,{children:[(0,s.jsx)(l.Z.Header,{children:"Featured"}),(0,s.jsxs)(l.Z.Body,{children:[(0,s.jsx)(l.Z.Title,{children:"Special title treatment"}
1),(0,s.jsx)(l.Z.Text,{children:"With supporting text below as a natural lead-in to additional content."}),(0,s.jsx)(o.Z,{variant:"primary",children:"Go somewhere"})]})]})}),(0,s.jsx)(d.Z.Pane,{eventKey:"react",className:"pb-4 p-4 react-code",children:(0,s.jsx)(x.TU,{code:g})})]})})]})}),(0,s.jsx)("br",{}),(0,s.jsx)(d.Z.Container,{defaultActiveKey:"design",children:(0,s.jsxs)(l.Z,{children:[(0,s.jsx)(l.Z.Header,{className:"border-bottom-0 p-0 ",children:(0,s.jsxs)(c.Z,{className:"nav-lb-tab",children:[(0,s.jsx)(c.Z.Item,{children:(0,s.jsx)(c.Z.Link,{eventKey:"design",className:"mb-sm-3 mb-md-0",children:"Design"})}),(0,s.jsx)(c.Z.Item,{children:(0,s.jsx)(c.Z.Link,{eventKey:"react",className:"mb-sm-3 mb-md-0",children:"Code"})})]})}),(0,s.jsx)(l.Z.Body,{className:"p-0",children:(0,s.jsxs)(d.Z.Content,{children:[(0,s.jsx)(d.Z.Pane,{eventKey:"design",className:"pb-4 p-4",children:(0,s.jsxs)(l.Z,{className:"text-center",children:[(0,s.jsx)(l.Z.Header,{children:"Featured"}),(0,s.jsxs)(l.Z.Body,{children:[(0,s.jsx)(l.Z.Title,{children:"Special title treatment"}
1),(0,s.jsx)(l.Z.Text,{children:"With supporting text below as a natural lead-in to additional content."}),(0,s.jsx)(o.Z,{variant:"primary",children:"Go somewhere"})]}),(0,s.jsx)(l.Z.Footer,{className:"text-muted",children:"2 days ago"})]})}),(0,s.jsx)(d.Z.Pane,{eventKey:"react",className:"pb-4 p-4 react-code",children:(0,s.jsx)(x.TU,{code:v})})]})})]})})]})}),(0,s.jsx)("hr",{className:"mb-5 mt-7"}),(0,s.jsx)(i.Z,{children:(0,s.jsxs)(r.Z,{xl:12,lg:12,md:12,sm:12,children:[(0,s.jsxs)("div",{id:"text-alignment",className:"mb-4",children:[(0,s.jsx)("h3",{children:"Text alignment"}),(0,s.jsx)("p",{children:"You can quickly change the text alignment of any cardâin its entirety or specific partsâwith our text align classes."})]}),(0,s.jsx)(d.Z.Container,{defaultActiveKey:"design",children:(0,s.jsxs)(l.Z,{children:[(0,s.jsx)(l.Z.Header,{className:"border-bottom-0 p-0 ",children:(0,s.jsxs)(c.Z,{className:"nav-lb-tab",children:[(0,s.jsx)(c.Z.Item,{children:(0,s.jsx)(c.Z.Link,{eventKey:"design",className:"mb-sm-3 mb-md-0",children:"Design"})}),(0,s.jsx)(c.Z.Item,{children:(0,s.jsx)(c.Z.Link,{eventKey:"react",className:"mb-sm-3 mb-md-0",children:"Code"})})]})}),(0,s.jsx)(l.Z.Body,{className:"p-0",children:(0,s.jsxs)(d.Z.Content,{children:[(0,s.jsxs)(d.Z.Pane,{eventKey:"design",className:"pb-4 p-4",children:[(0,s.jsx)(l.Z,{style:{width:"18rem"},children:(0,s.jsxs)(l.Z.Body,{children:[(0,s.jsx)(l.Z.Title,{children:"Special title treatment"}
1),(0,s.jsx)(l.Z.Text,{children:"With supporting text below as a natural lead-in to additional content."}),(0,s.jsx)(o.Z,{variant:"primary",children:"Go somewhere"})]})}),(0,s.jsx)(l.Z,{style:{width:"18rem"},className:"text-center",children:(0,s.jsxs)(l.Z.Body,{children:[(0,s.jsx)(l.Z.Title,{children:"Special title treatment"}),(0,s.jsx)(l.Z.Text,{children:"With supporting text below as a natural lead-in to additional content."}),(0,s.jsx)(o.Z,{variant:"primary",children:"Go somewhere"})]})}),(0,s.jsx)(l.Z,{style:{width:"18rem"},className:"text-end",children:(0,s.jsxs)(l.Z.Body,{children:[(0,s.jsx)(l.Z.Title,{children:"Special title treatment"}),(0,s.jsx)(l.Z.Text,{children:"With supporting text below as a natural lead-in to additional content."}),(0,s.jsx)(o.Z,{variant:"primary",children:"Go somewhere"})]})})]}),(0,s.jsx)(d.Z.Pane,{eventKey:"react",className:"pb-4 p-4 react-code",children:(0,s.jsx)(x.TU,{code:N})})]})})]})})]})}),(0,s.jsx)("hr",{className:"mb-5 mt-7"}),(0,s.jsx)(i.Z,{children:(0,s.jsxs)(r.Z,{xl:12,lg:12,md:12,sm:12,children:[(0,s.jsxs)("div",{id:"images",className:"mb-4",children:[(0,s.jsx)("h3",{children:"Images"}),(0,s.jsx)("p",{children:"Cards include a few options for working with images. Choose from appending âimage capsâ at either end of a card, overlaying images with card content, or simply embedding the image in a card."}),(0,s.jsxs)("div",{className:"mt-3",id:"image-caps",children:[(0,s.jsx)("h3",{children:"Image caps"}),(0,s.jsx)("p",{children:"Similar to headers and footers, cards can include top and bottom âimage capsââimages at the top or bottom of a card."})]})]}),(0,s.jsx)(d.Z.Container,{defaultActiveKey:"design",children:(0,s.jsxs)(l.Z,{children:[(0,s.jsx)(l.Z.Header,{className:"border-bottom-0 p-0 ",children:(0,s.jsxs)(c.Z,{className:"nav-lb-tab",children:[(0,s.jsx)(c.Z.Item,{children:(0,s.jsx)(c.Z.Link,{eventKey:"design",className:"mb-sm-3 mb-md-0",children:"Design"})}),(0,s.jsx)(c.Z.Item,{children:(0,s.jsx)(c.Z.Link,{eventKey:"react",className:"mb-sm-3 mb-md-0",children:"Code"})})]})}),(0,s.jsx)(l.Z.Body,{className:"p-0",children:(0,s.jsxs)(d.Z.Content,{children:[(0,s.jsxs)(d.Z.Pane,{eventKey:"design",className:"pb-4 p-4",children:[(0,s.jsxs)(l.Z,{children:[(0,s.jsx)(l.Z.Img,{variant:"top",src:"/images/placeholder/placeholder-4by3.svg"}),(0,s.jsxs)(l.Z.Body,{children:[(0,s.jsx)(l.Z.Title,{children:"Card title"}),(0,s.jsx)(l.Z.Text,{children:"This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer."}),(0,s.jsx)(l.Z.Text,{children:(0,s.jsx)("small",{className:"text-muted",children:"Last updated 3 mins ago"})})]})]}),(0,s.jsx)("br",{}),(0,s.jsxs)(l.Z,{children:[(0,s.jsxs)(l.Z.Body,{children:[(0,s.jsx)(l.Z.Title,{children:"Card title"}),(0,s.jsx)(l.Z.Text,{children:"This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer."}),(0,s.jsx)(l.Z.Text,{children:(0,s.jsx)("small",{className:"text-muted",children:"Last updated 3 mins ago"})})]}),(0,s.jsx)(l.Z.Img,{variant:"bottom",src:"/images/placeholder/placeholder-4by3.svg"})]})]}),(0,s.jsx)(d.Z.Pane,{eventKey:"react",className:"pb-4 p-4 react-code",children:(0,s.jsx)(x.TU,{code:T})})]})})]})})]})}),(0,s.jsx)("hr",{className:"mb-5 mt-7"}),(0,s.jsx)(i.Z,{children:(0,s.jsxs)(r.Z,{xl:12,lg:12,md:12,sm:12,children:[(0,s.jsxs)("div",{id:"image-overlays",className:"mb-4",children:[(0,s.jsx)("h3",{children:"Image overlays"}),(0,s.jsx)("p",{children:"Turn an image into a card background and overlay your cardâs text. Depending on the image, you may or may not need additional styles or utilities."})]}),(0,s.jsx)(d.Z.Container,{defaultActiveKey:"design",children:(0,s.jsxs)(l.Z,{children:[(0,s.jsx)(l.Z.Header,{className:"border-bottom-0 p-0 ",children:(0,s.jsxs)(c.Z,{className:"nav-lb-tab",children:[(0,s.jsx)(c.Z.Item,{children:(0,s.jsx)(c.Z.Link,{eventKey:"design",className:"mb-sm-3 mb-md-0",children:"Design"})}),(0,s.jsx)(c.Z.Item,{children:(0,s.jsx)(c.Z.Link,{eventKey:"react",className:"mb-sm-3 mb-md-0",children:"Code"})})]})}),(0,s.jsx)(l.Z.Body,{className:"p-0",children:(0,s.jsxs)(d.Z.Content,{children:[(0,s.jsx)(d.Z.Pane,{eventKey:"design",className:"pb-4 p-4",children:(0,s.jsxs)(l.Z,{className:"bg-dark text-white",children:[(0,s.jsx)(l.Z.Img,{variant:"bottom",src:"/images/placeholder/placeholder-4by3.svg"}),(0,s.jsxs)(l.Z.ImgOverlay,{children:[(0,s.jsx)(l.Z.Title,{children:"Card title"}),(0,s.jsx)(l.Z.Text,{children:"This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer."}),(0,s.jsx)(l.Z.Text,{children:"Last updated 3 mins ago"})]})]})}),(0,s.jsx)(d.Z.Pane,{eventKey:"react",className:"pb-4 p-4 react-code",children:(0,s.jsx)(x.TU,{code:f})})]})})]})})]})})]});var k=w},8395:function(e,t,n){"use strict";n.d(t,{Ss:function(){return E},rS:function(){return w},ih:function(){return Z},TU:function(){return c},CD:function(){return x},w8:function(){return T},Kz:function(){return S}});var s=n(5893),a=n(7294),i=n(4855),r=n(7087),d=n(5424);let l=e=>{let{code:t}=e,n=e=>{e.target.innerHTML="Copied",setTimeout(()=>{e.target.innerHTML="Copy"},3e3)};return(0,s.jsxs)(a.Fragment,{children:[(0,s.jsx)(i.CopyToClipboard,{text:t,children:(0,s.jsx)("button",{className:"copy-button",onClick:n,children:"Copy"})}),(0,s.jsx)(r.ZP,{...r.lG,theme:d.Z,code:t,language:"jsx",children:e=>{let{className:t,style:n,tokens:a,getLineProps:i,getTokenProps:r}=e;return(0,s.jsx)("pre",{className:t,style:n,children:a.map((e,t)=>(0,s.jsx)("div",{...i({line:e,key:t}),children:e.map((e,t)=>(0,s.jsx)("span",{...r({token:e,key:t})}))}))})}})]})};var c=l,o=n(4051),m=n(1555);let h=e=>{let{heading:t}=e;return(0,s.jsx)(o.Z,{children:(0,s.jsx)(m.Z,{lg:12,md:12,xs:12,children:(0,s.jsx)("div",{className:"border-bottom pb-4 mb-4 ",children:(0,s.jsx)("h3",{className:"mb-0 fw-bold",children:t})})})})};var x=h,j=n(7346),p=n(5697),u=n.n(p);let b=e=>{let{placeholder:t,defaultselected:n,options:i,id:r,name:d,onChange:l,className:c}=e;return(0,s.jsx)(a.Fragment,{children:(0,s.jsxs)(j.Z.Select,{id:r,name:d,onChange:l,className:c,children:[t?(0,s.jsx)("option",{value:"",className:"text-muted",children:t}):"",i.map((e,t)=>(0,s.jsx)("option",{value:e.value,className:"text-dark",children:e.label},t))]})})};b.propTypes={placeholder:u().string.isRequired,defaultselected:u().string.isRequired,id:u().string,name:u().string,className:u().string},b.defaultProps={placeholder:"",defaultselected:"",id:"",name:"",className:""};var Z=b,C=n(8182),y=n(6714),g=n(1664),v=n.n(g);let N=e=>{let{content:t}=e,n=t[0];return(0,s.jsxs)(C.Z,{children:[(0,s.jsxs)(C.Z.Body,{className:"p-6 border-bottom mb-4",children:[(0,s.jsx)("h2",{className:"mb-3",children:n.plantitle}),(0,s.jsx)("p",{className:"mb-0",dangerouslySetInnerHTML:{__html:n.description}}),(0,s.jsxs)("div",{className:"d-flex align-items-end mt-6 mb-3",children:[(0,s.jsxs)("h1",{className:"fw-bold me-1 mb-0",children:["$",n.monthly," "]}),(0,s.jsx)("p",{className:"mb-0",children:"/mo"})]}),(0,s.jsx)(v(),{href:"#",className:"btn btn-".concat(n.buttonClass?n.buttonClass:"outline-primary"),children:n.buttonText})]}),(0,s.jsxs)(C.Z.Body,{children:[(0,s.jsx)("p",{className:"mb-0",children:n.featureHeading}),(0,s.jsx)(y.Z,{bsPrefix:"list-unstyled",className:"mt-4 mb-0",children:n.features.map((e,t)=>(0,s.jsxs)(y.Z.Item,{className:"mb-1",bsPrefix:"list-item",children:[(0,s.jsx)("span",{className:"text-success me-2",children:(0,s.jsx)("i",{className:"far fa-check-circle"})}),(0,s.jsx)("span",{dangerouslySetInnerHTML:{__html:e.feature}})]},t))})]})]})};var T=N;let f=e=>{let{item:t}=e;return(0,s.jsxs)("div",{className:"mb-6",children:[(0,s.jsx)("div",{className:"icon-shape icon-lg bg-primary rounded-3 mb-4",children:(0,s.jsx)("i",{className:"fe fe-".concat(t.icon," text-white fs-3")})}),(0,s.jsx)("h4",{children:t.title}),(0,s.jsx)("p",{children:t.description})]})};f.propTypes={item:u().any.isRequired};var w=f,k=n(8523),I=n(1330);let L={display:"flex",flexDirection:"row",flexWrap:"wrap",marginTop:16},B={display:"inline-flex",borderRadius:2,border:"1px solid #eaeaea",marginBottom:8,marginRight:8,width:100,height:100,padding:4,boxSizing:"border-box"},K={display:"flex",minWidth:0,overflow:"hidden"},P={display:"block",width:"auto",height:"100%"},E=e=>{let[t,n]=(0,a.useState)([]),{getRootProps:i,getInputProps:r}=(0,k.uI)({accept:"image/*",onDrop:e=>{n(e.map(e=>Object.assign(e,{preview:URL.createObjectURL(e)})))}}),d=t.map(e=>(0,s.jsx)("div",{style:B,children:(0,s.jsx)("div",{style:K,children:(0,s.jsx)(I.Z,{src:e.preview,style:P,alt:e.name})})},e.name));return(0,a.useEffect)(()=>()=>
1{t.forEach(e=>URL.revokeObjectURL(e.preview))},[t]),(0,s.jsxs)("section",{className:"container",children:[(0,s.jsxs)("div",{...i({className:"dropzone"}),children:[(0,s.jsx)("input",{...r()}),(0,s.jsx)("p",{className:"text-center",children:"Drag 'n' drop some files here, or click to select files"})]}),(0,s.jsx)("aside",{style:L,children:d})]})},G=e=>{let{info:t}=e;return(0,s.jsx)(C.Z,{children:(0,s.jsxs)(C.Z.Body,{children:[(0,s.jsxs)("div",{className:"d-flex justify-content-between align-items-center mb-3",children:[(0,s.jsx)("div",{children:(0,s.jsx)("h4",{className:"mb-0",children:t.title})}),(0,s.jsx)("div",{className:"icon-shape icon-md bg-light-primary text-primary rounded-2",children:t.icon})]}),(0,s.jsxs)("div",{children:[(0,s.jsx)("h1",{className:"fw-bold",children:t.value}),(0,s.jsx)("p",{className:"mb-0",dangerouslySetInnerHTML:{__html:t.statInfo}})]})]})})};G.propTypes={info:u().any.isRequired};var S=G},3192:function(e,t,n){"use strict";n.d(t,{Z:function(){return x}});var s=n(5697),a=n.n(s);n(7294);var i=n(3916),r=n(6101),d=n(5893);let l=({transition:e,...t})=>(0,d.jsx)(i.Z,{...t,transition:(0,r.Z)(e)});l.displayName="TabContainer";var c=n(8752),o=n(5103);let m={eventKey:a().oneOfType([a().string,a().number]),title:a().node.isRequired,disabled:a().bool,tabClassName:a().string,tabAttrs:a().object},h=()=>{throw Error("ReactBootstrap: The `Tab` component is not meant to be rendered! It's an abstract component that is only valid as a direct Child of the `Tabs` Component. For custom tabs components use TabPane and TabsContainer directly")};h.propTypes=m;var x=Object.assign(h,{Container:l,Content:c.Z,Pane:o.Z})},8752:function(e,t,n){"use strict";var s=n(6611);t.Z=(0,s.Z)("tab-content")},5103:function(e,t,n){"use strict";var s=n(4184),a=n.n(s),i=n(7294),r=n(7126),d=n(6626),l=n(5963),c=n(6792),o=n(1068),m=n(6101),h=n(5893);let x=i.forwardRef(({bsPrefix:e,transition:t,...n},s)=>{let[{className:i,as:x="div",...j},{isActive:p,onEnter:u,onEntering:b,onEntered:Z,onExit:C,onExiting:y,onExited:g,mountOnEnter:v,unmountOnExit:N,transition:T=o.Z}]=(0,l.W)({...n,transition:(0,m.Z)(t)}),f=(0,c.vE)(e,"tab-pane");return(0,h.jsx)(d.Z.Provider,{value:null,children:(0,h.jsx)(r.Z.Provider,{value:null,children:(0,h.jsx)(T,{in:p,onEnter:u,onEntering:b,onEntered:Z,onExit:C,onExiting:y,onExited:g,mountOnEnter:v,unmountOnExit:N,children:(0,h.jsx)(x,{...j,ref:s,className:a()(i,f,p&&"active")})})})})});x.displayName="TabPane",t.Z=x},6101:function(e,t,n){"use strict";n.d(t,{Z:function(){return i}});var s=n(7514),a=n(1068);function i(e){return"boolean"==typeof e?e?a.Z:s.Z:e}}},function(e){e.O(0,[5726,9774,2888,179],function(){return e(e.s=9871)}),_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.