{"version":3,"file":"component---src-pages-music-js-b75dff30f1c140baf4f0.js","mappings":"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","sources":["webpack://kyla-la-grange/./src/pages/music.js"],"sourcesContent":["import { getImage, GatsbyImage } from \"gatsby-plugin-image\"\nimport React, {useState} from \"react\"\nimport { motion, AnimatePresence } from 'framer-motion'\nimport {musicHolder, releaseHolder, musicNav, releasesHolder} from './Pages.module.scss'\nimport { graphql } from \"gatsby\"\nimport Seo from \"../components/utilities/Seo\"\n\n\nconst Wrap = ({ condition, wrapper, children }) => \ncondition ? wrapper(children) : children;\n\n\nconst Release = ({release, image})=> {\n  const releaseVariants = {\n    pre: {\n      x: \"-2rem\",\n      opacity:0\n    },\n    vis: {\n      x: \"0rem\",\n      opacity:1,\n      transition:{\n        duration: 0.5,\n        type:'tween',\n        ease:\"easeInOut\"\n      }\n    },\n    post: {\n      x: \"2rem\",\n      opacity:0,\n      transition:{\n        duration: 0.5,\n        type:'tween',\n        ease:\"easeInOut\"\n      }\n    }\n  }\n\n  return (\n    <motion.li className={releaseHolder} variants={releaseVariants}>\n      <Wrap\n        condition={release.links[0]?.url}\n        wrapper={children => <a href={release.links[0].url} title={release.title} target=\"_blank\" rel=\"noreferrer\" >{children}</a>}\n        >\n        <GatsbyImage image={getImage(image)} alt={release.title} />\n      </Wrap>\n\n      <Wrap\n        condition={release.links[0]?.url}\n        wrapper={children => <a href={release.links[0].url} title={release.title} target=\"_blank\" rel=\"noreferrer\" >{children}</a>}\n        >\n      <div className=\"titleAndDate\">\n        \n          <h3>{release.title}</h3>\n      \n        <p>{release.date}</p>\n      </div>\n      </Wrap>\n      <ul className=\"links\">\n        {\n          release.links.map(link=> (\n          <li key={link.url}><a href={link.url} target=\"_blank\" rel=\"noreferrer\" >{link.text}</a></li>\n          ))\n        }\n      </ul>\n    </motion.li>\n  )\n}\n\n\n\nexport default function MusicPage({data}) {\n\n  const switcherVariants = {\n    selected: {\n      \"--underline-width\": \"100%\"\n    },\n    unselected: {\n      \"--underline-width\": \"0%\"\n    }\n  }\n\n  const releasesVariants = {\n    pre: {\n      opacity:1\n    },\n    vis: {\n      opacity:1,\n      transition:{\n        duration: 0.5,\n        type:'tween',\n        ease:\"easeInOut\",\n        staggerChildren: 0.2,\n        staggerDirection: 1\n      }\n    },\n    post: {\n      opacity:0,\n      transition:{\n        duration: 0.5,\n        type:'tween',\n        ease:\"easeInOut\",\n        staggerChildren: 0.2,\n        staggerDirection: 1\n      }\n    }\n  }\n\n  const [show, setShow] = useState('singles')\n\n  const allMusic = data.allDataJson.nodes[0].music\n  const singles = allMusic.filter(release => release.type === \"single\")\n  const albums = allMusic.filter(release => release.type === \"album\")\n\n  const allImages = data.allFile.nodes\n\n  return (\n    <article className={musicHolder}>\n      <Seo title=\"Music\"\n      description=\"Kyla La Grange - releases\"/>\n\n      <section>\n        <ul className={musicNav}>\n          <li><motion.button onClick={()=>setShow('singles')} variants={switcherVariants} whileHover=\"selected\" animate={ show === 'singles' ? \"selected\" : \"unselected\" }>Singles</motion.button></li>\n          <li><motion.button onClick={()=>setShow('albums')} variants={switcherVariants} whileHover=\"selected\" animate={ show === 'albums' ? \"selected\" : \"unselected\" } >Albums</motion.button></li>\n        </ul>\n\n        <div className={releasesHolder}>\n          <AnimatePresence>\n          {\n            show === 'singles' &&\n            ( singles?.length>0\n              ?\n              <motion.ul key=\"singles\" id=\"singles\" className=\"releases\" variants={releasesVariants} initial=\"pre\" exit=\"post\" animate=\"vis\">\n              {\n                singles.map(single => {\n                  const image = allImages.find(img => img.name === single.image )\n\n                  return <Release release={single} image={image} key={single.title} />\n                })\n              }\n              </motion.ul>\n              :\n              <p>No singles found</p>\n            )\n          }\n          {\n            show === 'albums' &&\n            ( albums?.length>0 \n              ?\n              <motion.ul key=\"albums\" id=\"albums\" className=\"releases\" variants={releasesVariants} initial=\"pre\" exit=\"post\" animate=\"vis\">\n              {\n                albums.map(album => {\n\n                  const image = allImages.find(img => img.name === album.image )\n\n                  return <Release key={album.title} release={album} image={image} />\n                })\n              }\n              </motion.ul>\n              :\n              <p>No albums found</p>\n            )\n          }\n          </AnimatePresence>\n        </div>\n      </section> \n\n    </article>\n  )\n}\n\nexport const query = graphql`\nquery MusicQuery {\n  allDataJson {\n    nodes {\n      music {\n        title\n        date\n        image\n        type\n        links {\n          text\n          url\n        }\n      }\n    }\n  }\n  allFile(filter: {relativeDirectory: {eq: \"music\"}}) {\n    nodes {\n      relativeDirectory\n      name\n      childImageSharp {\n        gatsbyImageData(\n          width: 500\n          height:500\n          placeholder: BLURRED\n          formats: [AUTO, WEBP, AVIF]\n        )\n      }\n    }\n  }\n}\n`"],"names":["Wrap","condition","wrapper","children","Release","release","image","className","releaseHolder","variants","pre","x","opacity","vis","transition","duration","type","ease","post","links","url","href","title","target","rel","G","getImage","alt","date","map","link","key","text","MusicPage","data","switcherVariants","selected","unselected","releasesVariants","staggerChildren","staggerDirection","useState","show","setShow","allMusic","allDataJson","nodes","music","singles","filter","albums","allImages","allFile","musicHolder","description","musicNav","onClick","whileHover","animate","releasesHolder","length","id","initial","exit","single","find","img","name","album"],"sourceRoot":""}