{"version":3,"sources":["webpack:///./src/pages/haiku-abacus.js","webpack:///./src/components/styles/story4/story4.module.css"],"names":["Button","styled","button","Story4","story","data","allContentfulStory4","nodes","charSet","rel","href","className","Story4Style","map","stry","header","title","date","mainBody","key","id","section0","div0","showArrows","showStatus","showIndicators","infiniteLoop","autoPlay","showThumbs","story4CarouselRoot","carousel","image","src","fluid","alt","story4CarouselImage","section1","maintText1","section3","div2","img2","rightImage","textdiv","p2","mainText2","p3","documentToReactComponents","JSON","parse","mainText3","raw","style","textAlign","paddingTop","fontSize","price","target","marginBottom","module","exports"],"mappings":"qlBAYA,IAAMA,EAASC,IAAOC,OAAV,KA2JGC,UAvIA,SAAC,GAAc,IAEYC,EAFb,EAAXC,KAENC,oBAAuBC,MAE/B,OACI,kBAAC,IAAD,KACE,kBAAC,IAAD,KACM,0BAAMC,QAAQ,UACd,yDACA,0BAAMC,IAAI,YAAYC,KAAK,wCAE/B,6BAASC,UAAWC,KACfR,EAAMS,KAAI,SAACC,GACR,OACI,yBAAKH,UAAU,eACX,yBAAKA,UAAWC,IAAYG,QACxB,4BAAI,2BAAID,EAAKE,QACb,2BAAIF,EAAKG,OAEb,yBAAKN,UAAWC,IAAYM,UACxB,6BAASC,IAAKL,EAAKM,IACf,6BAAST,UAAWC,IAAYS,UAC5B,yBAAKV,UAAWC,IAAYU,MACxB,kBAAC,WAAD,CAAUC,YAAY,EAClBC,YAAY,EACZC,gBAAgB,EAChBC,cAAc,EACdC,UAAU,EACVC,YAAY,EAEZjB,UAAWC,IAAYiB,oBAKtBf,EAAKgB,SAASjB,KAAI,SAAAkB,GACf,OACI,yBAAKZ,IAAKY,EAAMX,GACZY,IAAKD,EAAME,MAAMD,IACjBE,IAAKH,EAAMf,MACXL,UAAWC,IAAYuB,4BAU/C,6BAASxB,UAAWC,IAAYwB,UAC5B,2BACKtB,EAAKuB,WAAWA,aAGzB,6BAAS1B,UAAWC,IAAY0B,UAC5B,yBAAK3B,UAAWC,IAAY2B,MACxB,yBAAK5B,UAAWC,IAAY4B,KAAMR,IAAKlB,EAAK2B,WAAWR,MAAMD,IAAKE,IAAKpB,EAAKM,MAEhF,yBAAKT,UAAWC,IAAY8B,SACxB,uBAAG/B,UAAWC,IAAY+B,IACrB7B,EAAK8B,UAAUA,WAEpB,yBAAKjC,UAAWC,IAAYiC,IACvBC,oCAA0BC,KAAKC,MAAMlC,EAAKmC,UAAUC,WAMzE,6BAASvC,UAAWC,IAAYM,SAC5BiC,MAAO,CACHC,UAAW,SACXC,WAAY,OACZC,SAAU,SAGd,2BACKxC,EAAKE,OAEV,2BACKF,EAAKyC,OAEV,6BACA,uBAAGC,OAAO,SAAS/C,IAAI,aAAaC,KAAK,8EAA6E,kBAACV,EAAD,CAAQmD,MAAO,CAAEM,aAAc,SAA/B,uB,4CCnHtJC,EAAOC,QAAU,CAAC,WAAa,oCAAoC,OAAS,+BAA+B,SAAW,iCAAiC,SAAW,iCAAiC,KAAO,6BAA6B,mBAAqB,2CAA2C,oBAAsB,4CAA4C,SAAW,iCAAiC,SAAW,iCAAiC,KAAO,6BAA6B,KAAO,6BAA6B,SAAW,iCAAiC,QAAU,gCAAgC,GAAK,2BAA2B,KAAO,6BAA6B,KAAO,6BAA6B,SAAW","file":"component---src-pages-haiku-abacus-js-91d556bddb1a02e5154c.js","sourcesContent":["import React from 'react'\nimport Layout from '../components/layout'\nimport { graphql } from 'gatsby'\nimport { Carousel } from 'react-responsive-carousel';\n// import '../components/styles/story1/story1carousel.module.css'\nimport 'react-responsive-carousel/lib/styles/carousel.min.css'\nimport Story4Style from '../components/styles/story4/story4.module.css'\nimport '../components/styles/story4/story4.module.css'\nimport { documentToReactComponents } from '@contentful/rich-text-react-renderer'\nimport styled from 'styled-components';\nimport Helmet from 'react-helmet'\n\nconst Button = styled.button`\nwidth: 120px;\n  padding: 10px 10px;\n  font-size: 12px;\n  borderRadius: 3px;\n  cursor: pointer;\n  background-color: white;\n  color: black;\n  border: 2px solid black;\n\n    &:hover {\n      background-color: black;\n      color: white;\n    }\n\n    &:focus {\n      outline: none\n    }\n  `\n\nconst Story4 = ({ data }) => {\n\n    const { allContentfulStory4: { nodes: story },\n    } = data\n    return (\n        <Layout>\n          <Helmet>\n                <meta charSet=\"utf-8\" />\n                <title>Haiku Abacus - Neferka</title>\n                <link rel=\"canonical\" href=\"http://neferka.design/haiku-abacus\" />\n            </Helmet>\n            <section className={Story4Style}>\n                {story.map((stry) => {\n                    return (\n                        <div className=\"story4-body\">\n                            <div className={Story4Style.header}>\n                                <h1><b>{stry.title}</b></h1>\n                                <p>{stry.date}</p>\n                            </div>\n                            <div className={Story4Style.mainBody}>\n                                <article key={stry.id}>\n                                    <section className={Story4Style.section0}>\n                                        <div className={Story4Style.div0}>\n                                            <Carousel showArrows={true}\n                                                showStatus={false}\n                                                showIndicators={false}\n                                                infiniteLoop={true}\n                                                autoPlay={true}\n                                                showThumbs={false}\n                                                // dynamicHeight={true}\n                                                className={Story4Style.story4CarouselRoot}\n                                            // style={{\n                                            //     height: '90vh',\n                                            // }}\n                                            >\n                                                {stry.carousel.map(image => {\n                                                    return (\n                                                        <img key={image.id}\n                                                            src={image.fluid.src}\n                                                            alt={image.title}\n                                                            className={Story4Style.story4CarouselImage}\n                                                        // style={{\n                                                        //     height: '90vh',\n                                                        // }}\n                                                        />\n                                                    )\n                                                })}\n                                            </Carousel>\n                                        </div>\n                                    </section>\n                                    <section className={Story4Style.section1}>\n                                        <p>\n                                            {stry.maintText1.maintText1}\n                                        </p>\n                                    </section>\n                                    <section className={Story4Style.section3}>\n                                        <div className={Story4Style.div2}>\n                                            <img className={Story4Style.img2} src={stry.rightImage.fluid.src} alt={stry.id} />\n                                        </div>\n                                        <div className={Story4Style.textdiv}>\n                                            <p className={Story4Style.p2}>\n                                                {stry.mainText2.mainText2}\n                                            </p>\n                                            <div className={Story4Style.p3}>\n                                                {documentToReactComponents(JSON.parse(stry.mainText3.raw))}\n                                            </div>\n                                        </div>\n                                    </section>\n                                </article>\n                            </div>\n                            <section className={Story4Style.mainBody}\n                                style={{\n                                    textAlign: 'center',\n                                    paddingTop: '2rem',\n                                    fontSize: '20px'\n                                }}\n                            >\n                                <p>\n                                    {stry.title}\n                                </p>\n                                <p>\n                                    {stry.price}\n                                </p>\n                                <div>\n                                <a target=\"_blank\" rel=\"noreferrer\" href=\"https://www.etsy.com/listing/986901512/haiki-abacus?ref=shop_home_active_1\"><Button style={{ marginBottom: '2rem' }}>Purchase</Button></a>\n                                </div>\n                            </section>\n                        </div>\n                    )\n                })}\n            </section>\n        </Layout>\n    )\n}\n\n\n\nexport const query = graphql`\n  {\n    allContentfulStory4 {\n        nodes {\n          title\n          slug\n          rightImage {\n            fluid {\n              src\n            }\n          }\n          price\n          maintText1 {\n            maintText1\n          }\n          mainText3{\n            raw\n          }\n          mainText2 {\n            mainText2\n          }\n          image {\n            fluid {\n              src\n            }\n          }\n          date\n          id\n          carousel {\n            fluid {\n              src\n            }\n          }\n        }\n      }\n  }\n  `\n\nexport default Story4\n","// extracted by mini-css-extract-plugin\nmodule.exports = {\"story4Body\":\"story4-module--story4-body--w3GFm\",\"header\":\"story4-module--header--I4_BJ\",\"mainBody\":\"story4-module--mainBody--3q3JM\",\"section0\":\"story4-module--section0--2n-PX\",\"div0\":\"story4-module--div0--3fPPQ\",\"story4CarouselRoot\":\"story4-module--story4CarouselRoot--32Fwt\",\"story4CarouselImage\":\"story4-module--story4CarouselImage--31jQ3\",\"section1\":\"story4-module--section1--3m-ga\",\"section2\":\"story4-module--section2--3qP7V\",\"div1\":\"story4-module--div1--AEP7B\",\"img1\":\"story4-module--img1--35a4v\",\"section3\":\"story4-module--section3--3snvv\",\"textdiv\":\"story4-module--textdiv--7xfGn\",\"p3\":\"story4-module--p3--1fsfs\",\"div2\":\"story4-module--div2--2It_F\",\"img2\":\"story4-module--img2--hYAEl\",\"section4\":\"story4-module--section4--1dWxn\"};"],"sourceRoot":""}