Module 792849

function(e,t,l){l.d(t,{g:()=>d});var a=l(627968);l(64700);var r=l(397927),n=l(204990),s=l(261225),o=l(970488);let i=e=>{let{color:t,children:l}=e;return(0,a.jsx)("div",{style:{background:t,minHeight:120,height:"100%",borderRadius:8,display:"flex",alignItems:"center",justifyContent:"center",color:"white",fontWeight:"bold"},children:l})},d={name:"Grid",id:"grid",component:e=>{let{columns:t,paginationStrategy:l,perPage:n,paginationPosition:d,gridItemColumns:c,gridItemRows:u}=e;return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(r.Text,{variant:"text-lg/semibold",children:"Grid is used to create a responsive grid layout. It takes a columns prop to define the number of columns (1-6). The grid automatically becomes responsive on smaller screens."}),(0,a.jsx)("br",{}),(0,a.jsx)(r.Text,{variant:"text-lg/semibold",children:"GridItem is (optionally) used to set the size of a grid itme in the grid."}),(0,a.jsx)("div",{style:{marginTop:24},children:(0,a.jsxs)(s.A,{columns:t,paginationOptions:{paginationStrategy:l,perPage:n,paginationPosition:d},children:[(0,a.jsx)(i,{color:"red"}),(0,a.jsx)(o.A,{columns:c,rows:u,children:(0,a.jsx)(i,{color:"orange",children:(0,a.jsx)(r.Text,{variant:"text-lg/semibold",children:"GridItem"})})}),(0,a.jsx)(i,{color:"yellow"}),(0,a.jsx)(i,{color:"green"}),(0,a.jsx)(i,{color:"blue"}),(0,a.jsx)(i,{color:"violet"}),(0,a.jsx)(i,{color:"red"}),(0,a.jsx)(i,{color:"orange"}),(0,a.jsx)(i,{color:"yellow"}),(0,a.jsx)(i,{color:"green"}),(0,a.jsx)(i,{color:"blue"}),(0,a.jsx)(i,{color:"violet"}),(0,a.jsx)(i,{color:"red"}),(0,a.jsx)(i,{color:"orange"}),(0,a.jsx)(i,{color:"yellow"}),(0,a.jsx)(i,{color:"green"}),(0,a.jsx)(i,{color:"blue"}),(0,a.jsx)(i,{color:"violet"}),(0,a.jsx)(i,{color:"red"}),(0,a.jsx)(i,{color:"orange"}),(0,a.jsx)(i,{color:"yellow"}),(0,a.jsx)(i,{color:"green"}),(0,a.jsx)(i,{color:"blue"}),(0,a.jsx)(i,{color:"violet",children:(0,a.jsx)(r.Text,{variant:"text-lg/semibold",children:"Last Child"})})]})})]})},controls:{columns:{label:"Columns",type:"number",defaultValue:3},paginationStrategy:{label:"Pagination Strategy",type:"select",defaultValue:n.o.PAGINATE,options:[{label:"Paginate",value:n.o.PAGINATE},{label:"Truncate",value:n.o.TRUNCATE}]},perPage:{label:"Grid Items per Page (default, all)",type:"number",defaultValue:3},paginationPosition:{label:"Pagination Position",type:"select",defaultValue:"bottom",options:[{label:"Top",value:"top"},{label:"Bottom",value:"bottom"}]},gridItemColumns:{label:"Grid Item Columns",type:"number",defaultValue:1},gridItemRows:{label:"Grid Item Rows",type:"number",defaultValue:1}}}}