fix:image/filter in polda/kaltara
This commit is contained in:
parent
d4d5945978
commit
1b72b5e923
|
|
@ -1,3 +1,5 @@
|
|||
"use client";
|
||||
|
||||
import LayoutProvider from "@/providers/layout.provider";
|
||||
import LayoutContentProvider from "@/providers/content.provider";
|
||||
import DashCodeSidebar from "@/components/partials/sidebar";
|
||||
|
|
@ -8,11 +10,26 @@ import DashCodeHeader from "@/components/partials/header";
|
|||
import { redirect } from "@/components/navigation";
|
||||
import Footer from "@/components/landing-page/footer";
|
||||
import Navbar from "@/components/landing-page/navbar";
|
||||
import NavbarKaltara from "@/components/landing-page/landing-polda-kaltara/navbar-polda-kaltara";
|
||||
import { useParams } from "next/navigation";
|
||||
import ContactUsKaltara from "@/components/landing-page/landing-polda-kaltara/contact-us-kaltara";
|
||||
import NewsTickerKaltara from "../../../tbnews/[polda_name]/components/news-tickers-kaltara";
|
||||
|
||||
const layout = async ({ children }: { children: React.ReactNode }) => {
|
||||
return (
|
||||
const layout = ({ children }: { children: React.ReactNode }) => {
|
||||
const params = useParams();
|
||||
const poldaName: any = params?.polda_name;
|
||||
return poldaName === "kaltara" ? (
|
||||
<>
|
||||
<NavbarKaltara />
|
||||
{children}
|
||||
<ContactUsKaltara />
|
||||
<NewsTickerKaltara />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Navbar />
|
||||
{children}
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
"use client";
|
||||
|
||||
import LayoutProvider from "@/providers/layout.provider";
|
||||
import LayoutContentProvider from "@/providers/content.provider";
|
||||
import DashCodeSidebar from "@/components/partials/sidebar";
|
||||
|
|
@ -8,11 +10,26 @@ import DashCodeHeader from "@/components/partials/header";
|
|||
import { redirect } from "@/components/navigation";
|
||||
import Footer from "@/components/landing-page/footer";
|
||||
import Navbar from "@/components/landing-page/navbar";
|
||||
import NavbarKaltara from "@/components/landing-page/landing-polda-kaltara/navbar-polda-kaltara";
|
||||
import { useParams } from "next/navigation";
|
||||
import ContactUsKaltara from "@/components/landing-page/landing-polda-kaltara/contact-us-kaltara";
|
||||
import NewsTickerKaltara from "../../../tbnews/[polda_name]/components/news-tickers-kaltara";
|
||||
|
||||
const layout = async ({ children }: { children: React.ReactNode }) => {
|
||||
return (
|
||||
const layout = ({ children }: { children: React.ReactNode }) => {
|
||||
const params = useParams();
|
||||
const poldaName: any = params?.polda_name;
|
||||
return poldaName === "kaltara" ? (
|
||||
<>
|
||||
<NavbarKaltara />
|
||||
{children}
|
||||
<ContactUsKaltara />
|
||||
<NewsTickerKaltara />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Navbar />
|
||||
{children}
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ import ReactDatePicker from "react-datepicker";
|
|||
import "react-datepicker/dist/react-datepicker.css";
|
||||
import { close, loading } from "@/config/swal";
|
||||
import { useTranslations } from "next-intl";
|
||||
import Image from "next/image";
|
||||
|
||||
const columns: ColumnDef<any>[] = [
|
||||
{
|
||||
|
|
@ -70,7 +71,7 @@ const FilterPage = () => {
|
|||
const [userLevels, setUserLevels] = useState([]);
|
||||
const poldaName = params?.polda_name;
|
||||
let prefixPath = poldaName ? `/polda/${poldaName}` : "/";
|
||||
|
||||
|
||||
const t = useTranslations("FilterPage");
|
||||
|
||||
// const [startDate, endDate] = dateRange;
|
||||
|
|
@ -348,11 +349,27 @@ const FilterPage = () => {
|
|||
clearTimeout(typingTimer);
|
||||
};
|
||||
|
||||
const shimmer = (w: number, h: number) => `
|
||||
<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<linearGradient id="g">
|
||||
<stop stop-color="#bcbcbd" offset="20%" />
|
||||
<stop stop-color="#f9fafb" offset="50%" />
|
||||
<stop stop-color="#bcbcbd" offset="70%" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="${w}" height="${h}" fill="#bcbcbd" />
|
||||
<rect id="r" width="${w}" height="${h}" fill="url(#g)" />
|
||||
<animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite" />
|
||||
</svg>`;
|
||||
|
||||
const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
|
||||
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
{/* Header */}
|
||||
|
||||
<div className="flex flex-col md:flex-row items-start gap-5 p-10 bg-[#f7f7f7] dark:bg-black">
|
||||
<div className="flex flex-col md:flex-row items-start gap-5 p-10 bg-[#f7f7f7] dark:bg-black px-4 lg:px-20">
|
||||
<p>
|
||||
{" "}
|
||||
{t("image")} {">"} <span className="font-bold">{t("allImage")}</span>
|
||||
|
|
@ -361,9 +378,9 @@ const FilterPage = () => {
|
|||
<p>{`${t("thereIs")} ${totalContent} ${t("downloadableImage")}`}</p>
|
||||
</div>
|
||||
|
||||
{/* Left */}
|
||||
<div className="flex flex-col lg:flex-row gap-6 p-4">
|
||||
<div className="lg:w-[25%] h-fit w-full bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md">
|
||||
<div className="flex flex-col lg:flex-row gap-6 p-4 px-4 lg:px-20">
|
||||
{/* Left */}
|
||||
<div className="lg:w-[20%] h-fit w-full bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md">
|
||||
<h2 className="text-lg font-semibold mb-4 flex items-center gap-1">
|
||||
<Icon icon="stash:filter-light" fontSize={30} />
|
||||
Filter
|
||||
|
|
@ -465,48 +482,84 @@ 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-110 transition-transform duration-300">
|
||||
<CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
|
||||
<Link href={`${prefixPath}/image/detail/${image?.slug}`}>
|
||||
<img src={image?.thumbnailLink} className="h-60 object-cover items-center justify-center cursor-pointer rounded-lg place-self-center" />
|
||||
<div className="flex flex-row items-center gap-2 text-[10px] mx-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>
|
||||
)}
|
||||
|
||||
<LandingPagination table={table} totalData={totalData} totalPage={totalPage} />
|
||||
{/* <>
|
||||
<Reveal> */}
|
||||
<div className="w-[80%]">
|
||||
<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>
|
||||
</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-110 transition-transform duration-300 h-full lg:h-[300px] w-full lg:w-[342px]">
|
||||
// <CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
|
||||
// <Link href={`${prefixPath}/image/detail/${image?.slug}`}>
|
||||
// <Image
|
||||
// width={2560}
|
||||
// height={1440}
|
||||
// alt="filter-image"
|
||||
// placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
|
||||
// src={image?.thumbnailLink}
|
||||
// className="h-full lg:h-[300px] w-full lg:w-[342px] object-cover items-center justify-center cursor-pointer rounded-lg"
|
||||
// />
|
||||
|
||||
// {/* <div className="flex flex-row items-center gap-2 text-[10px] mx-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>
|
||||
<Card key={image?.id} className="relative overflow-hidden hover:scale-105 transition-transform duration-300 h-full lg:h-[300px] w-full shadow-md hover:shadow-lg rounded-lg">
|
||||
<CardContent className="flex flex-col w-full p-0">
|
||||
<Link href={`${prefixPath}/image/detail/${image?.slug}`} className="relative">
|
||||
{/* Gambar */}
|
||||
<Image
|
||||
width={2560}
|
||||
height={1440}
|
||||
alt="filter-image"
|
||||
placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
|
||||
src={image?.thumbnailLink}
|
||||
className="h-full lg:h-[300px] w-full object-cover rounded-lg transition-transform duration-300"
|
||||
/>
|
||||
|
||||
{/* Overlay Gelap */}
|
||||
<div className="absolute inset-0 bg-black bg-opacity-40 rounded-lg"></div>
|
||||
|
||||
{/* Gradient Bawah */}
|
||||
{/* <div className="absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-black/50 via-black/20 to-transparent"></div> */}
|
||||
|
||||
{/* Judul */}
|
||||
<div className="absolute bottom-3 left-3 right-3 text-white p-3 rounded-md z-10">
|
||||
<h3 className="text-[20px] font-semibold truncate hover:whitespace-normal hover:overflow-visible">{image?.title}</h3>
|
||||
</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>
|
||||
)}
|
||||
|
||||
<LandingPagination table={table} totalData={totalData} totalPage={totalPage} />
|
||||
</div>
|
||||
{/* </Reveal>
|
||||
</> */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,10 +1,35 @@
|
|||
"use client";
|
||||
|
||||
import LayoutProvider from "@/providers/layout.provider";
|
||||
import LayoutContentProvider from "@/providers/content.provider";
|
||||
import DashCodeSidebar from "@/components/partials/sidebar";
|
||||
import DashCodeFooter from "@/components/partials/footer";
|
||||
import ThemeCustomize from "@/components/partials/customizer";
|
||||
import DashCodeHeader from "@/components/partials/header";
|
||||
|
||||
import { redirect } from "@/components/navigation";
|
||||
import Footer from "@/components/landing-page/footer";
|
||||
import Navbar from "@/components/landing-page/navbar";
|
||||
import NavbarKaltara from "@/components/landing-page/landing-polda-kaltara/navbar-polda-kaltara";
|
||||
import { useParams } from "next/navigation";
|
||||
import ContactUsKaltara from "@/components/landing-page/landing-polda-kaltara/contact-us-kaltara";
|
||||
import NewsTickerKaltara from "../../../tbnews/[polda_name]/components/news-tickers-kaltara";
|
||||
|
||||
const layout = async ({ children }: { children: React.ReactNode }) => {
|
||||
return (
|
||||
const layout = ({ children }: { children: React.ReactNode }) => {
|
||||
const params = useParams();
|
||||
const poldaName: any = params?.polda_name;
|
||||
return poldaName === "kaltara" ? (
|
||||
<>
|
||||
<NavbarKaltara />
|
||||
{children}
|
||||
<ContactUsKaltara />
|
||||
<NewsTickerKaltara />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Navbar />
|
||||
{children}
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
"use client";
|
||||
|
||||
import LayoutProvider from "@/providers/layout.provider";
|
||||
import LayoutContentProvider from "@/providers/content.provider";
|
||||
import DashCodeSidebar from "@/components/partials/sidebar";
|
||||
|
|
@ -8,11 +10,26 @@ import DashCodeHeader from "@/components/partials/header";
|
|||
import { redirect } from "@/components/navigation";
|
||||
import Footer from "@/components/landing-page/footer";
|
||||
import Navbar from "@/components/landing-page/navbar";
|
||||
import NavbarKaltara from "@/components/landing-page/landing-polda-kaltara/navbar-polda-kaltara";
|
||||
import { useParams } from "next/navigation";
|
||||
import ContactUsKaltara from "@/components/landing-page/landing-polda-kaltara/contact-us-kaltara";
|
||||
import NewsTickerKaltara from "../../../tbnews/[polda_name]/components/news-tickers-kaltara";
|
||||
|
||||
const layout = async ({ children }: { children: React.ReactNode }) => {
|
||||
return (
|
||||
const layout = ({ children }: { children: React.ReactNode }) => {
|
||||
const params = useParams();
|
||||
const poldaName: any = params?.polda_name;
|
||||
return poldaName === "kaltara" ? (
|
||||
<>
|
||||
<NavbarKaltara />
|
||||
{children}
|
||||
<ContactUsKaltara />
|
||||
<NewsTickerKaltara />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Navbar />
|
||||
{children}
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue