made lyrics section workable.

src/components/DetailsHeader.jsx

@@ -1,3 +1,38 @@
-const DetailsHeader = () => <div>DetailsHeader</div>
+import { Link } from 'react-router-dom'
+
+const DetailsHeader = ({ artistId, artistData, songData }) => {
+  const artist = artistData?.artists[artistId]?.attributes
+
+  return (
+    <div className="relative w-full flex flex-col">
+      <div className="w-full bg-gradient-to-1 from-transparent to-black sm:h-48 h-28" />
+      <div className="absolute inset-0 flex items-center">
+        <img
+          alt="art"
+          src={
+            artistId
+              ? artist?.artwork?.url
+                  .replace('{w}', '500px')
+                  .replace('{h}', '500')
+              : songData?.images?.coverart
+          }
+          className="sm:w-48 w-28 sm:h-48 h-28 rounded-full object-cover border-2 shadow-xl shadow-black "
+        />
+        <div className="ml-5">
+          <p className="font-bold sm:text-3xl text-xl text-white">
+            {artistId ? artist?.name : songData?.title}
+          </p>
+          {!artistId && (
+            <Link to={`/artists/${songData?.artists[0].adamid}`}>
+              <p className="text-base text-gray-400 mt-2">
+                {songData?.subtitle}
+              </p>
+            </Link>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
 
 export default DetailsHeader

src/pages/SongDetails.jsx

@@ -1,3 +1,37 @@
-const SongDetails = () => <div>SongDetails</div>
+import { useParams } from 'react-router-dom'
+import { useSelector, useDispatch } from 'react-redux'
+import { DetailsHeader, Error, Loader, RelatedSongs } from '../components'
+
+import { setActiveSong, playPause } from '../redux/features/playerSlice'
+import { useGetSongDetailsQuery } from '../redux/features/services/shazamCore'
+
+const SongDetails = () => {
+  const dispatch = useDispatch()
+
+  const { activeSong, isPlaying } = useSelector((state) => state.player)
+
+  const { songid } = useParams()
+
+  const { data: songData, isFetching: isFetchingSongDetails } =
+    useGetSongDetailsQuery({ songid })
+
+  return (
+    <div className="flex flex-col">
+      <DetailsHeader artistId="" songData={songData} />
+      <div className="mb-10">
+        <h2 className="text-white text-3xl font-bold">Lyrics</h2>
+        <div className="mt-5">
+          {songData?.sections[1].type === 'LYRICS' ? (
+            songData?.sections[1].text.map((line, i) => (
+              <p className="text-gray-400 text-base my-1">{line}</p>
+            ))
+          ) : (
+            <p className='text-white text-base my-1'>Sorry , no lyrics found</p>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
 
 export default SongDetails

src/redux/features/services/shazamCore.js

@@ -16,7 +16,10 @@ export const shazamCoreApi = createApi({
     getTopCharts: builder.query({
       query: () => '/charts/world',
     }),
+    getSongDetails: builder.query({
+      query: ({ songid }) => `/tracks/details?track_id=${songid}`,
+    }),
   }),
 })
 
-export const { useGetTopChartsQuery } = shazamCoreApi
+export const { useGetTopChartsQuery, useGetSongDetailsQuery } = shazamCoreApi