music realse

.eslintrc.cjs

@@ -1,20 +1,32 @@
 module.exports = {
-  root: true,
-  env: { browser: true, es2020: true },
-  extends: [
-    'eslint:recommended',
-    'plugin:react/recommended',
-    'plugin:react/jsx-runtime',
-    'plugin:react-hooks/recommended',
-  ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
-  settings: { react: { version: '18.2' } },
-  plugins: ['react-refresh'],
-  rules: {
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended"
     ],
-  },
+    "overrides": [
+        {
+            "env": {
+                "node": true
+            },
+            "files": [
+                ".eslintrc.{js,cjs}"
+            ],
+            "parserOptions": {
+                "sourceType": "script"
+            }
+        }
+    ],
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react"
+    ],
+    "rules": {
+    }
 }

package.json

@@ -14,11 +14,12 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@svgr/webpack": "^8.1.0",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@vitejs/plugin-react": "^4.0.3",
     "eslint": "^8.45.0",
-    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
     "vite": "^4.4.5"

src/App.jsx

@@ -1,7 +1,25 @@
+/* eslint-disable react/react-in-jsx-scope */
+/* eslint-disable no-unreachable */
 import data from "./data.json";
 
 console.log(data);
 
+import { Header } from "./components/Header";
+import Album from "./components/Album";
+import "./index.css";
+
 export const App = () => {
-  return <div>Find me in src/app.jsx!</div>;
+  const albumsData = data.albums.items;
+  console.log(albumsData);
+
+  return (
+    <>
+      <Header />
+      <div className="album-wrapper">
+        {albumsData.map((albumData) => (
+          <Album key={albumData.id} albumData={albumData} />
+        ))}
+      </div>
+    </>
+  );
 };

src/components/Album.jsx

