1"use strict";(self.webpackChunkpricexper_front=self.webpackChunkpricexper_front||[]).push([[7611],{76381:(e,n,s)=>{s.d(n,{A:()=>o});var t=s(9950),i=s(93895),r=s(99694),a=s(44414);const o=e=>{const{title:n,children:s,noBody:o,code:l,iconCode:d}=e,[c,m]=(0,t.useState)(!1),x=d||(0,a.jsx)(i.A,{size:15}),p=o?t.Fragment:r.bw;return(0,a.jsxs)(r.Zp,{className:"card-snippet",children:[(0,a.jsxs)(r.aR,{children:[(0,a.jsx)(r.ZB,{tag:"h4",children:n}),(0,a.jsx)("div",{className:"views cursor-pointer",onClick:()=>m(!c),children:x})]}),(0,a.jsx)(p,{children:s}),(0,a.jsx)(r.SD,{isOpen:c,children:(0,a.jsx)(r.bw,{children:l})})]})}},57611:(e,n,s)=>{s.r(n),s.d(n,{default:()=>z});var t=s(9950),i=s(69490),r=s(76381),a=s(19011),o=s(99694),l=s(73716),d=s(19779),c=s(29670),m=s(44414);const x=[{src:d,id:1},{src:c,id:2},{src:l,id:3}],p=()=>{const[e,n]=(0,t.useState)(0),[s,i]=(0,t.useState)(0),r=()=>{n(!0)},a=()=>{n(!1)},l=()=>{if(e)return;const n=s===x.length-1?0:s+1;i(n)},d=()=>{if(e)return;const n=0===s?x.length-1:s-1;i(n)},c=x.map((e=>(0,m.jsx)(o.A7,{onExiting:r,onExited:a,children:(0,m.jsx)("img",{src:e.src,className:"img-fluid",alt:e.id})},e.id)));return(0,m.jsxs)(o.FN,{activeIndex:s,next:l,previous:d,keyboard:!1,children:[(0,m.jsx)(o.Dz,{items:x,activeIndex:s,onClickHandler:n=>{e||i(n)}}),c,(0,m.jsx)(o.M5,{direction:"prev",directionText:"Previous",onClickHandler:d}),(0,m.jsx)(o.M5,{direction:"next",directionText:"Next",onClickHandler:l})]})};const g=[{src:s(24252),id:1,header:"Slide 1",caption:"Donut jujubes I love topping I love sweet. Jujubes I love brownie gummi bears I love donut sweet chocolate. Tart chocolate marshmallow.Tart carrot cake muffin."},{src:s(11129),id:2,header:"Slide 2",caption:"Tart macaroon marzipan I love souffl\xe9 apple pie wafer. Chocolate bar jelly caramels jujubes chocolate cake gummies. Cupcake cake I love cake danish carrot cake."},{src:s(18682),id:3,header:"Slide 3",caption:"Pudding sweet pie gummies. Chocolate bar sweet tiramisu cheesecake chocolate cotton candy pastry muffin Marshmallow cake powder icing."}],u=()=>{const[e,n]=(0,t.useState)(0),[s,i]=(0,t.useState)(0),r=()=>{n(!0)},a=()=>{n(!1)},l=()=>{if(e)return;const n=s===g.length-1?0:s+1;i(n)},d=()=>{if(e)return;const n=0===s?g.length-1:s-1;i(n)},c=g.map((e=>(0,m.jsxs)(o.A7,{onExiting:r,onExited:a,children:[(0,m.jsx)("img",{src:e.src,className:"img-fluid",alt:e.id}),(0,m.jsx)(o.bC,{captionText:e.caption,captionHeader:(0,m.jsx)("span",{className:"text-white",children:e.header})})]},e.id)));return(0,m.jsxs)(o.FN,{activeIndex:s,next:l,previous:d,keyboard:!1,interval:5e5,children:[(0,m.jsx)(o.Dz,{items:g,activeIndex:s,onClickHandler:n=>{e||i(n)}}),c,(0,m.jsx)(o.M5,{direction:"prev",directionText:"Previous",onClickHandler:d}),(0,m.jsx)(o.M5,{direction:"next",directionText:"Next",onClickHandler:l})]})},j=[{key:1,src:d,caption:"",altText:"Slide 1"},{key:2,src:c,caption:"",altText:"Slide 2"},{key:3,src:l,caption:"",altText:"Slide 3"}],h=()=>(0,m.jsx)(o.CB,{items:j,keyboard:!1});var I=s(68351),C=s(29517),f=s(84624);const v=[{src:I,key:1,caption:"",altText:"Slide 1"},{src:C,key:2,caption:"",altText:"Slide 2"},{src:f,key:3,caption:"",altText:"Slide 3"}],k=()=>(0,m.jsx)(o.CB,{items:v,interval:"500",keyboard:!1}),S=[{src:c,key:1,caption:"",altText:"Slide 1"},{src:I,key:2,caption:"",altText:"Slide 2"},{src:l,key:3,caption:"",altText:"Slide 3"}],T=()=>(0,m.jsx)(o.CB,{items:S,keyboard:!0}),y=[{src:C,key:1,caption:"",altText:"Slide 1"},{src:c,key:2,caption:"",altText:"Slide 2"},{src:f,key:3,caption:"",altText:"Slide 3"}],b=()=>(0,m.jsx)(o.CB,{items:y,pause:"hover",keyboard:!1});var w=s(39398),N=s.n(w);const A=(0,m.jsx)("pre",{children:(0,m.jsx)("code",{className:"language-jsx",children:"\nimport React, { useState } from 'react'\nimport {\n Carousel,\n CarouselItem,\n CarouselControl,\n CarouselIndicators\n} from 'reactstrap'\nimport sliderImage1 from '@src/assets/images/slider/01.jpg'\nimport sliderImage2 from '@src/assets/images/slider/02.jpg'\nimport sliderImage3 from '@src/assets/images/slider/03.jpg'\n\nconst images = [\n {\n src: sliderImage1,\n id: 1\n },\n {\n src: sliderImage2,\n id: 2\n },\n {\n src: sliderImage3,\n id: 3\n }\n]\n\nconst CarouselBasic = () => {\n const [activeIndex, setActiveIndex] = useState(0)\n const [animating, setAnimating] = useState(0)\n\n const onExiting = () => {\n setAnimating(true)\n }\n\n const onExited = () => {\n setAnimating(false)\n }\n\n const next = () => {\n if (animating) return\n const nextIndex = activeIndex === images.length - 1 ? 0 : activeIndex + 1\n setActiveIndex(nextIndex)\n }\n\n const previous = () => {\n if (animating) return\n const nextIndex = activeIndex === 0 ? images.length - 1 : activeIndex - 1\n setActiveIndex(nextIndex)\n }\n\n const goToIndex = newIndex => {\n if (animating) return\n setActiveIndex(newIndex)\n }\n\n const slides = images.map(item =>
1 {\n return (\n <CarouselItem onExiting={onExiting} onExited={onExited} key={item.id}>\n <img src={item.src} className='img-fluid' alt={item.id} />\n </CarouselItem>\n )\n })\n return (\n <Carousel activeIndex={activeIndex} next={next} previous={previous}>\n <CarouselIndicators\n items={images}\n activeIndex={activeIndex}\n onClickHandler={goToIndex}\n />\n {slides}\n <CarouselControl\n direction='prev'\n directionText='Previous'\n onClickHandler={previous}\n />\n <CarouselControl\n direction='next'\n directionText='Next'\n onClickHandler={next}\n />\n </Carousel>\n )\n}\n\nexport default CarouselBasic\n "})}),E=(0,m.jsx)("pre",{children:(0,m.jsx)("code",{className:"language-jsx",children:"\nimport React, { useState } from 'react'\nimport {\n Carousel,\n CarouselItem,\n CarouselControl,\n CarouselIndicators,\n CarouselCaption\n} from 'reactstrap'\nimport sliderImage1 from '@src/assets/images/slider/03.jpg'\nimport sliderImage2 from '@src/assets/images/slider/04.jpg'\nimport sliderImage3 from '@src/assets/images/slider/05.jpg'\n\nconst images = [\n {\n src: sliderImage1,\n id: 1,\n header: <span className=\"text-white\">Slide 1 Header</span>\n caption: 'Cupcake ipsum dolor sit amet toffee lemon drops bonbon.'\n },\n {\n src: sliderImage2,\n id: 2,\n header: <span className=\"text-white\">Slide 2 Header</span>\n caption: 'Cheesecake caramels wafer pie lollipop.'\n },\n {\n src: sliderImage3,\n id: 3,\n header: <span className=\"text-white\">Slide 3 Header</span>\n caption: 'Candy canes toffee gummies souffl\xe9 fruitcake drag\xe9e icing.'\n }\n]\n\nconst CarouselCaptions = () => {\n const [activeIndex, setActiveIndex] = useState(0)\n const [animating, setAnimating] = useState(0)\n\n const onExiting = () => {\n setAnimating(true)\n }\n\n const onExited = () => {\n setAnimating(false)\n }\n\n const next = () => {\n if (animating) return\n const nextIndex = activeIndex === images.length - 1 ? 0 : activeIndex + 1\n setActiveIndex(nextIndex)\n }\n\n const previous = () => {\n if (animating) return\n const nextIndex = activeIndex === 0 ? images.length - 1 : activeIndex - 1\n setActiveIndex(nextIndex)\n }\n\n const goToIndex = newIndex => {\n if (animating) return\n setActiveIndex(newIndex)\n }\n\n const slides = images.map(item => {\n return (\n <CarouselItem onExiting={onExiting} onExited={onExited} key={item.id}>\n <img src={item.src} className='img-fluid' alt={item.id} />\n <CarouselCaption\n captionText={item.caption}\n captionHeader={<span className=\"text-center\">item.header</span>}\n />\n </CarouselItem>\n )\n })\n return (\n <Carousel activeIndex={activeIndex} next={next} previous={previous}>\n <CarouselIndicators\n items={images}\n activeIndex={activeIndex}\n onClickHandler={goToIndex}\n />\n {slides}\n <CarouselControl\n direction='prev'\n directionText='Previous'\n onClickHandler={previous}\n />\n <CarouselControl\n direction='next'\n directionText='Next'\n onClickHandler={next}\n />\n </Carousel>\n )\n}\n\nexport default CarouselCaptions\n "})}),H=(0,m.jsx)("pre",{children:(0,m.jsx)("code",{className:"language-jsx",children:"\n\nimport { UncontrolledCarousel } from 'reactstrap'\nimport sliderImage1 from '@src/assets/images/slider/06.jpg'\nimport sliderImage2 from '@src/assets/images/slider/02.jpg'\nimport sliderImage3 from '@src/assets/images/slider/05.jpg'\n\nconst items = [\n {\n src: sliderImage1,\n altText: 'Slide 1',\n },\n {\n src: sliderImage2,\n altText: 'Slide 2',\n },\n {\n src: sliderImage3,\n altText: 'Slide 3',\n }\n]\n\nconst CarouselUncontrolled = () => {\n return <UncontrolledCarousel items={items} />\n}\nexport default CarouselUncontrolled\n "})}),U=(0,m.jsx)("pre",{children:(0,m.jsx)("code",{className:"language-jsx",children:"\n\nimport { UncontrolledCarousel } from 'reactstrap'\nimport sliderImage1 from '@src/assets/images/slider/05.jpg'\nimport sliderImage2 from '@src/assets/images/slider/04.
1jpg'\nimport sliderImage3 from '@src/assets/images/slider/01.jpg'\n\nconst images = [\n {\n src: sliderImage1,\n id: 1,\n altText: 'Slide 1',\n },\n {\n src: sliderImage2,\n id: 2,\n altText: 'Slide 2',\n },\n {\n src: sliderImage3,\n id: 3,\n altText: 'Slide 3',\n }\n]\n\nconst CarouselInterval = () => {\n return <UncontrolledCarousel items={images} interval='500' />\n}\nexport default CarouselInterval"})}),B=(0,m.jsx)("pre",{children:(0,m.jsx)("code",{className:"language-jsx",children:"\n\nimport { UncontrolledCarousel } from 'reactstrap'\nimport { carouselKeyboard } from './CarouselSourceCode'\nimport sliderImage1 from '@src/assets/images/slider/04.jpg'\nimport sliderImage2 from '@src/assets/images/slider/01.jpg'\nimport sliderImage3 from '@src/assets/images/slider/05.jpg'\n\nconst images = [\n {\n src: sliderImage1,\n id: 1,\n altText: 'Slide 1',\n },\n {\n src: sliderImage2,\n id: 2,\n altText: 'Slide 2',\n },\n {\n src: sliderImage3,\n id: 3,\
1n altText: 'Slide 3',\n }\n]\n\nconst CarouselKeyboard = () => {\n return <UncontrolledCarousel items={images} keyboard={false} />\n}\nexport default CarouselKeyboard\n "})}),P=(0,m.jsx)("pre",{children:(0,m.jsx)("code",{className:"language-jsx",children:"\n\nimport { UncontrolledCarousel } from 'reactstrap'\nimport sliderImage1 from '@src/assets/images/slider/02.jpg'\nimport sliderImage2 from '@src/assets/images/slider/06.jpg'\nimport sliderImage3 from '@src/assets/images/slider/05.jpg'\n\nconst images = [\n {\n src: sliderImage1,\n id: 1,\n altText: 'Slide 1',\n caption: 'Slide 1',\n header: <span className=\"text-white\">Slide 1 Header</span>\n },\n {\n src: sliderImage2,\n id: 2,\n altText: 'Slide 2',\n caption: 'Slide 2',\n header: <span className=\"text-white\">Slide 2 Header</span>\n },\n {\n src: sliderImage3,\n id: 3,\n altText: 'Slide 3',\n caption: 'Slide 3',\n header: <span className=\"text-white\">Slide 3 Header</span>\n }\n]\n\nconst CarouselPause = () => {\n return <UncontrolledCarousel items={images} pause='hover' />\n}\nexport default CarouselPause\n"})}),z=()=>((0,t.useEffect)((()=>{N().highlightAll()}),[]),(0,m.jsxs)(t.Fragment,{children:[(0,m.jsx)(a.A,{title:"Carousel",data:[{title:"Components"},{title:"Carousel"}]}),(0,m.jsxs)(o.fI,{children:[(0,m.jsx)(o.fv,{className:"mb-1",sm:"12",children:(0,m.jsx)(o.Fc,{color:"info",children:(0,m.jsx)("div",{className:"alert-body",children:(0,m.jsxs)("p",{children:[(0,m.jsx)(i.A,{className:"me-1",size:14}),"Nested carousels are not supported."]})})})}),(0,m.jsx)(o.fv,{md:"6",sm:"12",children:(0,m.jsx)(r.A,{title:"Basic Example",code:A,children:(0,m.jsx)(p,{})})}),(0,m.jsx)(o.fv,{md:"6",sm:"12",children:(0,m.jsx)(r.A,{title:"Captions Example",code:E,children:(0,m.jsx)(u,{})})}),(0,m.jsx)(o.fv,{md:"6",sm:"12",children:(0,m.jsxs)(r.A,{title:"Uncontrolled Example",code:H,children:[(0,m.jsxs)(o.c5,{children:["You don't have to manage state with ",(0,m.jsx)("code",{children:"UncontrolledCarousel"})," all you have to do is return it with your content."]}),(0,m.jsx)(h,{})]})}),(0,m.jsx)(o.fv,{md:"6",sm:"12",children:(0,m.jsxs)(r.A,{title:"Interval Example",code:U,children:[(0,m.jsxs)(o.c5,{children:["Use ",(0,m.jsx)("code",{children:"Interval"})," prop to set interval between slides. default interval is ",(0,m.jsx)("strong",{children:"5000"}),"."]}),(0,m.jsx)(k,{})]})}),(0,m.jsx)(o.fv,{md:"6",sm:"12",children:(0,m.jsxs)(r.A,{title:"Keyboard Example",code:B,children:[(0,m.jsxs)(o.c5,{children:["Use ",(0,m.jsx)("code",{children:"Keyboard"})," prop to control carousel with keyboard default is ",(0,m.jsx)("code",{children:"false"}),"."]}),(0,m.jsx)(T,{})]})}),(0,m.jsx)(o.fv,{md:"6",sm:"12",children:(0,m.jsxs)(r.A,{title:"Pause Example",code:P,children:[(0,m.jsxs)(o.c5,{children:["Use ",(0,m.jsx)("code",{children:"pause"})," prop to pause carousel on hover."]}),(0,m.jsx)(b,{})]})})]})]}))},73716:(e,n,s)=>{e.exports=s.p+"static/media/01.ae763d9d10481a5bc256.jpg"},84624:(e,n,s)=>{e.exports=s.p+"static/media/05.3d963e358d938269ee85.jpg"},11129:(e,n,s)=>{e.exports=s.p+"static/media/08.9fa51868e826d8b24d1e.jpg"}}]);
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.