fix: eslint rules applied

.eslintrc.json

@@ -1,3 +1,6 @@
 {
-  "extends": ["next"]
+  "extends": ["next"],
+  "rules": {
+    "@next/next/no-img-element": "off"
+  }
 }

components/AlbumPage/index.tsx

@@ -32,6 +32,7 @@ const AlbumPage = () => {
               <img
                 src={topSongsData[2].img}
                 className="w-12 h-12 object-cover m-10 rounded-xl"
+                alt={topSongsData[2].artist}
               />
               <div>
                 <p className="font-bold">{topSongsData[2].artist}</p>
@@ -42,13 +43,14 @@ const AlbumPage = () => {
               <img
                 src={equalizer.src}
                 className="w-[20rem] h-[20rem] object-cover"
+                alt="equalizer"
               />
             </div>
             <BottomPlayer isFixed={false} />
           </div>
           <div className="w-full flex flex-col md:flex-wrap ml-5 mobile:h-fit">
-            {topSongsData.map((song) => {
-              return <SongCard song={song} />;
+            {topSongsData.map((song, index) => {
+              return <SongCard key={index} song={song} />;
             })}
           </div>
         </div>

components/modules/HotSongs/HotSongsCard/index.tsx

@@ -13,8 +13,8 @@ const HotSongsCard: FC<HotSongsCardProps> = ({ data }) => {
       className="w-1/2 bg-white  px-5 py-5 rounded-xl shadow-xl  mobile:w-full mobile:mx-0"
       title="Hot Songs"
     >
-      {data.map((song) => {
-        return <SongCard song={song} />;
+      {data.map((song, index) => {
+        return <SongCard key={index} song={song} />;
       })}
     </Carousel>
   );