feat: fixing image filter
This commit is contained in:
parent
64b7da44b5
commit
4122a482f7
|
|
@ -188,7 +188,8 @@ const FilterPage = () => {
|
|||
startDateString,
|
||||
endDateString,
|
||||
monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "") : "",
|
||||
monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : ""
|
||||
monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : "",
|
||||
locale == "en" ? true : false,
|
||||
);
|
||||
close();
|
||||
// setGetTotalPage(response?.data?.data?.totalPages);
|
||||
|
|
@ -472,57 +473,59 @@ const FilterPage = () => {
|
|||
</div>
|
||||
|
||||
{/* Konten Kanan */}
|
||||
<Reveal>
|
||||
<div className="flex-1">
|
||||
<div className="flex flex-col items-end mb-4">
|
||||
<h2 className="text-lg font-semibold">{t("sortBy")}</h2>
|
||||
<select defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"} onChange={(e) => handleSorting(e)} className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500">
|
||||
<option value="latest">{t("latest")}</option>
|
||||
<option value="popular">{t("mostPopular")}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{imageData?.length > 0 ? (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{imageData?.map((image: any) => (
|
||||
<Card key={image?.id} className="hover:scale-105 transition-transform duration-300">
|
||||
<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"
|
||||
>
|
||||
<ImageBlurry
|
||||
src={image?.thumbnailLink}
|
||||
alt={image?.title}
|
||||
style={{ objectFit: "contain", width: "100%", height: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-row items-center gap-2 text-[10px] mx-2 mt-2">
|
||||
{formatDateToIndonesian(new Date(image?.createdAt))} {image?.timezone ? image?.timezone : "WIB"}| <Icon icon="formkit:eye" width="15" height="15" />
|
||||
{image?.clickCount}{" "}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20">
|
||||
<path
|
||||
fill="#f00"
|
||||
d="M7.707 10.293a1 1 0 1 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414L11 11.586V6h5a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5v5.586zM9 4a1 1 0 0 1 2 0v2H9z"
|
||||
/>
|
||||
</svg>{" "}
|
||||
</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>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
<div className="w-full">
|
||||
<Reveal>
|
||||
<div className="w-full">
|
||||
<div className="flex flex-col items-end mb-4">
|
||||
<h2 className="text-lg font-semibold">{t("sortBy")}</h2>
|
||||
<select defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"} onChange={(e) => handleSorting(e)} className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500">
|
||||
<option value="latest">{t("latest")}</option>
|
||||
<option value="popular">{t("mostPopular")}</option>
|
||||
</select>
|
||||
</div>
|
||||
) : (
|
||||
<p className="flex items-center justify-center text-black">
|
||||
<img src="/assets/empty-data.png" alt="empty" className="h-60 w-60 my-4" />
|
||||
</p>
|
||||
)}
|
||||
|
||||
<LandingPagination table={table} totalData={totalData} totalPage={totalPage} />
|
||||
</div>
|
||||
</Reveal>
|
||||
{imageData?.length > 0 ? (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{imageData?.map((image: any) => (
|
||||
<Card key={image?.id} className="hover:scale-105 transition-transform duration-300">
|
||||
<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"
|
||||
>
|
||||
<ImageBlurry
|
||||
src={image?.thumbnailLink}
|
||||
alt={image?.title}
|
||||
style={{ objectFit: "contain", width: "100%", height: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-row items-center gap-2 text-[10px] mx-2 mt-2">
|
||||
{formatDateToIndonesian(new Date(image?.createdAt))} {image?.timezone ? image?.timezone : "WIB"}| <Icon icon="formkit:eye" width="15" height="15" />
|
||||
{image?.clickCount}{" "}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20">
|
||||
<path
|
||||
fill="#f00"
|
||||
d="M7.707 10.293a1 1 0 1 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414L11 11.586V6h5a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5v5.586zM9 4a1 1 0 0 1 2 0v2H9z"
|
||||
/>
|
||||
</svg>{" "}
|
||||
</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>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="flex items-center justify-center text-black">
|
||||
<img src="/assets/empty-data.png" alt="empty" className="h-60 w-60 my-4" />
|
||||
</p>
|
||||
)}
|
||||
|
||||
{totalData > 1 && <LandingPagination table={table} totalData={totalData} totalPage={totalPage} />}
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue