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

---
 app/globals.css                               | 22 +++++++++
 .../home/actions/getRecommenationAnime.ts     | 45 +++++++++++++------
 features/home/index.tsx                       |  2 +-
 .../Recommendation/components/Card.tsx        | 18 ++++++++
 .../home/sections/Recommendation/main.tsx     |  7 ++-
 5 files changed, 77 insertions(+), 17 deletions(-)
 create mode 100644 features/home/sections/Recommendation/components/Card.tsx

diff --git a/app/globals.css b/app/globals.css
index f4040d4..d5c556e 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -124,3 +124,25 @@
     @apply bg-background text-foreground;
   }
 }
+
+/* ===== Scrollbar CSS ===== */
+/* Firefox */
+* {
+  scrollbar-width: auto;
+  scrollbar-color: #4a4a4a #0a0a0a;
+}
+
+/* Chrome, Edge, and Safari */
+*::-webkit-scrollbar {
+  width: 12px;
+}
+
+*::-webkit-scrollbar-track {
+  background: #0a0a0a;
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: #4a4a4a;
+  border-radius: 9px;
+  border: 3px none #000000;
+}
diff --git a/features/home/actions/getRecommenationAnime.ts b/features/home/actions/getRecommenationAnime.ts
index 36277e4..fbe220b 100644
--- a/features/home/actions/getRecommenationAnime.ts
+++ b/features/home/actions/getRecommenationAnime.ts
@@ -1,7 +1,19 @@
 "use server";
 
-export const getRecommendationAnimeAction = async () => {
-  await new Promise((resolve) => setTimeout(resolve, 2000));
+export type RecommendationAnime = {
+  title: string;
+  rating?: number;
+  type: string;
+  status: string;
+  episodes: number;
+  release_year: string;
+  thumbnail_url: string;
+};
+
+export const getRecommendationAnimeAction = async (): Promise<
+  RecommendationAnime[]
+> => {
+  //   await new Promise((resolve) => setTimeout(resolve, 2000));
 
   return [
     {
@@ -11,7 +23,7 @@ export const getRecommendationAnimeAction = async () => {
       status: "finished",
       episodes: 28,
       release_year: "2023",
-      thumbnail_url: "https://example.com/images/frieren.jpg",
+      thumbnail_url: "https://m.media-amazon.com/images/I/816AbVQc+0L.jpg",
     },
     {
       title: "Steins;Gate",
@@ -20,7 +32,8 @@ export const getRecommendationAnimeAction = async () => {
       status: "finished",
       episodes: 24,
       release_year: "2011",
-      thumbnail_url: "https://example.com/images/steinsgate.jpg",
+      thumbnail_url:
+        "https://m.media-amazon.com/images/M/MV5BZjI1YjZiMDUtZTI3MC00YTA5LWIzMmMtZmQ0NTZiYWM4NTYwXkEyXkFqcGc@._V1_FMjpg_UX1000_.jpg",
     },
     {
       title: "Spirited Away",
@@ -29,7 +42,8 @@ export const getRecommendationAnimeAction = async () => {
       status: "finished",
       episodes: 1,
       release_year: "2001",
-      thumbnail_url: "https://example.com/images/spirited-away.jpg",
+      thumbnail_url:
+        "https://printedoriginals.com/cdn/shop/products/spirited-away-french-143975.jpg?v=1602427397",
     },
     {
       title: "One Piece",
@@ -38,7 +52,7 @@ export const getRecommendationAnimeAction = async () => {
       status: "airing",
       episodes: 1100,
       release_year: "1999",
-      thumbnail_url: "https://example.com/images/onepiece.jpg",
+      thumbnail_url: "https://myanimelist.net/images/anime/1244/138851.jpg",
     },
     {
       title: "Cyberpunk: Edgerunners",
@@ -47,7 +61,8 @@ export const getRecommendationAnimeAction = async () => {
       status: "finished",
       episodes: 10,
       release_year: "2022",
-      thumbnail_url: "https://example.com/images/edgerunners.jpg",
+      thumbnail_url:
+        "https://myanimelist.net/images/about_me/ranking_items/14292440-859e4272-536e-4760-845f-78fb48eccafe.jpg?t=1767555420",
     },
     {
       title: "Your Name",
@@ -56,7 +71,8 @@ export const getRecommendationAnimeAction = async () => {
       status: "finished",
       episodes: 1,
       release_year: "2016",
-      thumbnail_url: "https://example.com/images/yourname.jpg",
+      thumbnail_url:
+        "https://m.media-amazon.com/images/M/MV5BMjM4YTE3OGEtYTY1OS00ZWEzLTg1OTctMTkyODA0ZDM3ZmJlXkEyXkFqcGc@._V1_.jpg",
     },
     {
       title: "Hunter x Hunter (2011)",
@@ -65,7 +81,7 @@ export const getRecommendationAnimeAction = async () => {
       status: "finished",
       episodes: 148,
       release_year: "2011",
-      thumbnail_url: "https://example.com/images/hxh.jpg",
+      thumbnail_url: "https://myanimelist.net/images/anime/1337/99013.jpg",
     },
     {
       title: "Hellsing Ultimate",
@@ -74,7 +90,7 @@ export const getRecommendationAnimeAction = async () => {
       status: "finished",
       episodes: 10,
       release_year: "2006",
-      thumbnail_url: "https://example.com/images/hellsing.jpg",
+      thumbnail_url: "https://cdn.myanimelist.net/images/anime/6/7333l.jpg",
     },
     {
       title: "Tower of God Season 2",
@@ -83,7 +99,8 @@ export const getRecommendationAnimeAction = async () => {
       status: "airing",
       episodes: 12,
       release_year: "2024",
-      thumbnail_url: "https://example.com/images/tog-s2.jpg",
+      thumbnail_url:
+        "https://www.animationmagazine.net/wordpress/wp-content/uploads/TOG2_ENLOGO_v2.jpg",
     },
     {
       title: "Violet Evergarden: The Movie",
@@ -92,7 +109,7 @@ export const getRecommendationAnimeAction = async () => {
       status: "finished",
       episodes: 1,
       release_year: "2020",
-      thumbnail_url: "https://example.com/images/violet-movie.jpg",
+      thumbnail_url: "https://myanimelist.net/images/anime/1614/106512l.jpg",
     },
     {
       title: "Devilman Crybaby",
@@ -101,7 +118,7 @@ export const getRecommendationAnimeAction = async () => {
       status: "finished",
       episodes: 10,
       release_year: "2018",
-      thumbnail_url: "https://example.com/images/devilman.jpg",
+      thumbnail_url: "https://myanimelist.net/images/anime/1046/122722.jpg",
     },
     {
       title: "Mobile Suit Gundam: The Origin",
@@ -110,7 +127,7 @@ export const getRecommendationAnimeAction = async () => {
       status: "finished",
       episodes: 6,
       release_year: "2015",
-      thumbnail_url: "https://example.com/images/gundam-origin.jpg",
+      thumbnail_url: "https://myanimelist.net/images/anime/4/72702.jpg",
     },
   ];
 };
diff --git a/features/home/index.tsx b/features/home/index.tsx
index b09d8e5..baea98a 100644
--- a/features/home/index.tsx
+++ b/features/home/index.tsx
@@ -3,7 +3,7 @@ import Recommendation from "./sections/Recommendation/wrapper";
 
 const HomeIndex = () => {
   return (
-    <div className="w-full pt-4">
+    <div className="w-full pt-4 pb-12">
       <Hero />
       <Recommendation />
     </div>
diff --git a/features/home/sections/Recommendation/components/Card.tsx b/features/home/sections/Recommendation/components/Card.tsx
new file mode 100644
index 0000000..8606de4
--- /dev/null
+++ b/features/home/sections/Recommendation/components/Card.tsx
@@ -0,0 +1,18 @@
+import { RecommendationAnime } from "@/features/home/actions/getRecommenationAnime";
+
+const AnimeRecommendationCard = ({ data }: { data: RecommendationAnime }) => {
+  return (
+    <div>
+      <div className="w-64 h-88 rounded-lg overflow-hidden">
+        <img
+          className="w-full h-full object-cover"
+          src={data.thumbnail_url}
+          alt={data.title}
+          draggable={false}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default AnimeRecommendationCard;
diff --git a/features/home/sections/Recommendation/main.tsx b/features/home/sections/Recommendation/main.tsx
index 0be7ce7..f7ef6e2 100644
--- a/features/home/sections/Recommendation/main.tsx
+++ b/features/home/sections/Recommendation/main.tsx
@@ -1,11 +1,14 @@
 import { getRecommendationAnimeAction } from "../../actions/getRecommenationAnime";
+import AnimeRecommendationCard from "./components/Card";
 
 const RecommendationMain = async () => {
   const data = async () => await getRecommendationAnimeAction();
   const result = await data();
   return (
-    <div>
-      <div>{JSON.stringify(result)}</div>
+    <div className="flex gap-2 w-full overflow-x-scroll py-2 my-2">
+      {result.map((item, index) => (
+        <AnimeRecommendationCard data={item} key={index} />
+      ))}
     </div>
   );
 };