{"version":3,"sources":["components/Artists.js","components/Icons.js","components/Vinyl.js","components/Playlists.js","components/MainHeader.js","components/SidebarHeader.js","components/Footer.js","App.js","index.js"],"names":["Artists","props","generateDelimiter","index","length","artistList","map","artists","className","href","external_urls","spotify","target","rel","name","id","Icons","src","alt","link","Vinyl","titleUrl","cover","song","artist","Playlists","playlistUrl","playlistName","trackNumber","MainHeader","SidebarHeader","Footer","albumArray","data","albums","items","playlistArray","playlistData","playlists","App","playlist","images","url","tracks","total","album","ReactDOM","render","document","getElementById"],"mappings":"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","file":"static/js/main.908081cc.chunk.js","sourcesContent":["import React from 'react'\n\nconst Artists = (props) => {\n  // this makes the , and & between the names\n  const generateDelimiter = (index, length) => {\n    if (index === length - 2) {\n      return ' & '\n    } else if (index < length - 2) {\n      return ', '\n    }\n  }\n  return (\n    <>\n      {props.artistList.map((artists, index) => {\n        return (\n          // prettier-ignore\n          <a key={artists.id} className=\"artist\" href={artists.external_urls.spotify} target=\"_blank\" rel=\"noopener noreferrer\">\n            <h2>\n              {artists.name}\n              {generateDelimiter(index, props.artistList.length)}\n            </h2>\n          </a>\n        )\n      })}\n    </>\n  )\n}\n\nexport default Artists\n","import React from 'react'\n\nconst Icons = (props) => {\n  return (\n    <div className=\"icon-container\">\n      <img src=\"/icons/heart.svg\" alt=\"heart\" className=\"heart icons\" />\n      <a href={props.link} target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"/icons/play.svg\" alt=\"play\" className=\"play icons\" />\n      </a>\n      <img src=\"/icons/dots.svg\" alt=\"dots\" className=\"dots icons\" />\n    </div>\n  )\n}\n\nexport default Icons\n","import React from 'react'\nimport Artists from './Artists'\nimport Icons from './Icons'\n\n// first we do an album/vinyl\nconst Vinyl = (props) => {\n  return (\n    <article className=\"vinyl-card\">\n      <Icons link={props.titleUrl} />\n      <img className=\"album-cover\" src={props.cover} alt=\"album artwork\" />\n      <a href={props.titleUrl} target=\"_blank\" rel=\"noopener noreferrer\">\n        <h2 className=\"song-title\">{props.song}</h2>\n      </a>\n      <div className=\"artist-wrapper\">\n        <Artists artistList={props.artist} />\n      </div>\n    </article>\n  )\n}\n\nexport default Vinyl\n","import React from 'react'\n\nconst Playlists = (props) => {\n  return (\n    <div className=\"playlist-cards\">\n      {/* prettier-ignore */}\n      <img\n        className=\"playlist-icon\"\n        src={props.cover}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        alt=\"playlist\" />\n      <a href={props.playlistUrl} target=\"_blank\" rel=\"noopener noreferrer\">\n        <h3 className=\"playlist-name\">{props.playlistName}</h3>\n      </a>\n      <p className=\"platlist-track\">{props.trackNumber} tracks</p>\n    </div>\n  )\n}\n\nexport default Playlists\n","import React from 'react'\n\nconst MainHeader = () => {\n  return (\n    <header className=\"header\">\n      <h1 className=\"main-heading\">New Albums and Singles</h1>\n      {/* prettier-ignore */}\n      <img\n        src=\"/icons/spotify4.svg\"\n        alt=\"spotify logo\"\n        className=\"header-logo\" />\n    </header>\n  )\n}\n\nexport default MainHeader\n","import React from 'react'\n\nconst SidebarHeader = () => {\n  return (\n    <>\n      <h1 className=\"main-heading\"> Playlists</h1>\n      <hr className=\"horizontal-line\" />\n    </>\n  )\n}\n\nexport default SidebarHeader\n","import React from 'react'\n\n// This component is the footer in the sidebar.\nconst Footer = () => {\n  return (\n    <>\n      <hr className=\"horizontal-line\" />\n      <p className=\"signature\">\n        Created by {/* prettier-ignore */}\n        <a href=\"https://github.com/loulunds\" target=\"_blank\" rel=\"noopener noreferrer\"><span className=\"github-link\">Lousanne {' '}</span></a>\n        and {/* prettier-ignore */}\n        <a href=\"https://github.com/jakobxlindstrom\" target=\"_blank\" rel=\"noopener noreferrer\"><span className=\"github-link\">Jakob</span>{' '}</a>\n        for Technigo 2021\n      </p>\n    </>\n  )\n}\n\nexport default Footer\n","import React from 'react'\nimport data from './data.json'\nimport playlistData from './stretch-goal.json'\n\n// components to import in app.js\nimport Vinyl from './components/Vinyl'\nimport Playlists from './components/Playlists'\nimport MainHeader from './components/MainHeader'\nimport SidebarHeader from './components/SidebarHeader'\nimport Footer from './components/Footer'\n\n// I just put this in variable so it's easier\nconst albumArray = data.albums.items\nconst playlistArray = playlistData.playlists.items\n\n// then here we have the \"entire\" website\n// run this and you will see all the albums and artists\nexport const App = () => {\n  return (\n    <div className=\"project-container\">\n      <aside className=\"sidebar\">\n        {/* Editor's picks sidebar container */}\n        <SidebarHeader />\n        <div className=\"playlist-container\">\n          {playlistArray.map((playlist) => {\n            return (\n              // prettier-ignore\n              <Playlists\n                key={playlist.id}\n                cover={playlist.images[0].url}\n                playlistName={playlist.name}\n                playlistUrl={playlist.external_urls.spotify}\n                trackNumber={playlist.tracks.total} />\n            )\n          })}\n        </div>\n        <Footer />\n      </aside>\n      <main>\n        <MainHeader />\n        <hr className=\"horizontal-line\" />\n        {/* main container for the vinyls */}\n        <div className=\"container\">\n          {albumArray.map((album) => {\n            return (\n              // prettier-ignore\n              <Vinyl\n                key={album.artists[0].id}\n                cover={album.images[1].url}\n                song={album.name}\n                titleUrl={album.external_urls.spotify}\n                artist={album.artists} />\n            )\n          })}\n        </div>\n      </main>\n    </div>\n  )\n}\n","import React from 'react'\nimport ReactDOM from 'react-dom'\nimport './index.css'\nimport { App } from './App'\n\nReactDOM.render(<App />, document.getElementById('root'))\n"],"sourceRoot":""}