Added Popular Anime Section (#10)

app/page.tsx

@@ -1,14 +1,20 @@
 import RecentReleaseComponent from '@/components/recent-release';
 import { enimeApi } from '@/lib/constant';
 import Arrow from '@/components/arrow';
+import PopularAnime from '@/components/popular-anime';
 
 export default async function Home() {
  const { data, meta } = await (await fetch(enimeApi + "/recent?perPage=100&language=JP", { cache: "no-store" })).json();
-
+ let popularAnimeResult = await (await fetch(enimeApi + "/popular?perPage=10", { cache: "no-store" })).json();
+ const popularAnimeData = popularAnimeResult.data;
  return (
  <>
  <div className="ml-[1%]">
- <p className="font-bold text-4xl mt-10 pl-5 mb-2">Recently Released</p>
+ <p className="font-bold text-4xl mt-10 pl-5 mb-2">Most Popular</p>
+ <Arrow>
+ <PopularAnime animes={popularAnimeData} />
+ </Arrow>
+ <p className="font-bold text-4xl mt-4 pl-5 mb-2">Recently Released</p>
  <Arrow>
  <RecentReleaseComponent data={data} meta={meta}/>
  </Arrow>

components/popular-anime/index.tsx

@@ -0,0 +1,17 @@
+import AnimeCard from '../anime-card';
+
+export default function PopularAnime({animes}) {
+
+ return (
+ <div className="grid grid-rows-1 col-auto row-auto grid-flow-col-dense m-0 overflow-x-scroll w-full pr-5 pl-5 gap-x-3">
+ {animes.map(
+ anime => {
+ return (
+ <a key={anime.id} href={`/anime/${anime.slug}/`} className="p-0 m-0">
+ <AnimeCard anime={anime}/>
+ </a>
+ )
+ })}
+ </div>
+ )
+}