Add Aroundyou component

src/pages/AroundYou.jsx

@@ -1,5 +1,55 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import { useSelector } from 'react-redux';
 
-const CountryTracks = () => <div>CountryTracks</div>;
+import { Error, Loader, SongCard } from '../components';
+import { useGetSongsByCountryQuery } from '../redux/services/shazamCore';
+
+const CountryTracks = () => {
+  const [country, setCountry] = useState('');
+  const [loading, setLoading] = useState(true);
+  const { activeSong, isPlaying } = useSelector((state) => state.player);
+  const { data, isFetching, error } = useGetSongsByCountryQuery(country);
+
+  useEffect(() => {
+    // at_LWaIX7s2ECGPjSwomyBlqhS6hQC9G
+    axios
+      .get(
+        'https://geo.ipify.org/api/v2/country?apiKey=at_LWaIX7s2ECGPjSwomyBlqhS6hQC9G'
+      )
+      .then((res) => setCountry(res?.data?.location?.country))
+      .catch(() => {})
+      .finally(() => setLoading(false));
+  }, [country]);
+
+  if (isFetching && loading) {
+    return <Loader title="Loading songs around you" />;
+  }
+
+  if (error && country) {
+    return <Error />;
+  }
+
+  return (
+    <div className="flex flex-col">
+      <h2 className="font-bold text-3xl text-white text-lfet mt-4 mb-10">
+        Around you <span className="font-black">{country}</span>
+      </h2>
+
+      <div className="flex flex-wrap sm:justify-start justify-center gap-8">
+        {data?.map((song, i) => (
+          <SongCard
+            key={song.key}
+            song={song}
+            isPlaying={isPlaying}
+            activeSong={activeSong}
+            data={data}
+            i={i}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
 
 export default CountryTracks;

src/redux/services/shazamCore.js

@@ -24,6 +24,9 @@ export const shazamCoreApi = createApi({
     getArtistDetails: builder.query({
       query: (artistId) => `/artists/details?artist_id=${artistId}`,
     }),
+    getSongsByCountry: builder.query({
+      query: (country) => `/charts/country?country_code=${country}`,
+    }),
   }),
 });
 
@@ -32,4 +35,5 @@ export const {
   useGetSongDetailsQuery,
   useGetSongRelatedQuery,
   useGetArtistDetailsQuery,
+  useGetSongsByCountryQuery,
 } = shazamCoreApi;