🚧 wip: add recommendation component

features/home/actions/getRecommenationAnime.ts

@@ -0,0 +1,116 @@
+"use server";
+
+export const getRecommendationAnimeAction = async () => {
+  await new Promise((resolve) => setTimeout(resolve, 2000));
+
+  return [
+    {
+      title: "Frieren: Beyond Journey's End",
+      rating: 9.39,
+      type: "TV",
+      status: "finished",
+      episodes: 28,
+      release_year: "2023",
+      thumbnail_url: "https://example.com/images/frieren.jpg",
+    },
+    {
+      title: "Steins;Gate",
+      rating: 9.07,
+      type: "TV",
+      status: "finished",
+      episodes: 24,
+      release_year: "2011",
+      thumbnail_url: "https://example.com/images/steinsgate.jpg",
+    },
+    {
+      title: "Spirited Away",
+      rating: 8.78,
+      type: "Movie",
+      status: "finished",
+      episodes: 1,
+      release_year: "2001",
+      thumbnail_url: "https://example.com/images/spirited-away.jpg",
+    },
+    {
+      title: "One Piece",
+      rating: 8.72,
+      type: "TV",
+      status: "airing",
+      episodes: 1100,
+      release_year: "1999",
+      thumbnail_url: "https://example.com/images/onepiece.jpg",
+    },
+    {
+      title: "Cyberpunk: Edgerunners",
+      rating: 8.6,
+      type: "ONA",
+      status: "finished",
+      episodes: 10,
+      release_year: "2022",
+      thumbnail_url: "https://example.com/images/edgerunners.jpg",
+    },
+    {
+      title: "Your Name",
+      rating: 8.85,
+      type: "Movie",
+      status: "finished",
+      episodes: 1,
+      release_year: "2016",
+      thumbnail_url: "https://example.com/images/yourname.jpg",
+    },
+    {
+      title: "Hunter x Hunter (2011)",
+      rating: 9.04,
+      type: "TV",
+      status: "finished",
+      episodes: 148,
+      release_year: "2011",
+      thumbnail_url: "https://example.com/images/hxh.jpg",
+    },
+    {
+      title: "Hellsing Ultimate",
+      rating: 8.36,
+      type: "OVA",
+      status: "finished",
+      episodes: 10,
+      release_year: "2006",
+      thumbnail_url: "https://example.com/images/hellsing.jpg",
+    },
+    {
+      title: "Tower of God Season 2",
+      rating: 7.5,
+      type: "TV",
+      status: "airing",
+      episodes: 12,
+      release_year: "2024",
+      thumbnail_url: "https://example.com/images/tog-s2.jpg",
+    },
+    {
+      title: "Violet Evergarden: The Movie",
+      rating: 8.89,
+      type: "Movie",
+      status: "finished",
+      episodes: 1,
+      release_year: "2020",
+      thumbnail_url: "https://example.com/images/violet-movie.jpg",
+    },
+    {
+      title: "Devilman Crybaby",
+      rating: 7.75,
+      type: "ONA",
+      status: "finished",
+      episodes: 10,
+      release_year: "2018",
+      thumbnail_url: "https://example.com/images/devilman.jpg",
+    },
+    {
+      title: "Mobile Suit Gundam: The Origin",
+      rating: 8.42,
+      type: "OVA",
+      status: "finished",
+      episodes: 6,
+      release_year: "2015",
+      thumbnail_url: "https://example.com/images/gundam-origin.jpg",
+    },
+  ];
+};

features/home/index.tsx

@@ -1,9 +1,11 @@
 import Hero from "./sections/Hero/wrapper";
+import Recommendation from "./sections/Recommendation/wrapper";
 
 const HomeIndex = () => {
   return (
     <div className="w-full pt-4">
       <Hero />
+      <Recommendation />
     </div>
   );
 };

features/home/sections/Recommendation/main.tsx

@@ -0,0 +1,13 @@
+import { getRecommendationAnimeAction } from "../../actions/getRecommenationAnime";
+
+const RecommendationMain = async () => {
+  const data = async () => await getRecommendationAnimeAction();
+  const result = await data();
+  return (
+    <div>
+      <div>{JSON.stringify(result)}</div>
+    </div>
+  );
+};
+
+export default RecommendationMain;

features/home/sections/Recommendation/skeleton.tsx

@@ -0,0 +1,5 @@
+const RecommendationSkeleton = () => {
+  return <div>loading...</div>;
+};
+
+export default RecommendationSkeleton;

features/home/sections/Recommendation/wrapper.tsx

@@ -0,0 +1,20 @@
+import { Suspense } from "react";
+import RecommendationMain from "./main";
+import RecommendationSkeleton from "./skeleton";
+import { getRecommendationAnimeAction } from "../../actions/getRecommenationAnime";
+
+const Recommendation = async () => {
+  return (
+    <div className="mt-12">
+      <h1 className="text-2xl text-neutral-100 font-semibold w-fit">
+        Maybe You Like
+        <div className="w-full h-0.5 bg-primary -mt-1.5" />
+      </h1>
+      <Suspense fallback={<RecommendationSkeleton />}>
+        <RecommendationMain />
+      </Suspense>
+    </div>
+  );
+};
+
+export default Recommendation;