{"version":3,"sources":["webpack:///./src/components/Issues.js"],"names":["Issues","data","location","issues","allGhostTag","nodes","filter","t","slug","includes","sort","a","b","parseInt","split","pop","type","flex","bg","class","style","position","height","top","left","width","display","alignItems","justifyContent","overflow","className","color","zIndex","marginBottom","id","backgroundRepeat","backgroundPosition","backgroundSize","backgroundImage","feature_image","map","i","src","og_image","onClick","navigate","href","description","name","issuesQuery"],"mappings":"2FAAA,4HAmNeA,UArMA,SAAC,GAAwB,IAAtBC,EAAqB,EAArBA,KAAMC,EAAe,EAAfA,SAEdC,EAASF,EAAKG,YAAYC,MAAMC,QAAO,SAACC,GAC1C,OAAOA,EAAEC,KAAKC,SAAS,YAS3B,OANAN,EAAOO,MACH,SAACC,EAAGC,GAAJ,OACAC,SAASF,EAAEH,KAAKM,MAAM,KAAKC,OAASF,SAASD,EAAEJ,KAAKM,MAAM,KAAKC,UAK/D,oCACI,kBAAC,IAAD,CAAUd,KAAMA,EAAMC,SAAUA,EAAUc,KAAK,YAC/C,kBAAC,IAAD,MAGA,kBAAC,IAAD,CAAQC,MAAI,EAACC,GAAI,oBACb,+kEAyDA,yBACIC,MAAM,0CACNC,MAAO,CACHC,SAAU,WACVC,OAAQ,oBACRC,IAAK,EACLC,KAAM,EACNC,MAAO,OACPC,QAAS,OACTC,WAAY,SACZC,eAAgB,SAChBC,SAAU,WAGd,wBACIC,UAAU,gBACVV,MAAO,CAAEW,MAAO,QAASC,OAAQ,GAAIC,aAAc,IAFvD,UAMA,yBACIC,GAAG,KACHd,MAAO,CACHe,iBAAkB,YAClBC,mBAAoB,SACpBC,eAAgB,QAChBC,gBAAgB,QAASnC,EAAO,GAAGoC,cAApB,KACflB,SAAU,WACVC,OAAQ,OACRC,IAAK,EACLC,KAAM,EACNC,MAAO,WAInB,yBAAKK,UAAU,aACX,yBAAKA,UAAU,oBACX,yBAAKA,UAAU,UAEV3B,EAAOqC,KAAI,SAACC,GACT,OACI,yBAAKX,UAAU,SACX,yBACIY,IAAG,GAAKD,EAAEE,SACVb,UAAU,YACVc,QAAS,kBACLC,mBAAS,IAAMJ,EAAEjC,OAErBsC,KAAML,EAAEM,cAEZ,yBACI5B,MAAM,cACNyB,QAAS,kBACLC,mBAAS,IAAMJ,EAAEjC,QAGpBiC,EAAEO,gBAmExC,IAAMC,EAAW","file":"component---src-components-issues-js-2357cfbe3810bb097a5e.js","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { graphql, navigate } from \"gatsby\";\nimport { Helmet } from \"react-helmet\";\n\nimport { Layout } from \"../components/common\";\nimport { MetaData } from \"../components/common/meta\";\n\n/**\n * Single page (/:slug)\n *\n * This file renders a single page and loads all the content.\n *\n */\nconst Issues = ({ data, location }) => {\n    // const tags =\n    const issues = data.allGhostTag.nodes.filter((t) => {\n        return t.slug.includes(\"issue\");\n    });\n\n    issues.sort(\n        (a, b) =>\n        parseInt(a.slug.split(\"-\").pop()) - parseInt(b.slug.split(\"-\").pop())\n            \n    );\n\n    return (\n        <>\n            <MetaData data={data} location={location} type=\"website\" />\n            <Helmet>\n                {/* <style type=\"text/css\">{`${page.codeinjection_styles}`}</style> */}\n            </Helmet>\n            <Layout flex bg={\"rgb(248,249,250)\"}>\n                <style>\n                    {`\n                        .issues-container {\n                            background: rgb(248,249,250);\n                            display: flex;\n                            flex: 1;\n                            flex-direction: column;\n                            justify-content: center;\n                        }\n\n                        .issues {\n                            display: grid;\n                            grid-template-columns: 1fr 1fr 1fr;\n                            grid-gap: 2rem;\n                            grid-template-rows: 32rem;\n                            margin: 10rem 0rem 10rem 0rem;\n                        }\n\n                        .issue {\n                            display: flex;\n                            flex-direction: column;\n                            @apply shadow-lg\n                        }\n\n                        .issue > img {\n                            width: 20rem;\n                            min-width: 20rem;\n                            cursor: pointer;\n                            min-height: 278px;\n                            background: white;\n                        }\n\n                        .description {\n                            margin-top: 1rem;\n                            cursor: pointer;\n                        }\n\n                        @media(max-width: 500px) {\n                            .issues-container {\n                                align-items: center;\n                                padding: 4rem;\n                            }\n\n                            .issues {\n                                grid-template-columns: 1fr;\n                                grid-template-rows: inherit;\n                                margin: 2rem 0rem 2rem 0rem;\n                            }\n\n                            .issue > img {\n                                object-fit: contain;\n                                cursor: pointer;\n                                width: 100%;\n                            }\n                        }\n                    `}\n                </style>\n                <div\n                    class=\"flex items-center w-full justify-center\"\n                    style={{\n                        position: \"relative\",\n                        height: \"calc(50vh - 6rem)\",\n                        top: 0,\n                        left: 0,\n                        width: \"100%\",\n                        display: \"flex\",\n                        alignItems: \"center\",\n                        justifyContent: \"center\",\n                        overflow: \"hidden\",\n                    }}\n                >\n                    <h1\n                        className=\"content-title\"\n                        style={{ color: \"white\", zIndex: 10, marginBottom: 0 }}\n                    >\n                        Issues\n                    </h1>\n                    <div\n                        id=\"bg\"\n                        style={{\n                            backgroundRepeat: \"no-repeat\",\n                            backgroundPosition: \"center\",\n                            backgroundSize: \"cover\",\n                            backgroundImage: `url('${issues[1].feature_image}')`,\n                            position: \"absolute\",\n                            height: \"50vh\",\n                            top: 0,\n                            left: 0,\n                            width: \"100%\",\n                        }}\n                    />\n                </div>\n                <div className=\"container\">\n                    <div className=\"issues-container\">\n                        <div className=\"issues\">\n                            {/* <span>Issues</span> */}\n                            {issues.map((i) => {\n                                return (\n                                    <div className=\"issue\">\n                                        <img\n                                            src={`${i.og_image}`}\n                                            className=\"shadow-lg\"\n                                            onClick={() =>\n                                                navigate(\"/\" + i.slug)\n                                            }\n                                            href={i.description}\n                                        />\n                                        <div\n                                            class=\"description\"\n                                            onClick={() =>\n                                                navigate(\"/\" + i.slug)\n                                            }\n                                        >\n                                            {i.name}\n                                        </div>\n                                    </div>\n                                );\n                            })}\n                        </div>\n                        {/* <div\n                        id=\"bg\"\n                        style={{\n                            backgroundRepeat: \"no-repeat\",\n                            backgroundPosition: \"center\",\n                            backgroundSize: \"cover\",\n                            backgroundImage: `url('${page.feature_image}')`,\n                            position: \"absolute\",\n                            height: \"50vh\",\n                            top: 0,\n                            left: 0,\n                            width: \"100%\",\n                        }}\n                    />\n                    <div\n                        id=\"bg-spacer\"\n                        class=\"flex items-center w-full justify-center\"\n                        style={{\n                            position: \"relative\",\n                            height: \"calc(50vh - 6rem)\",\n                            top: 0,\n                            left: 0,\n                            width: \"100%\",\n                        }}\n                    >\n                        <h1\n                            className=\"content-title\"\n                            style={{ color: \"white\" }}\n                        >\n                            {page.title}\n                        </h1>\n                    </div>\n\n                    <article className=\"content\">\n                        {/* The main page content */}\n                        {/* <section\n                            className=\"content-body load-external-scripts\"\n                            dangerouslySetInnerHTML={{ __html: page.html }}\n                        /> */}\n                        {/* </article> */}\n                    </div>\n                </div>\n            </Layout>\n        </>\n    );\n};\n\nIssues.propTypes = {\n    data: PropTypes.shape({\n        ghostPage: PropTypes.shape({\n            codeinjection_styles: PropTypes.object,\n            title: PropTypes.string.isRequired,\n            html: PropTypes.string.isRequired,\n            feature_image: PropTypes.string,\n        }).isRequired,\n    }).isRequired,\n    location: PropTypes.object.isRequired,\n};\n\nexport default Issues;\n\nexport const issuesQuery = graphql`\n    query GhostIssuesQuery {\n        allGhostTag {\n            nodes {\n                slug\n                name\n                visibility\n                feature_image\n                description\n                meta_title\n                meta_description\n                og_image\n            }\n        }\n    }\n`;\n"],"sourceRoot":""}