Skip to content

Commit

Permalink
Add TopCharts Component
Browse files Browse the repository at this point in the history
  • Loading branch information
Stardust committed Nov 24, 2022
1 parent a5c5773 commit 0608d13
Showing 1 changed file with 38 additions and 1 deletion.
39 changes: 38 additions & 1 deletion src/pages/TopCharts.jsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,40 @@
const TopCharts = () => <div>TopCharts</div>;
import { useSelector } from 'react-redux';

import { Error, Loader, SongCard } from '../components';
import { useGetTopChartsQuery } from '../redux/services/shazamCore';

const TopCharts = () => {
const { activeSong, isPlaying } = useSelector((state) => state.player);
const { data, isFetching, error } = useGetTopChartsQuery();

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">
Discover Top Charts
</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 TopCharts;

0 comments on commit 0608d13

Please sign in to comment.