From e3211d240aa5b34279c88c5955d85e94e60c00e5 Mon Sep 17 00:00:00 2001
From: Rafi Arrafif <rafiarrafif05@gmail.com>
Date: Thu, 12 Mar 2026 12:00:00 +0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20wip:=20add=20recommendation=20co?=
 =?UTF-8?q?mponent?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../home/actions/getRecommenationAnime.ts     | 116 ++++++++++++++++++
 features/home/index.tsx                       |   2 +
 .../home/sections/Recommendation/main.tsx     |  13 ++
 .../home/sections/Recommendation/skeleton.tsx |   5 +
 .../home/sections/Recommendation/wrapper.tsx  |  20 +++
 5 files changed, 156 insertions(+)
 create mode 100644 features/home/actions/getRecommenationAnime.ts
 create mode 100644 features/home/sections/Recommendation/main.tsx
 create mode 100644 features/home/sections/Recommendation/skeleton.tsx
 create mode 100644 features/home/sections/Recommendation/wrapper.tsx

diff --git a/features/home/actions/getRecommenationAnime.ts b/features/home/actions/getRecommenationAnime.ts
new file mode 100644
index 0000000..36277e4
--- /dev/null
+++ b/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",
+    },
+  ];
+};
diff --git a/features/home/index.tsx b/features/home/index.tsx
index 2de1d38..b09d8e5 100644
--- a/features/home/index.tsx
+++ b/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>
   );
 };
diff --git a/features/home/sections/Recommendation/main.tsx b/features/home/sections/Recommendation/main.tsx
new file mode 100644
index 0000000..0be7ce7
--- /dev/null
+++ b/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;
diff --git a/features/home/sections/Recommendation/skeleton.tsx b/features/home/sections/Recommendation/skeleton.tsx
new file mode 100644
index 0000000..4e69a90
--- /dev/null
+++ b/features/home/sections/Recommendation/skeleton.tsx
@@ -0,0 +1,5 @@
+const RecommendationSkeleton = () => {
+  return <div>loading...</div>;
+};
+
+export default RecommendationSkeleton;
diff --git a/features/home/sections/Recommendation/wrapper.tsx b/features/home/sections/Recommendation/wrapper.tsx
new file mode 100644
index 0000000..923b533
--- /dev/null
+++ b/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;