mediahub
/
mediahub-fe
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: card in filter video and foto

This commit is contained in:
Sabda Yagra 2025-08-04 13:16:32 +07:00
parent 035f33250e
commit ac6f100047
3 changed files with 27 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
app/[locale]/(public)/image/filter/page.tsx
View File

@ -822,7 +822,7 @@ const FilterPage = () => {
<CardContent className="flex flex-col text-xs lg:text-sm w-full p-0"> <CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
<Link href={`/image/detail/${image?.slug}`}> <Link href={`/image/detail/${image?.slug}`}>
{/* <img src={image?.thumbnailLink} className="h-60 object-cover items-center justify-center cursor-pointer rounded-lg" /> */} {/* <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 <ImageBlurry
src={ src={
image?.smallThumbnailLink || image?.smallThumbnailLink ||
@ -835,18 +835,8 @@ const FilterPage = () => {
height: "100%", 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>
<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( {formatDateToIndonesian(
new Date(image?.createdAt) new Date(image?.createdAt)
)}{" "} )}{" "}
@ -861,6 +851,18 @@ const FilterPage = () => {
</div> </div>
<div className="font-semibold pr-3 pb-3 mx-2 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible w-full"> <div className="font-semibold pr-3 pb-3 mx-2 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible w-full">
{image?.title} {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> </div>
</Link> </Link>
</CardContent> </CardContent>

13
app/[locale]/(public)/video/filter/page.tsx
View File

@ -856,7 +856,7 @@ const FilterPage = () => {
className="w-full h-full object-cover rounded-t-lg" className="w-full h-full object-cover rounded-t-lg"
/> */} /> */}
</div> </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( {formatDateToIndonesian(
new Date(video?.createdAt) new Date(video?.createdAt)
)}{" "} )}{" "}
@ -870,6 +870,17 @@ const FilterPage = () => {
</div> </div>
<div className="font-semibold pr-3 pb-3 mx-2 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible w-full"> <div className="font-semibold pr-3 pb-3 mx-2 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible w-full">
{video?.title} {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> </div>
</Link> </Link>
</CardContent> </CardContent>

2
components/ui/image-blurry.tsx
View File

@ -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 className="absolute inset-0 bg-transparent bg-center bg-no-repeat bg-contain image-bg" style={{ backgroundImage: `url(${imgSrc})` }}></div>
// </div> // </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} key={key}
style={style} style={style}
> >