implemented top artists and charts

src/components/TopPlay.jsx

@@ -1,3 +1,139 @@
-const TopPlay = () => <div>TopPlay</div>
+import { useRef, useEffect } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { Swiper, SwiperSlide } from 'swiper/react'
+import { Link } from 'react-router-dom'
+import { FreeMode } from 'swiper'
+
+import PlayPause from './PlayPause'
+import { playPause, setActiveSong } from '../redux/features/playerSlice'
+import { useGetTopChartsQuery } from '../redux/features/services/shazamCore'
+
+import 'swiper/css'
+import 'swiper/css/free-mode'
+import { TopCharts } from '../pages'
+
+const TopChartCard = ({
+  song,
+  i,
+  isPlaying,
+  activeSong,
+  handlePauseClick,
+  handlePlayClick,
+}) => (
+  <div className="w-full flex flex-row items-center hover:bg-[#4c426e] py-2 p-4 rounded-lg cursor-pointer mb-2">
+    <h3 className="font-bold text-base text-white mr-3">{i + 1}</h3>
+
+    <div className="flex-1 flex flex-row justify-between items-center">
+      <img
+        src={song?.images.coverart}
+        alt={song?.title}
+        className="w-20 h-20 rounded-lg"
+      />
+      <div className="flex-1 flex flex-col justify-center mx-3">
+        <Link to={`/songs/${song?.key}`}>
+          <p className="text-xl font-bold text-white">{song?.title}</p>
+        </Link>
+        <Link to={`/artists/${song?.artists[0].adamid}`}>
+          <p className="text-base font-bold text-gray-300 mt-1">
+            {song?.subtitle}
+          </p>
+        </Link>
+      </div>
+    </div>
+
+    <PlayPause
+      isPlaying={isPlaying}
+      activeSong={activeSong}
+      song={song}
+      handlePause={handlePauseClick}
+      handlePlay={handlePlayClick}
+    />
+  </div>
+)
+
+const TopPlay = () => {
+  const dispatch = useDispatch()
+  const { activeSong, isPlaying } = useSelector((state) => state.player)
+  const { data } = useGetTopChartsQuery()
+  const divRef = useRef(null)
+
+  useEffect(() => {
+    divRef.current.scrollIntoView({ behavior: 'smooth' })
+  })
+
+  const topPlays = data?.slice(0, 5)
+
+  const handlePauseClick = () => {
+    dispatch(playPause(false))
+  }
+
+  const handlePlayClick = (song, i) => {
+    dispatch(setActiveSong({ song, data, i }))
+    dispatch(playPause(true))
+  }
+
+  return (
+    <div
+      ref={divRef}
+      className="xL:ml-6 ml-0 xl:mb-0 mb-6 flex-1 xl:max-w-[500px] max-w-full flex flex-col"
+    >
+      <div className="w-full flex flex-col">
+        <div className="flex flex-row justify-between items-center">
+          <h2 className="text-white font-bold text-2xl">Top Charts</h2>
+          <Link to="/top-charts">
+            <p className="text-gray-300 text-base cursor-pointer">See More</p>
+          </Link>
+        </div>
+        <div className="mt-4 flex flex-col gap-1">
+          {topPlays?.map((song, i) => (
+            <TopChartCard
+              key={song.key}
+              song={song}
+              i={i}
+              isPlaying={isPlaying}
+              activeSong={activeSong}
+              handlePauseClick={handlePauseClick}
+              handlePlayClick={() => handlePlayClick(song, i)}
+            />
+          ))}
+        </div>
+      </div>
+      <div className="w-full flex flex-col mt-8">
+        <div className="flex flex-row justify-between items-center">
+          <h2 className="text-white font-bold text-2xl">Top Artists</h2>
+          <Link to="/top-artists">
+            <p className="text-gray-300 text-base cursor-pointer">See More</p>
+          </Link>
+        </div>
+
+        <Swiper
+          slidesPerView="auto"
+          spaceBetween={15}
+          freeMode
+          centeredSlides
+          centeredSlidesBounds
+          modules={[FreeMode]}
+          className="mt-4"
+        >
+          {topPlays?.map((song, i) => (
+            <SwiperSlide
+              key={song?.key}
+              style={{ width: '25%', height: 'auto' }}
+              className="shadow-lg rounded-full animate-slideright"
+            >
+              <Link to={`/artists/${song?.artists[0].adamid}`}>
+                <img
+                  src={song?.images.background}
+                  alt="name"
+                  className="rounded-full w-full object-cover"
+                />
+              </Link>
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      </div>
+    </div>
+  )
+}
 
 export default TopPlay

src/redux/features/services/shazamCore.js

@@ -7,7 +7,7 @@ export const shazamCoreApi = createApi({
     prepareHeaders: (headers) => {
       headers.set(
         'X-RapidAPI-Key',
-        ''
+        '16c4865cd0msh426323ab2dd362fp1449c0jsn5aa772e9f8e2'
       )
       return headers
     },