✨ feat: add scroll button and card skeleton loading

features/home/sections/Recommendation/main.client.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { useRef } from "react";
+import { RecommendationAnime } from "../../actions/getRecommenationAnime";
+import AnimeRecommendationCard from "./components/Card";
+import ScrollingButton from "./components/ScrollingButton";
+import { Skeleton } from "@/shared/libs/shadcn/ui/skeleton";
+
+const RecommendationClient = ({
+  result,
+}: {
+  result: RecommendationAnime[];
+}) => {
+  const scrollingContainer = useRef<HTMLDivElement | null>(null);
+
+  const scrollLeft = () => {
+    console.log("scroll left");
+    if (scrollingContainer.current) {
+      scrollingContainer.current.scrollBy({ left: -788, behavior: "smooth" });
+    }
+  };
+  const scrollRight = () => {
+    console.log("scroll right");
+    if (scrollingContainer.current) {
+      scrollingContainer.current.scrollBy({ left: 788, behavior: "smooth" });
+    }
+  };
+
+  return (
+    <div>
+      <div className="absolute top-0 right-0">
+        <ScrollingButton scrollLeft={scrollLeft} scrollRight={scrollRight} />
+      </div>
+      <div
+        className="flex gap-2 w-full overflow-x-scroll py-2 mt-2 hide-scrollbar relative"
+        ref={scrollingContainer}
+      >
+        {result.map((item, index) => (
+          <AnimeRecommendationCard data={item} key={index} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default RecommendationClient;