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

feat: fixing image filter

This commit is contained in:
hanif salafi 2025-01-13 00:32:06 +07:00
parent 64b7da44b5
commit 4122a482f7
1 changed files with 53 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -188,7 +188,8 @@ const FilterPage = () => {
startDateString, startDateString,
endDateString, endDateString,
monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "") : "", monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "") : "",
monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : "" monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : "",
locale == "en" ? true : false,
); );
close(); close();
// setGetTotalPage(response?.data?.data?.totalPages); // setGetTotalPage(response?.data?.data?.totalPages);
@ -472,57 +473,59 @@ const FilterPage = () => {
</div> </div>
{/* Konten Kanan */} {/* Konten Kanan */}
<Reveal> <div className="w-full">
<div className="flex-1"> <Reveal>
<div className="flex flex-col items-end mb-4"> <div className="w-full">
<h2 className="text-lg font-semibold">{t("sortBy")}</h2> <div className="flex flex-col items-end mb-4">
<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"> <h2 className="text-lg font-semibold">{t("sortBy")}</h2>
<option value="latest">{t("latest")}</option> <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="popular">{t("mostPopular")}</option> <option value="latest">{t("latest")}</option>
</select> <option value="popular">{t("mostPopular")}</option>
</div> </select>
{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> </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} /> {imageData?.length > 0 ? (
</div> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
</Reveal> {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>
</div> </div>
); );