🚧 wip: add image support to card

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;

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>
   );
 };