From ac6f100047f573834193be3d2643477313004f32 Mon Sep 17 00:00:00 2001
From: Sabda Yagra <msabdayagra@gmail.com>
Date: Mon, 4 Aug 2025 13:16:32 +0700
Subject: [PATCH] fix: card in filter video and foto

---
 app/[locale]/(public)/image/filter/page.tsx | 26 +++++++++++----------
 app/[locale]/(public)/video/filter/page.tsx | 13 ++++++++++-
 components/ui/image-blurry.tsx              |  2 +-
 3 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/app/[locale]/(public)/image/filter/page.tsx b/app/[locale]/(public)/image/filter/page.tsx
index ef7777f5..ba3e4917 100644
--- a/app/[locale]/(public)/image/filter/page.tsx
+++ b/app/[locale]/(public)/image/filter/page.tsx
@@ -822,7 +822,7 @@ const FilterPage = () => {
                           <CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
                             <Link href={`/image/detail/${image?.slug}`}>
                               {/* <img src={image?.thumbnailLink} className="h-60 object-cover items-center justify-center cursor-pointer rounded-lg" /> */}
-                              <div className="img-container h-60 bg-[#e9e9e9] cursor-pointer rounded-lg">
+                              <div className="img-container h-60 bg-[#e9e9e9] cursor-pointer">
                                 <ImageBlurry
                                   src={
                                     image?.smallThumbnailLink ||
@@ -835,18 +835,8 @@ const FilterPage = () => {
                                     height: "100%",
                                   }}
                                 />
-                                {/* <Image
-                                  width={2560}
-                                  height={1440}
-                                  src={
-                                    image?.smallThumbnailLink ||
-                                    image?.thumbnailLink
-                                  }
-                                  alt={image?.title}
-                                  className="w-full h-full object-contain rounded-t-lg"
-                                /> */}
                               </div>
-                              <div className="flex flex-row items-center gap-2 text-[10px] mx-1 mt-2">
+                              {/* <div className="flex flex-row items-center gap-2 text-[10px] mx-1 mt-2">
                                 {formatDateToIndonesian(
                                   new Date(image?.createdAt)
                                 )}{" "}
@@ -861,6 +851,18 @@ const FilterPage = () => {
                               </div>
                               <div className="font-semibold pr-3 pb-3 mx-2 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible w-full">
                                 {image?.title}
+                              </div> */}
+
+                              <div className="p-4 h-full flex flex-col justify-between">
+                                <div className="flex flex-col gap-1 flex-grow">
+                                  <p className="text-[10px] font-bold text-[#bb3523] uppercase">
+                                    {image?.categoryName?.toUpperCase() ??
+                                      "Giat Pimpinan"}
+                                  </p>
+                                  <p className="text-sm lg:text-base font-semibold text-black dark:text-white line-clamp-4">
+                                    {image?.title}
+                                  </p>
+                                </div>
                               </div>
                             </Link>
                           </CardContent>
diff --git a/app/[locale]/(public)/video/filter/page.tsx b/app/[locale]/(public)/video/filter/page.tsx
index a2b03dcb..05365bb6 100644
--- a/app/[locale]/(public)/video/filter/page.tsx
+++ b/app/[locale]/(public)/video/filter/page.tsx
@@ -856,7 +856,7 @@ const FilterPage = () => {
                                   className="w-full h-full object-cover rounded-t-lg"
                                 /> */}
                               </div>
-                              <div className="flex flex-row items-center gap-2 text-[10px] mx-2">
+                              {/* <div className="flex flex-row items-center gap-2 text-[10px] mx-2">
                                 {formatDateToIndonesian(
                                   new Date(video?.createdAt)
                                 )}{" "}
@@ -870,6 +870,17 @@ const FilterPage = () => {
                               </div>
                               <div className="font-semibold pr-3 pb-3 mx-2 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible w-full">
                                 {video?.title}
+                              </div> */}
+                               <div className="p-4 h-full flex flex-col justify-between">
+                                <div className="flex flex-col gap-1 flex-grow">
+                                  <p className="text-[10px] font-bold text-[#bb3523] uppercase">
+                                    {video?.categoryName?.toUpperCase() ??
+                                      "Giat Pimpinan"}
+                                  </p>
+                                  <p className="text-sm lg:text-base font-semibold text-black dark:text-white line-clamp-4">
+                                    {video?.title}
+                                  </p>
+                                </div>
                               </div>
                             </Link>
                           </CardContent>
diff --git a/components/ui/image-blurry.tsx b/components/ui/image-blurry.tsx
index 16ed8b1a..c03d4617 100644
--- a/components/ui/image-blurry.tsx
+++ b/components/ui/image-blurry.tsx
@@ -53,7 +53,7 @@ const ImageBlurry: React.FC<ImageBlurryProps> = (props) => {
     //     <div className="absolute inset-0 bg-transparent bg-center bg-no-repeat bg-contain image-bg" style={{ backgroundImage: `url(${imgSrc})` }}></div>
     // </div>
     <div
-      className="blurry-wrapper relative overflow-hidden bg-[#e9e9e9] rounded-lg"
+      className="blurry-wrapper relative overflow-hidden bg-[#e9e9e9] rounded-t-lg"
       key={key}
       style={style}
     >