👔 feat: add title and additional attributes to card

features/home/sections/Recommendation/components/Card.tsx

@@ -1,14 +1,24 @@
 import { RecommendationAnime } from "@/features/home/actions/getRecommenationAnime";
 import { Icon } from "@iconify/react";
-import { StarOff } from "lucide-react";
 
 const AnimeRecommendationCard = ({ data }: { data: RecommendationAnime }) => {
   return (
     <div>
       <div className="w-64 h-88 rounded-lg overflow-hidden relative">
-        <div className="absolute right-2 top-2 bg-amber-400 text-neutral-950 font-semibold flex gap-0.5 items-center py-1 px-2 rounded">
+        {data.status === "airing" && (
+          <div className="absolute top-2 left-2 bg-neutral-800 flex items-center gap-0.5 px-2 py-1 rounded-full">
+            <Icon
+              icon="icon-park-outline:dot"
+              className="h-auto w-4 text-red-500 blink-strobe"
+            />
+            <span className="text-xs font-medium">Airing</span>
+          </div>
+        )}
+        <div className="absolute right-2 top-2 bg-amber-400 text-neutral-950 flex items-center py-1 px-1.5 rounded">
           <Icon icon="material-symbols:star-rounded" className="h-auto w-4" />
-          <span className="text-sm tracking-tight">{data.rating ?? "N/A"}</span>
+          <span className="text-xs tracking-tight font-medium">
+            {data.rating ?? "N/A"}
+          </span>
         </div>
         <img
           className="w-full h-full object-cover"
@@ -17,6 +27,12 @@ const AnimeRecommendationCard = ({ data }: { data: RecommendationAnime }) => {
           draggable={false}
         />
       </div>
+      <div className="mt-3 px-1 mb-1">
+        <h3 className=" font-semibold mt-1 line-clamp-1">{data.title}</h3>
+        <div className="flex gap-2 text-sm text-neutral-400 mt-0.5">
+          <span>{data.release_year}</span>
+        </div>
+      </div>
     </div>
   );
 };

features/home/sections/Recommendation/main.tsx

@@ -5,7 +5,7 @@ const RecommendationMain = async () => {
   const data = async () => await getRecommendationAnimeAction();
   const result = await data();
   return (
-    <div className="flex gap-2 w-full overflow-x-scroll py-2 my-2">
+    <div className="flex gap-2 w-full overflow-x-scroll py-2 my-2 hide-scrollbar">
       {result.map((item, index) => (
         <AnimeRecommendationCard data={item} key={index} />
       ))}

features/home/sections/Recommendation/wrapper.tsx

@@ -1,15 +1,15 @@
 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>
+      <div>
+        <h1 className="text-[26px] text-neutral-100 font-semibold w-fit tracking-tight">
+          Maybe You Like
+        </h1>
+      </div>
       <Suspense fallback={<RecommendationSkeleton />}>
         <RecommendationMain />
       </Suspense>