diff --git a/src/pages/Search.jsx b/src/pages/Search.jsx
index 3223815..7288e42 100644
--- a/src/pages/Search.jsx
+++ b/src/pages/Search.jsx
@@ -1,5 +1,44 @@
-const Search = () => (
-
Search
-);
+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 ;
+ }
+
+ if (error) {
+ return ;
+ }
+
+ return (
+
+
+ Showing result for {searchTerm}
+
+
+
+ {songs?.map((song, i) => (
+
+ ))}
+
+
+ );
+};
export default Search;
diff --git a/src/redux/services/shazamCore.js b/src/redux/services/shazamCore.js
index d883d79..918ba84 100644
--- a/src/redux/services/shazamCore.js
+++ b/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;