@arcblock/blocklet-registry/www/component---src-templates-blocklet-list-js-69f3bfe38cd0b42ed208.js

**Blocklets** are reusable building blocks to help developers and community users to build things on [ArcBlock](https://www.arcblock.io) platform. A blocklet serves one and only one purpose, reusability is the core design philosophy of blocklets. Reusabil

(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{HBzW:function(e,t,a){"use strict";a.r(t);var o=a("q1tI"),i=a.n(o),l=a("vOnD"),r=a("ofer"),n=(a("E9XD"),a("wx14")),d=a("Ff2n"),c=a("rePB"),s=a("iuhU"),p=a("H2TA"),m=a("NqtD"),u=o.forwardRef((function(e,t){var a=e.classes,i=e.className,l=e.component,r=void 0===l?"div":l,c=e.disableGutters,p=void 0!==c&&c,u=e.fixed,b=void 0!==u&&u,h=e.maxWidth,g=void 0===h?"lg":h,x=Object(d.a)(e,["classes","className","component","disableGutters","fixed","maxWidth"]);return o.createElement(r,Object(n.a)({className:Object(s.default)(a.root,i,b&&a.fixed,p&&a.disableGutters,!1!==g&&a["maxWidth".concat(Object(m.a)(String(g)))]),ref:t},x))})),b=Object(p.a)((function(e){return{root:Object(c.a)({width:"100%",marginLeft:"auto",boxSizing:"border-box",marginRight:"auto",paddingLeft:e.spacing(2),paddingRight:e.spacing(2),display:"block"},e.breakpoints.up("sm"),{paddingLeft:e.spacing(3),paddingRight:e.spacing(3)}),disableGutters:{paddingLeft:0,paddingRight:0},fixed:Object.keys(e.breakpoints.values).reduce((function(t,a){var o=e.breakpoints.values[a];return 0!==o&&(t[e.breakpoints.up(a)]={maxWidth:o}),t}),{}),maxWidthXs:Object(c.a)({},e.breakpoints.up("xs"),{maxWidth:Math.max(e.breakpoints.values.xs,444)}),maxWidthSm:Object(c.a)({},e.breakpoints.up("sm"),{maxWidth:e.breakpoints.values.sm}),maxWidthMd:Object(c.a)({},e.breakpoints.up("md"),{maxWidth:e.breakpoints.values.md}),maxWidthLg:Object(c.a)({},e.breakpoints.up("lg"),{maxWidth:e.breakpoints.values.lg}),maxWidthXl:Object(c.a)({},e.breakpoints.up("xl"),{maxWidth:e.breakpoints.values.xl})}}),{name:"MuiContainer"})(u),h=a("wZhz"),g=a("Azpu"),x=a("eiei"),f=a("yUF8"),k=a.n(f),v=a("pVO7"),_=a("zLVn"),y=a("Wbzz"),w=a("tRbT"),O=(a("USxY"),a("ye/S"));a("Z3vd").a.styles;var E=o.forwardRef((function(e,t){var a=e.children,i=e.classes,l=e.className,r=e.color,c=void 0===r?"default":r,p=e.component,u=void 0===p?"div":p,b=e.disabled,h=void 0!==b&&b,g=e.disableElevation,x=void 0!==g&&g,f=e.disableFocusRipple,k=void 0!==f&&f,v=e.disableRipple,_=void 0!==v&&v,y=e.fullWidth,w=void 0!==y&&y,O=e.orientation,E=void 0===O?"horizontal":O,j=e.size,N=void 0===j?"medium":j,R=e.variant,W=void 0===R?"outlined":R,z=Object(d.a)(e,["children","classes","className","color","component","disabled","disableElevation","disableFocusRipple","disableRipple","fullWidth","orientation","size","variant"]),C=Object(s.default)(i.grouped,i["grouped".concat(Object(m.a)(E))],i["grouped".concat(Object(m.a)(W))],i["grouped".concat(Object(m.a)(W)).concat(Object(m.a)(E))],i["grouped".concat(Object(m.a)(W)).concat("default"!==c?Object(m.a)(c):"")],h&&i.disabled);return o.createElement(u,Object(n.a)({role:"group",className:Object(s.default)(i.root,l,w&&i.fullWidth,x&&i.disableElevation,"contained"===W&&i.contained,"vertical"===E&&i.vertical),ref:t},z),o.Children.map(a,(function(e){return o.isValidElement(e)?o.cloneElement(e,{className:Object(s.default)(C,e.props.className),color:e.props.color||c,disabled:e.props.disabled||h,disableElevation:e.props.disableElevation||x,disableFocusRipple:k,disableRipple:_,fullWidth:w,size:e.props.size||N,variant:e.props.variant||W}):null})))})),j=Object(p.a)((function(e){return{root:{display:"inline-flex",borderRadius:e.shape.borderRadius},contained:{boxShadow:e.shadows[2]},disableElevation:{boxShadow:"none"},disabled:{},fullWidth:{width:"100%"},vertical:{flexDirection:"column"},grouped:{minWidth:40},groupedHorizontal:{"&:not(:first-child)":{borderTopLeftRadius:0,borderBottomLeftRadius:0},"&:not(:last-child)":{borderTopRightRadius:0,borderBottomRightRadius:0}},groupedVertical:{"&:not(:first-child)":{borderTopRightRadius:0,borderTopLeftRadius:0},"&:not(:last-child)":{borderBottomRightRadius:0,borderBottomLeftRadius:0}},groupedText:{},groupedTextHorizontal:{"&:not(:last-child)":{borderRight:"1px solid ".concat("light"===e.palette.type?"rgba(0, 0, 0, 0.23)":"rgba(255, 255, 255, 0.23)")}},groupedTextVertical:{"&:not(:last-child)":{borderBottom:"1px solid ".concat("light"===e.palette.type?"rgba(0, 0, 0, 0.23)":"rgba(255, 255, 255, 0.23)")}},groupedTextPrimary:{"&:not(:last-child)":{borderColor:Object(O.d)(e.palette.primary.main,.5)}},groupedTextSecondary:{"&:not(:last-child)":{borderColor:Object(O.d)(e.palette.secondary.main,.5)}},groupedOutlined:{},groupedOutlinedHorizontal:{"&:not(:first-child)":{marginLeft:-1},"&:not(:last-child)":{borderRightColor:"transparent"}},groupedOutlinedVertical:{"&:not(:first-child)":{marginTop:-1},"&:not(:last-child)":{borderBottomColor:"transparent"}},groupedOutlinedPrimary:{"&:hover":{borderColor:e.palette.primary.main}},groupedOutlinedSecondary:{"&:hover":{borderColor:e.palette.secondary.main}},groupedContained:{boxShadow:"none"},groupedContainedHorizontal:{"&:not(:last-child)":{borderRight:"1px solid ".concat(e.palette.grey[400]),"&$disabled":{borderRight:"1px solid ".concat(e.palette.action.disabled)}}},groupedContainedVertical:{"&:not(:last-child)":{borderBottom:"1px solid ".concat(e.palette.grey[400]),"&$disabled":{borderBottom:"1px solid ".concat(e.palette.action.disabled)}}},groupedContainedPrimary:{"&:not(:last-child)":{borderColor:e.palette.primary.dark}},groupedContainedSecondary:{"&:not(:last-child)":{borderColor:e.palette.secondary.dark}}}}),{name:"MuiButtonGroup"})(E),N=a("pk8s"),R=a.n(N),W=a("XZqO"),z=a.n(W),C=a("PNx3"),B=a("wnYN");function T(e){var t=e.blocklets,a=e.group,o=Object(_.a)(e,["blocklets","group"]),l=t.reduce((function(e,t){return e[t.group]||(e[t.group]=[]),e[t.group].push(t),e.all.push(t),e}),{all:[]}),n=i.a.useState(l[a]?a:"all"),d=n[0],c=n[1],s=Object.keys(l);return i.a.createElement(b,Object.assign({maxWidth:"lg"},o),i.a.createElement(w.a,{container:!0,spacing:4},s.length>1&&i.a.createElement(w.a,{item:!0,xs:12,md:12,style:{display:"flex",alignItems:"center",justifyContent:"space-between"}},i.a.createElement(j,{className:"group-selector"},s.map((function(e){return i.a.createElement(z.a,{key:e,variant:e===d?"contained":"outlined",color:"primary",onClick:function(){return c(e)}},e)}))),i.a.createElement(z.a,{variant:"outlined",className:"hero__button",href:"https://github.com/ArcBlock/blocklets"},"Create New Blocklet")),l[d].map((function(e){return i.a.createElement(w.a,{item:!0,lg:3,md:4,sm:6,xs:12,key:e.name},i.a.createElement(S,{color:"primary"},i.a.createElement(y.a,{to:e.path},i.a.createElement("div",{className:"blocklet__header"},i.a.createElement("div",{className:"blocklet__image"},i.a.createElement("img",{src:Object(B.b)(e),className:"header__logo__image",alt:e.name})),i.a.createElement("span",{className:"blocklet__group"},e.group)),i.a.createElement("div",{className:"blocklet__info"},i.a.createElement(r.a,{component:"h2",className:"blocklet__title",title:e.name||e.title},e.name||e.title),i.a.createElement(C.a,{stats:e.stats,className:"blocklet__stats"}),i.a.createElement(r.a,{component:"p",className:"blocklet__description",title:e.description},e.description),i.a.createElement(r.a,{component:"div",className:"blocklet__tags"},i.a.createElement(R.a,{className:"blocklet__tag",type:"default"},"v",e.version))))))}))))}T.defaultProps={group:"all"};var S=l.default.div.withConfig({displayName:"blocklets__Blocklet",componentId:"sc-13nzvt6-0"})(["margin-bottom:40px;border:1px solid ",";@media (max-width:","px){margin-bottom:0;}.blocklet__header{height:60px;background-color:",";background-image:radial-gradient("," 10%,transparent 0);background-size:10px 10px;display:flex;justify-content:space-between;align-items:center;}.blocklet__image{width:80px;height:60px;border-radius:0 30px 30px 0;padding-right:10px;background-color:",";display:flex;justify-content:center;align-items:center;img{width:40px;height:40px;}}.blocklet__group{background-color:",";color:",";font-size:20px;font-weight:900;padding:3px 12px;text-transform:capitalize;}.blocklet__info{padding:24px 12px;}.blocklet__title{font-size:18px;font-weight:bold;margin-bottom:16px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-height:1.5rem;max-height:1.5rem;width:100%;}.blocklet__stats{margin-bottom:16px;}.blocklet__description{font-size:14px;color:",";margin-bottom:24px;display:block;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-height:1.5rem;max-height:4.5rem;height:4.5rem;}.blocklet__tag{margin-right:12px;text-transform:capitalize;}"],(function(e){return e.theme.palette[e.color].main}),(function(e){return e.theme.breakpoints.values.sm}),(function(e){return e.theme.palette[e.color].light}),(function(e){return e.theme.palette[e.color].main}),(function(e){return e.theme.palette[e.color].main}),(function(e){return e.theme.palette[e.color].dark}),(function(e){return e.theme.palette[e.color].main}),(function(e){return e.theme.colors.primary}));t.default=Object(x.a)()(k()(Object(h.a)(v.a)((function(e){var t=e.pageContext,a=e.location,o=t.blocklets;return i.a.createElement(g.a,{location:a,title:"Blocklets"},i.a.createElement(L,null,i.a.createElement(b,{className:"hero",maxWidth:"lg"},i.a.createElement(r.a,{className:"hero__title",component:"h2",variant:"h4"},"Blocklets."),i.a.createElement(r.a,{className:"hero__subtitle",component:"h3",variant:"h5"},"The easy to start building dApps!"),i.a.createElement(r.a,{className:"hero__description",component:"p"},"Blocklets are easy to use packages that allow you to quickly build a dApp by giving you instant access to helpful modules, smart contracts, libraries, front-end views and more. Use one blocklet or combine them to build a complete dApp. Blocklets help you start with ready-made components and modules, libraries, view and more; helping you build a complete dApp.")),i.a.createElement(T,{blocklets:o,className:"blocklets"})))}))));var L=l.default.div.withConfig({displayName:"list__Div",componentId:"sc-8tad6c-0"})(["color:#404040;.hero{margin-top:120px;text-align:center;@media (max-width:","px){margin-top:60px;}.hero__title{font-weight:bold;margin-bottom:8px;}.hero__subtitle{font-weight:bold;margin-bottom:16px;}.hero__description{margin:0 auto;margin-bottom:24px;text-align:center;}.hero__button{width:240px;margin:0 auto;}}.blocklets{margin:40px auto;}"],(function(e){return e.theme.breakpoints.values.sm}))}}]);
//# sourceMappingURL=component---src-templates-blocklet-list-js-69f3bfe38cd0b42ed208.js.map