Add Search Page component

src/pages/Search.jsx

@@ -1,5 +1,44 @@
-const Search = () => (
-  <div>Search</div>
-);
+import { useSelector } from 'react-redux';
+import { useParams } from 'react-router-dom';
+
+import { Error, Loader, SongCard } from '../components';
+import { useGetSongsBySearchQuery } from '../redux/services/shazamCore';
+
+const Search = () => {
+  const { searchTerm } = useParams();
+  const { activeSong, isPlaying } = useSelector((state) => state.player);
+  const { data, isFetching, error } = useGetSongsBySearchQuery(searchTerm);
+
+  const songs = data?.tracks?.hits?.map((song) => song.track);
+
+  if (isFetching) {
+    return <Loader title="Loading top charts" />;
+  }
+
+  if (error) {
+    return <Error />;
+  }
+
+  return (
+    <div className="flex flex-col">
+      <h2 className="font-bold text-3xl text-white text-lfet mt-4 mb-10">
+        Showing result for <span className="font-black">{searchTerm}</span>
+      </h2>
+
+      <div className="flex flex-wrap sm:justify-start justify-center gap-8">
+        {songs?.map((song, i) => (
+          <SongCard
+            key={song.key}
+            song={song}
+            isPlaying={isPlaying}
+            activeSong={activeSong}
+            data={songs}
+            i={i}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
 
 export default Search;

src/redux/services/shazamCore.js

@@ -30,6 +30,10 @@ export const shazamCoreApi = createApi({
     getSongsByGenre: builder.query({
       query: (genre) => `/charts/genre-world?genre_code=${genre}`,
     }),
+    getSongsBySearch: builder.query({
+      query: (searchTerm) =>
+        `/search/multi?search_type=SONGS_ARTISTS&query=${searchTerm}`,
+    }),
   }),
 });
 
@@ -40,4 +44,5 @@ export const {
   useGetArtistDetailsQuery,
   useGetSongsByCountryQuery,
   useGetSongsByGenreQuery,
+  useGetSongsBySearchQuery,
 } = shazamCoreApi;