Build 533169stable
Module 706309
4,045 characters · in f6f04acf715b2e14.jsDependencies
Source Raw
function(e,t,l){l.d(t,{s:()=>u});var a=l(627968);l(64700);var r=l(397927),n=l(18769),s=l(653793),o=l(673277),i=l(118713);let d=()=>(0,a.jsx)("div",{style:{display:"flex",justifyContent:"center",alignItems:"center"},children:(0,a.jsx)("div",{style:{height:96,width:96,borderRadius:48,background:"grey"}})}),c=()=>(0,a.jsx)("div",{style:{background:"rgba(255, 255, 255, 0.6)",height:240}}),u={name:"Carousel",id:"carousel",component:e=>(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(r.Text,{variant:"text-lg/normal",children:"Carousel steps through the children with a swipe and fade animation."}),(0,a.jsx)(r.Text,{variant:"text-md/normal",children:"It has very minimal configuration options, instead choosing to be opinionated about the functionality of a carousel in a CMS world."}),(0,a.jsx)(r.Text,{variant:"text-md/normal",children:"The carousel will pause slidding when the mouse hovers it, and resume on mouse leave."}),(0,a.jsx)(o.A,{children:(0,a.jsxs)(i.A,{...e,children:[(0,a.jsx)("div",{style:{background:"red"},children:(0,a.jsx)(c,{})}),(0,a.jsx)("div",{style:{background:"orange"},children:(0,a.jsx)(c,{})}),(0,a.jsx)("div",{style:{background:"yellow"},children:(0,a.jsx)(c,{})}),(0,a.jsx)("div",{style:{background:"green"},children:(0,a.jsx)(c,{})}),(0,a.jsx)("div",{style:{background:"blue"},children:(0,a.jsx)(c,{})}),(0,a.jsx)("div",{style:{background:"violet"},children:(0,a.jsx)(c,{})})]})}),(0,a.jsxs)(o.A,{children:[(0,a.jsx)(r.Text,{variant:"text-md/normal",children:"Here is an example of what a carousel inside of a card might look like for showing off different products"}),(0,a.jsx)("br",{}),(0,a.jsx)(s.A,{children:(0,a.jsx)("div",{style:{background:"white",padding:12,borderRadius:8,aspectRatio:"1/1",maxWidth:240,display:"flex",overflow:"hidden"},children:(0,a.jsxs)(i.A,{...e,children:[(0,a.jsx)(d,{}),(0,a.jsx)(d,{}),(0,a.jsx)(d,{}),(0,a.jsx)(d,{}),(0,a.jsx)(d,{})]})})})]}),(0,a.jsxs)(o.A,{children:[(0,a.jsx)(r.Text,{variant:"text-md/normal",children:"And here is an example of a FeaturedBlock Carousel"}),(0,a.jsx)("br",{}),(0,a.jsxs)(i.A,{...e,children:[(0,a.jsx)(n.A,{href:"",backgroundImage:{src:"https://cdn.discordapp.com/assets/content/cd657aa88cb5c636a97dd3a5d68debfb009515cdc1c541296c1ac4e3ad5fc63e"},logoSrc:{src:"https://cdn.discordapp.com/assets/content/272efe50874c7fc6e788078e6f8b5fdfc40a7de7358fe3672f1b5e3659047bda"},supplementalImage:{src:"https://cdn.discordapp.com/assets/content/c73a78420e788a01f10ae7106a1b858e78fffd11e0e2eee6ece0acf192bc3bf3.png"},ctaText:"View The Collection"}),(0,a.jsx)(n.A,{href:"",backgroundImage:{src:"https://cdn.discordapp.com/assets/content/cd657aa88cb5c636a97dd3a5d68debfb009515cdc1c541296c1ac4e3ad5fc63e"},logoSrc:{src:"https://cdn.discordapp.com/assets/content/272efe50874c7fc6e788078e6f8b5fdfc40a7de7358fe3672f1b5e3659047bda"},supplementalImage:{src:"https://cdn.discordapp.com/assets/content/c73a78420e788a01f10ae7106a1b858e78fffd11e0e2eee6ece0acf192bc3bf3.png"},ctaText:"View The Collection"}),(0,a.jsx)(n.A,{href:"",backgroundImage:{src:"https://cdn.discordapp.com/assets/content/cd657aa88cb5c636a97dd3a5d68debfb009515cdc1c541296c1ac4e3ad5fc63e"},logoSrc:{src:"https://cdn.discordapp.com/assets/content/272efe50874c7fc6e788078e6f8b5fdfc40a7de7358fe3672f1b5e3659047bda"},supplementalImage:{src:"https://cdn.discordapp.com/assets/content/c73a78420e788a01f10ae7106a1b858e78fffd11e0e2eee6ece0acf192bc3bf3.png"},ctaText:"View The Collection"}),(0,a.jsx)(n.A,{href:"",backgroundImage:{src:"https://cdn.discordapp.com/assets/content/cd657aa88cb5c636a97dd3a5d68debfb009515cdc1c541296c1ac4e3ad5fc63e"},logoSrc:{src:"https://cdn.discordapp.com/assets/content/272efe50874c7fc6e788078e6f8b5fdfc40a7de7358fe3672f1b5e3659047bda"},supplementalImage:{src:"https://cdn.discordapp.com/assets/content/c73a78420e788a01f10ae7106a1b858e78fffd11e0e2eee6ece0acf192bc3bf3.png"},ctaText:"View The Collection"})]})]})]}),controls:{slideDuration:{label:"Slide Duration (production default is 5000)",type:"number",defaultValue:2500},paused:{label:"Pause",type:"boolean",defaultValue:!1}}}}