UNPKG

tsm-ui

Version:

### Welcome to TSM-UI: Your Design System for Modern Web Development

6 lines (5 loc) 1.94 kB
import{r as u}from"./index.d591fb27.js";import{s}from"./index.f31275f4.js";import{a as h,j as t}from"./jsx-runtime.e41c3930.js";import"./_commonjsHelpers.712cc82f.js";import"./index.8dde8ec8.js";const f=s("div",{display:"flex",justifyContent:"space-between",alignItems:"center",backgroundColor:"$colorMain010",border:"4px solid $colorSecondaryAccent",borderRadius:"$sm",padding:"$5",width:"$80",height:"400",position:"absolute",fontFamily:"$default"}),a=s("div",{display:"flex",alignItems:"center",justifyContent:"center",color:"$colorPrimary070",cursor:"pointer",borderRadius:"$lg",width:"$8",height:"$8",fontSize:"$xs","&:hover":{color:"$colorGreen030"}}),g=s("p",{color:"$colorMain090",padding:"$2",fontSize:"$sm",textAlign:"center"});function n(){const o=["Lorem Ipsum is simply dummy text of the printing and typesetting industry.","Contrary to popular belief, Lorem Ipsum is not simply random text.","It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.",'The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.'],[m,i]=u.exports.useState(0),p=()=>{i(r=>(r+1)%o.length)};return h(f,{children:[t(a,{onClick:()=>{i(r=>(r-1+o.length)%o.length)},children:"Prev"}),t(g,{children:o[m]}),t(a,{onClick:p,children:"Next"})]})}n.displayName="Carousel";const j={title:"Components/Carousel",component:n,parameters:{docs:{description:{story:"A simple carousel component that displays a list of text items and allows navigation between them."}}}},y=()=>t("div",{style:{height:"190px"},children:t(n,{})}),e=y.bind({});e.args={};var l,c,d;e.parameters={...e.parameters,docs:{...(l=e.parameters)==null?void 0:l.docs,source:{originalSource:`() => <div style={{ height: '190px' }}> <Carousel /> </div>`,...(d=(c=e.parameters)==null?void 0:c.docs)==null?void 0:d.source}}};const w=["Default"];export{e as Default,w as __namedExportsOrder,j as default};