@@ -0,0 +1,58 @@
+/* eslint-disable react/prop-types */
+import React, { useState } from "react";
+import AlbumName from "./AlbumName";
+import ArtistName from "./ArtistName";
+import CoverImage from "./CoverImage";
+import { PlayIcon, HeartIcon, DotIcon } from "./Icon";
+
+const Album = ({ albumData }) => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  // Define event handlers for mouse enter and leave
+  const handleMouseEnter = () => {
+    setIsHovered(true);
+  };
+
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+  };
+
+  return (
+    <div
+      className={`album ${isHovered ? "hovered" : ""}`}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}>
+      <div className="cover-image-container">
+        <div className="cover-image">
+          <CoverImage imageUrl={albumData.images[0].url} />
+        </div>
+        {isHovered && (
+          <div className="buttons">
+            <button type="button" className="play-icon">
+              <PlayIcon />
+            </button>
+            <button type="button" className="heart-icon">
+              <HeartIcon />
+            </button>
+            <button type="button" className="dot-icon">
+              <DotIcon />
+            </button>
+          </div>
+        )}
+      </div>
+      <div className="album-name">
+        <AlbumName name={[albumData.name, albumData.external_urls.spotify]} />
+      </div>
+      <div className="artists">
+        {albumData.artists.map((artist, index) => (
+          <React.Fragment key={artist.id}>
+            <ArtistName name={[artist.name, artist.external_urls.spotify]} />
+            {index < albumData.artists.length - 1 && <span>&nbsp;&amp; </span>}
+          </React.Fragment>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Album;

src/components/AlbumName.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+// eslint-disable-next-line react/prop-types
+const AlbumName = ({ name }) => (
+  <a
+    href={name[1]}
+    target="_blank"
+    rel="noopener noreferrer"
+    className="albumName"
+    style={{ cursor: "pointer", color: "inherit", textDecoration: "none" }}>
+    <h2>{name[0]}</h2>
+  </a>
+);
+
+export default AlbumName;

src/components/ArtistName.jsx

@@ -0,0 +1,15 @@
+/* eslint-disable react/prop-types */
+import React from "react";
+
+const ArtistName = ({ name }) => (
+  <a
+    href={name[1]}
+    target="_blank"
+    rel="noopener noreferrer"
+    className="artistName"
+    style={{ cursor: "pointer", color: "inherit", textDecoration: "none" }}>
+    <h3>{name[0]}</h3>
+  </a>
+);
+
+export default ArtistName;

src/components/CoverImage.jsx

@@ -0,0 +1,7 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable react/react-in-jsx-scope */
+export const CoverImage = ({ imageUrl }) => {
+  return <img src={imageUrl} alt="Album cover" />;
+};
+
+export default CoverImage;

src/components/Header.jsx

@@ -0,0 +1,10 @@
+/* eslint-disable react/react-in-jsx-scope */
+export const Header = () => {
+  const headertext = "New albums & singels";
+
+  return (
+    <header>
+      <h1 className="header"> {headertext} </h1>
+    </header>
+  );
+};

src/components/Icon.jsx

@@ -0,0 +1,17 @@
+/* eslint-disable react/react-in-jsx-scope */
+import playIcon from "../assets/icons/play.svg";
+import heartIcon from "../assets/icons/heart.svg";
+import dotIcon from "../assets/icons/dots.svg";
+
+export const PlayIcon = () => {
+  // eslint-disable-next-line react/react-in-jsx-scope
+  return <img src={playIcon} alt="Play" />;
+};
+
+export const HeartIcon = () => {
+  return <img src={heartIcon} alt="Heart" />;
+};
+
+export const DotIcon = () => {
+  return <img src={dotIcon} alt="Dot" />;
+};

src/index.css

@@ -11,3 +11,125 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+body {
+  background-color: black;
+}
+
+.header {
+  color: #fff;
+  display: flex;
+  font-family: Helvetica, sans-serif;
+  font-size: 20px;
+  justify-content: center;
+  margin-bottom: 2em;
+  /*border: 2px solid red;*/
+}
+
+/*-----wrapping all albums-----*/
+.album-wrapper {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: 25px;
+  /* border: 2px solid red;*/
+}
+
+/*----------wrapping every single album-----*/
+.album {
+  margin: 10px;
+  color: #fff;
+  font-size: 14px;
+  /*border: 2px solid red;*/
+}
+
+/* .artistName h3 {
+  color: #a0a0a0;
+} */
+
+.artists {
+  display: flex;
+  align-items: center; /* Vertically aligns children in the middle */
+  flex-wrap: wrap;
+  gap: 5px;
+  color: #a0a0a0;
+}
+
+.artistName,
+.artists span {
+  display: inline-flex; /* Ensures inline display */
+  align-items: center; /* Aligns text vertically */
+}
+
+/*--------- container to albim image and buttons-----*/
+.cover-image-container {
+  position: relative;
+  width: 100%;
+  z-index: 1;
+  /*border: 4px solid green;*/
+}
+
+img {
+  width: 100%;
+  height: auto;
+  max-width: 600px;
+}
+
+.buttons {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+  z-index: 2;
+}
+
+button {
+  border: none;
+  padding: 0;
+  margin: 0;
+  background: none;
+  outline: none;
+  cursor: pointer;
+  fill: white;
+  filter: invert(1);
+  z-index: 2;
+  width: 40px;
+}
+
+/* --------- Hover effects-----------*/
+
+.cover-image-container:hover .cover-image img {
+  opacity: 0.3;
+}
+
+.cover-image-container .play-icon:hover,
+.cover-image-container .heart-icon:hover,
+.cover-image-container .dot-icon:hover {
+  transform: scale(1.2);
+}
+
+.album-name:hover {
+  text-decoration: underline;
+}
+
+.artists:hover {
+  text-decoration: underline;
+  color: #a0a0a0;
+}
+
+/*------ responsive design--------*/
+
+@media (min-width: 667px) {
+  .album-wrapper {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (min-width: 1025px) {
+  .album-wrapper {
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+  }
+}