{"version":3,"file":"component---src-pages-showroom-js-0f446d453104c658f0fa.js","mappings":"6IAQC,IANoB,SAAC,GAAgB,IAAfA,EAAc,EAAdA,SACpB,OACE,sBAAIC,UAAU,2BAA2BD,K,mCCQ9C,IAT2B,SAAC,GAA2D,IAAD,IAAxDC,UAAAA,OAAwD,MAA9C,GAA8C,MAA3CC,iBAAAA,OAA2C,MAA1B,GAA0B,EAAtBC,EAAsB,EAAtBA,MAAOH,EAAe,EAAfA,SACrE,OACE,2BAASC,UAAcA,EAAL,mDAChB,sBAAIA,UAAU,8CAA8CE,GAC5D,uBAAKF,UAAWC,GAAmBF,M,sGCoDzC,UAhDqB,SAAC,GAAwB,IAAtBI,EAAqB,EAArBA,KAAMC,EAAe,EAAfA,SACtBC,EAAYF,EAAKG,KAAKC,aAAaL,MACnCM,EAASL,EAAKM,QAAQC,MAAM,GAAGC,SAASH,OACxCI,EAAST,EAAKM,QAAQC,MAAM,GAAGC,SAASC,OAExCC,EAAY,MAClB,OACE,gBAAC,IAAD,CAAQT,SAAUA,EAAUF,MAAOG,GACjC,gBAAC,IAAD,CAAKH,MAAOW,IACZ,gBAAC,IAAD,CAAQX,MAAOW,IACf,gBAAC,IAAD,KAAcA,GACd,uBAAKb,UAAU,YACf,gBAAC,IAAD,CAASE,MAAM,GAAGF,UAAU,kEAA5B,mCAGE,gBAAC,IAAD,CAASE,MAAM,QAAQF,UAAU,kEAC/B,sBAAIA,UAAU,yCACXQ,EAAOM,KAAI,gBAAGC,EAAH,EAAGA,KAAMC,EAAT,EAASA,MAAT,OACV,sBAAIhB,UAAU,kEACZ,2BACE,uBAAKA,UAAU,iDACb,uBAAKA,UAAU,qBAAqBiB,IAAKD,EAAOE,QAAQ,UAE1D,uBAAKlB,UAAU,0CAA0CE,MAAOa,GAAOA,UAMjF,gBAAC,IAAD,CAASb,MAAM,SAASF,UAAU,kEAChC,sBAAIA,UAAU,yCACXY,EAAOE,KAAI,gBAAGC,EAAH,EAAGA,KAAMC,EAAT,EAASA,MAAT,OACV,sBAAIhB,UAAU,kEACZ,2BACE,uBAAKA,UAAU,YACb,uBAAKA,UAAU,2CAA2CiB,IAAKD,EAAOE,QAAQ,UAEhF,uBAAKlB,UAAU,0CAA0CE,MAAOa,GAAOA","sources":["webpack://gatsby-starter-blog/./src/components/pageHeading.js","webpack://gatsby-starter-blog/./src/components/productPageSection.js","webpack://gatsby-starter-blog/./src/pages/showroom.js"],"sourcesContent":[" import * as React from \"react\"\n \n const PageHeading = ({children}) => {\n   return (\n     <h1 className=\"text-4xl font-bold mb-5\">{children}</h1>\n   )\n }\n \n export default PageHeading\n ","import * as React from \"react\"\nimport PropTypes from \"prop-types\"\n\nconst productPageSection = ({ className='',contentClassName='', title, children }) => {\n  return (\n    <section className={`${className} product-page-section pt-2 pb-4 sm:pt-4 sm:pb-8`}>\n      <h4 className=\"product-page-section-header mb-4 font-bold\">{title}</h4>\n      <div className={contentClassName}>{children}</div>\n    </section>\n  )\n}\n\nexport default productPageSection\n\nproductPageSection.propTypes = {\n  title: PropTypes.string,\n  children: PropTypes.element,\n}","import * as React from \"react\"\nimport { graphql, Link } from \"gatsby\"\n\nimport Layout from \"../components/layout\"\nimport Seo from \"../components/seo\"\nimport PageHeading from \"../components/pageHeading\"\nimport Section from \"../components/productPageSection\"\nimport { StaticImage } from \"gatsby-plugin-image\"\nimport { Helmet } from \"react-helmet\"\n\n\nconst ShowroomPage = ({ data, location }) => {\n  const siteTitle = data.site.siteMetadata.title\n  const albums = data.allYaml.nodes[0].showroom.albums\n  const movies = data.allYaml.nodes[0].showroom.movies\n\n  const pageTitle = '陈列室';\n  return (\n    <Layout location={location} title={siteTitle}>\n      <Seo title={pageTitle} />\n      <Helmet title={pageTitle} />\n      <PageHeading>{pageTitle}</PageHeading>\n      <div className=\"divide-y\">\n      <Section title=\"\" className=\"delay-animate-list-item delay-animate-fade-in fade-in-slide-up\">\n        这里是我的陈列室，展示我的喜好和收藏。仅仅是展示，请勿触碰哦。\n      </Section>\n        <Section title=\"💿 音乐\" className=\"delay-animate-list-item delay-animate-fade-in fade-in-slide-up\">\n          <ul className=\"grid grid-cols-2 gap-4 sm:grid-cols-4\">\n            {albums.map(({ name, image }) => (\n              <li className=\"delay-animate-list-item delay-animate-fade-in fade-in-slide-up\">\n                <div>\n                  <div className=\"relative rounded-lg shadow-lg overflow-hidden\">\n                    <img className=\"w-full album-cover\" src={image} loading=\"lazy\" />\n                  </div>\n                  <div className=\"mt-3 line-clamp-1 text-sm font-semibold\" title={name}>{name}</div>\n                </div>\n              </li>\n            ))}\n          </ul>\n        </Section>\n        <Section title=\"📽️ 电影\" className=\"delay-animate-list-item delay-animate-fade-in fade-in-slide-up\">\n          <ul className=\"grid grid-cols-2 gap-4 sm:grid-cols-4\">\n            {movies.map(({ name, image }) => (\n              <li className=\"delay-animate-list-item delay-animate-fade-in fade-in-slide-up\">\n                <div>\n                  <div className=\"relative\">\n                    <img className=\"w-full rounded-lg shadow-lg movie-poster\" src={image} loading=\"lazy\"/>\n                  </div>\n                  <div className=\"mt-3 line-clamp-1 text-sm font-semibold\" title={name}>{name}</div>\n                </div>\n              </li>\n            ))}\n          </ul>\n        </Section>\n      </div>\n    </Layout>\n  )\n}\n\nexport default ShowroomPage\n\nexport const pageQuery = graphql`\n  query {\n    site {\n      siteMetadata {\n        title\n      }\n    }\n    allYaml {\n      nodes {\n        showroom {\n          movies {\n            name\n            category\n            description\n            image\n          }\n          albums {\n            name\n            category\n            description\n            image\n          }\n        }\n      }\n    }\n  }\n`"],"names":["children","className","contentClassName","title","data","location","siteTitle","site","siteMetadata","albums","allYaml","nodes","showroom","movies","pageTitle","map","name","image","src","loading"],"sourceRoot":""}