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

Merge branch 'main' of https://gitlab.com/hanifsalafi/mediahub_redesign into dev-rama

This commit is contained in:
Rama Priyanto 2025-06-09 14:16:54 +07:00
parent 8515a9956e 912d728453
commit 48d24e76b6
18 changed files with 1687 additions and 300 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
app/[locale]/(public)/(polda)/polda/[polda_name]/image/layout.tsx
View File

@ -1,37 +0,0 @@
"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 = ({ children }: { children: React.ReactNode }) => {
const params = useParams();
const poldaName: any = params?.polda_name;
return poldaName === "kaltara" ? (
<>
<NavbarKaltara />
{children}
<ContactUsKaltara />
<NewsTickerKaltara />
</>
) : (
<>
<Navbar />
{children}
<Footer />
</>
);
};
export default layout;

538
app/[locale]/(public)/(polda)/polda/[polda_name]/indeks/detail/[slug]/page.tsx
View File

@ -1,18 +1,45 @@
"use client"; "use client";
import { Textarea } from "@/components/ui/textarea"; import { Textarea } from "@/components/ui/textarea";
import { useParams, usePathname, useRouter } from "next/navigation"; import { useParams, usePathname, useSearchParams } from "next/navigation";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel"; import {
import { Link } from "@/i18n/routing"; Carousel,
import { getDetailIndeks, publicDetailBlog } from "@/service/landing/landing"; CarouselContent,
CarouselItem,
CarouselNext,
CarouselPrevious,
} from "@/components/ui/carousel";
import { Link, useRouter } from "@/i18n/routing";
import {
deleteBlogComments,
getBlogComments,
getDetailIndeks,
getPublicSuggestionList,
postBlogComments,
publicDetailBlog,
} from "@/service/landing/landing";
import { formatDateToIndonesian } from "@/utils/globals"; import { formatDateToIndonesian } from "@/utils/globals";
import { Icon } from "@iconify/react/dist/iconify.js"; import { Icon } from "@iconify/react/dist/iconify.js";
import { getCookiesDecrypt } from "@/lib/utils";
import { close, loading } from "@/config/swal";
import { Input } from "@/components/ui/input";
import { useTranslations } from "next-intl";
import Image from "next/image";
const IndeksDetail = () => { const IndeksDetail = () => {
const searchParams = useSearchParams();
const id = searchParams?.get("id");
const [indeksData, setIndeksData] = useState<any>(); const [indeksData, setIndeksData] = useState<any>();
const params = useParams(); const params = useParams();
const slug = params?.slug; const slug = params?.slug;
const [relatedPost, setRelatedPost] = useState<any>(); const [indexData, setIndexData] = useState<any>();
const [message, setMessage] = useState("");
const [messageChild, setMessageChild] = useState("");
const userId = getCookiesDecrypt("uie");
const userRoleId = getCookiesDecrypt("urie");
const router: any = useRouter();
const [listComments, setListComments] = useState([]);
const t = useTranslations("LandingPage");
useEffect(() => { useEffect(() => {
initFetch(); initFetch();
@ -21,63 +48,512 @@ const IndeksDetail = () => {
const initFetch = async () => { const initFetch = async () => {
const response = await getDetailIndeks(); const response = await getDetailIndeks();
console.log(response); console.log(response);
setRelatedPost(response?.data?.data?.content); setIndexData(response?.data?.data?.content);
}; };
const detailFetch = async () => { const detailFetch = async () => {
const response = await publicDetailBlog(slug); const response = await publicDetailBlog(slug);
console.log(response); console.log(response);
setIndeksData(response?.data?.data); setIndeksData(response?.data?.data);
getDataComment(response?.data?.data?.id);
}; };
async function getDataComment(id?: any) {
const response = await getBlogComments(id || indeksData?.id);
console.log(response.data?.data);
setListComments(response.data?.data);
}
const showInput = (e: any) => {
console.log(document.querySelector(`#${e}`)?.classList);
document.querySelector(`#${e}`)?.classList.toggle("hidden");
};
async function sendCommentParent() {
if (message?.length > 3) {
loading();
const data = {
blogId: indeksData?.id,
message: message,
parentId: null,
};
const response = await postBlogComments(data);
console.log(response);
setMessage("");
getDataComment();
close();
}
}
// async function sendCommentChild(parentId: any) {
// if (messageChild.length > 3) {
// loading();
// const data = {
// blogId: indeksData?.id,
// message: messageChild,
// parentId,
// };
// console.log(data);
// const response = await postBlogComments(data);
// console.log(response);
// const responseGet = await getPublicSuggestionList(slug);
// console.log(responseGet?.data?.data);
// setMessageChild("");
// // $(":input").val("");
// close();
// }
// }
async function sendCommentChild(parentId: any) {
const inputMsg = document.querySelector(
`#input-comment-${parentId}`
) as HTMLInputElement;
if (inputMsg && inputMsg.value.length > 3) {
loading();
const data = {
blogId: indeksData?.id,
message: inputMsg.value,
parentId,
};
console.log(data);
const response = await postBlogComments(data);
console.log(response);
const responseGet = await getPublicSuggestionList(slug);
console.log(responseGet?.data?.data);
getDataComment();
inputMsg.value = "";
close();
}
}
async function deleteDataComment(dataId: any) {
loading();
const response = await deleteBlogComments(dataId);
console.log(response);
getDataComment();
close();
}
const getInputValue = (e: any) => {
const message = e.target.value;
console.log(message);
setMessage(message);
getDataComment();
};
const postData = () => {
if (Number(userRoleId) < 1) {
router.push("/auth");
} else {
sendCommentParent();
}
getDataComment();
};
const postDataChild = (id: any) => {
if (Number(userRoleId) < 1) {
router.push("/auth");
} else {
sendCommentChild(id);
}
};
const deleteData = (dataId: any) => {
deleteDataComment(dataId);
console.log(dataId);
};
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 ( return (
<> <>
<div className="p-4 lg:px-60 lg:p-12"> <div className="p-4 w-full lg:p-12">
{/* Judul */} {/* Judul */}
<div className="flex flex-col mb-5"> <div className="flex flex-col px-4 lg:px-[300px] mb-5">
<h1 className="text-lg mb-2">Indeks / Detail</h1> <h1 className="text-base lg:text-lg mb-2">Index / Detail</h1>
<h1 className="flex flex-row font-bold text-center text-2xl">{indeksData?.title}</h1> <h1 className="flex flex-row font-bold text-center text-lg lg:text-2xl">
{indeksData?.title}
</h1>
</div> </div>
{/* Gambar Utama */} {/* Gambar Utama */}
<div className="flex items-center justify-center"> <div className="flex items-center justify-center">
<img src={indeksData?.thumbnailLink} alt="Main" className="h-[550px] w-full rounded-lg" /> <Image
placeholder={`data:image/svg+xml;base64,${toBase64(
shimmer(700, 475)
)}`}
width={2560}
height={1440}
src={indeksData?.thumbnailLink}
alt="Main"
className="w-full max-h-[550px] object-contain rounded-xl"
/>
</div> </div>
{/* Footer Informasi */} {/* Footer Informasi */}
<div className="text-sm text-gray-500 flex justify-between items-center border-t mt-4"> <div className="px-4 lg:px-[300px]">
<div className="flex flex-row items-center mt-3 justify-between"> <div className="text-gray-500 flex border-t mt-4">
oleh&nbsp;<span className="font-semibold text-black">{indeksData?.uploaderName}</span>&nbsp; | &nbsp;Diupdate pada {indeksData?.createdAt} WIB &nbsp; <div className="flex mt-2">
<p className="text-xs lg:text-sm mb-2 ">
{t("by")}&nbsp;
<span className="font-semibold text-gray-500">
{indeksData?.uploaderName}
</span>
&nbsp; | &nbsp;{t("updatedOn")} {indeksData?.createdAt} WIB
&nbsp;
</p>
</div>
</div> </div>
</div> </div>
{/* Keterangan */} {/* Keterangan */}
<div className="w-auto"> <div className="w-full px-4 lg:px-[300px]">
<p className="font-light text-justify" dangerouslySetInnerHTML={{ __html: indeksData?.description }} /> <p
className="font-light text-base lg:text-lg text-justify"
dangerouslySetInnerHTML={{ __html: indeksData?.description }}
/>
</div> </div>
</div> </div>
{/* Comment */} {/* Comment */}
<div className="w-full"> <div className="w-full ">
<div className="flex flex-col py-5 p-10 bg-[#f7f7f7]"> <div className="flex flex-col py-5 p-0 lg:p-10 bg-[#f7f7f7] dark:bg-slate-600">
<div className="gap-5 flex flex-col px-4 lg:px-16"> <div className="gap-5 flex flex-col px-4 lg:px-[300px]">
<p className="flex items-start text-lg">Berikan Komentar</p> <p className="flex items-start text-bases lg:text-lg">
<Textarea placeholder="Type your comments here." className="flex w-full" /> {t("comment")}
<button className="flex items-start bg-[#bb3523] text-white rounded-lg w-fit px-4 py-1">Kirim</button> </p>
<Textarea
placeholder="Type your comments here."
className="flex w-full"
onChange={getInputValue}
value={message}
/>
<button
className="flex items-start bg-[#bb3523] text-white rounded-lg text-sm lg:text-base w-fit px-3 lg:px-4 py-1"
onClick={() => postData()}
>
{t("send")}
</button>
</div>
<div className="px-4 lg:px-[300px]">
<div className="border-b-2 border-slate-300 mt-4"></div>
</div>
<div className="px-4 lg:px-[230px]">
{listComments?.map((data: any) => (
<div className="flex flex-col">
<div className="flex flex-row mt-2 px-4 lg:px-14">
<Image
placeholder={`data:image/svg+xml;base64,${toBase64(
shimmer(700, 475)
)}`}
width={512}
height={512}
className="h-10 lg:h-20 w-10 lg:w-20"
src="/assets/img/user-avatar-yellow.svg"
alt="#"
/>
<div className="border border-slate-300 w-full p-4 bg-white gap-1">
<p className="flex justify-between text-sm text-slate-500 lg:text-base border-b-2 border-slate-200 mb-2">
<b>
{Number(data.commentFrom?.roleId) == 2 ||
Number(data.commentFrom?.roleId) == 3 ||
Number(data.commentFrom?.roleId) == 4
? "HUMAS POLRI"
: data.commentFrom?.fullname}
</b>
{`${new Date(data.createdAt).getDate()}/${
new Date(data.createdAt).getMonth() + 1
}/${new Date(data.createdAt).getFullYear()} ${new Date(
data.createdAt
).getHours()}:${new Date(data.createdAt).getMinutes()}`}
</p>
<p className="text-slate-500 text-sm lg:text-base mb-4">
{data.message}
</p>
<div className="gap-3">
<a
href="javascript:void(0)"
className="text-xs lg:text-sm mr-2 bg-blue-500 text-white py-1 px-2 hover:bg-blue-300 hover:text-black rounded-md"
onClick={() => showInput(`comment-id-${data.id}`)}
>
{t("reply")}
</a>
<a
href="javascript:void(0)"
style={
data.commentFrom?.id == userId
? {}
: {
display: "none",
}
}
className="text-xs lg:text-sm bg-red-500 text-white py-1 px-2 hover:bg-red-300 hover:text-black rounded-md"
onClick={() => deleteData(data.id)}
>
{t("delete")}
</a>
</div>
</div>
</div>
<div
className="flex flex-row px-4 pl-[55px] lg:px-14 lg:pl-[135px] mt-2"
id={`comment-id-${data.id}`}
>
<Input
type="text"
id={`input-comment-${data.id}`}
className="p-4 focus:outline-none focus:border-sky-500"
placeholder={t("enterReply")}
/>
<a
href="javascript:void(0)"
className="flex py-1 px-2 rounded-md items-center ml-2 bg-[#f7b357] text-white text-sm lg:text-base"
onClick={() => postDataChild(data.id)}
>
{t("send")}
</a>
</div>
{data.children.length > 0
? data.children?.map((child1: any) => (
<div className="flex flex-col">
<div className="flex flex-row mt-2 px-4 lg:pr-14 pl-12 lg:pl-32">
<Image
placeholder={`data:image/svg+xml;base64,${toBase64(
shimmer(700, 475)
)}`}
width={512}
height={512}
className="h-10 lg:h-20 w-10 lg:w-20"
src="/assets/img/user-avatar-yellow.svg"
alt="#"
/>
<div className="border border-slate-300 w-full p-4 bg-white gap-1">
<p className="flex justify-between text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
<b>
{Number(child1.commentFrom?.roleId) == 2 ||
Number(child1.commentFrom?.roleId) == 3 ||
Number(child1.commentFrom?.roleId) == 4
? "HUMAS POLRI"
: child1.commentFrom?.fullname}
</b>
{`${new Date(child1.createdAt).getDate()}/${
new Date(child1.createdAt).getMonth() + 1
}/${new Date(
child1.createdAt
).getFullYear()} ${new Date(
child1.createdAt
).getHours()}:${new Date(
child1.createdAt
).getMinutes()}`}
</p>
<p className="text-slate-500 text-sm mb-4">
{child1.message}
</p>
<div className="gap-3">
<a
href="javascript:void(0)"
className="mr-2 text-xs lg:text-sm bg-blue-500 text-white py-1 px-2 hover:bg-blue-300 hover:text-black rounded-md"
onClick={() =>
showInput(`comment-id-${child1.id}`)
}
>
{t("reply")}
</a>
<a
href="javascript:void(0)"
className="text-xs lg:text-sm bg-red-500 text-white py-1 px-2 hover:bg-red-300 hover:text-black rounded-md"
style={
Number(child1.commentFrom?.id) ==
Number(userId)
? {}
: {
display: "none",
}
}
onClick={() => deleteData(child1.id)}
>
{t("delete")}
</a>
</div>
</div>
</div>
<div
className="flex flex-row justify-center px-4 pl-[87px] lg:px-14 lg:pl-[205px] mt-2"
id={`comment-id-${child1.id}`}
>
<Input
type="text"
id={`input-comment-${child1.id}`}
className="p-4 focus:outline-none focus:border-sky-500"
placeholder={t("enterReply")}
/>
<a
href="javascript:void(0)"
className="flex text-sm lg:text-base py-1 px-2 rounded-md items-center ml-2 bg-[#f7b357] text-white"
onClick={() => postDataChild(child1.id)}
>
{t("send")}
</a>
</div>
{child1.children.length > 0
? child1.children?.map((child2: any) => (
<div className="flex flex-col">
<div className="flex flex-row mt-2 px-4 lg:pr-14 pl-20 lg:pl-48">
<Image
placeholder={`data:image/svg+xml;base64,${toBase64(
shimmer(700, 475)
)}`}
width={512}
height={512}
className="h-10 lg:h-20 w-10 lg:w-20"
src="/assets/img/user-avatar-yellow.svg"
alt="#"
/>
<div className="border border-slate-300 w-full p-4 bg-white gap-2">
<p className="flex justify-between text-slate-500 text-xs lg:text-base border-b-2 border-slate-200 mb-2">
<b>
{Number(child2.commentFrom?.roleId) ==
2 ||
Number(child2.commentFrom?.roleId) ==
3 ||
Number(child2.commentFrom?.roleId) == 4
? "HUMAS POLRI"
: child2.commentFrom?.fullname}
</b>
{`${new Date(
child2.createdAt
).getDate()}/${
new Date(child2.createdAt).getMonth() +
1
}/${new Date(
child2.createdAt
).getFullYear()} ${new Date(
child2.createdAt
).getHours()}:${new Date(
child2.createdAt
).getMinutes()}`}
</p>
<p className="text-slate-500 text-sm mb-4">
{child2.message}
</p>
<div>
<a
href="javascript:void(0)"
className="mr-2 text-xs lg:text-sm bg-blue-500 text-white py-1 px-2 hover:bg-blue-300 hover:text-black rounded-md"
onClick={() =>
showInput("comment-id-" + child2.id)
}
>
{t("reply")}
</a>
<a
href="javascript:void(0)"
className="text-xs lg:text-sm bg-red-500 text-white py-1 px-2 hover:bg-red-300 hover:text-black rounded-md"
style={
Number(child2.commentFrom?.id) ==
Number(userId)
? {}
: {
display: "none",
}
}
onClick={() => deleteData(child2.id)}
>
{t("delete")}
</a>
</div>
</div>
</div>
<div
className="flex flex-row px-4 pl-[120px] lg:px-14 lg:pl-[270px] mt-2"
id={`comment-id-${child2.id}`}
>
<Input
type="text"
id={`comment-id-${child2.id}`}
className="p-4 focus:outline-none focus:border-sky-500"
placeholder={t("enterReply")}
/>
<a
href="javascript:void(0)"
className="flex text-sm lg:text-base py-1 px-2 rounded-md items-center ml-2 bg-[#f7b357] text-white"
onClick={() => postDataChild(child1.id)}
>
{t("send")}
</a>
</div>
</div>
))
: ""}
</div>
))
: ""}
</div>
))}
</div> </div>
</div> </div>
{/* Konten Serupa */} {/* Konten Serupa */}
<div className="space-x-5 flex flex-col px-4 lg:px-16 py-16 gap-5"> <div className="space-x-5 flex flex-col px-4 lg:px-[300px] py-16 gap-5">
<h1 className="font-bold text-base lg:text-xl px-4 lg:px-8">Post Terkait</h1> <h1 className="font-bold text-base lg:text-xl px-4 lg:px-8">
{" "}
{t("relatedPosts")}
</h1>
<Carousel> <Carousel>
<CarouselContent className="w-full max-w-7xl"> <CarouselContent className="w-full max-w-7xl">
{relatedPost?.map((relate: any) => ( {indexData?.map((relate: any) => (
<CarouselItem key={relate?.id} className="md:basis-1/2 lg:basis-1/3"> <CarouselItem
<Link href={`/indeks/detail/${relate?.slug}`} className="relative group overflow-hidden shadow-md hover:shadow-lg"> key={relate?.id}
<img src={relate?.thumbnailLink} className="w-full rounded-lg h-40 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300" /> className="md:basis-1/2 lg:basis-1/3"
>
<Link
href={`/indeks/detail/${relate?.slug}`}
className="relative group overflow-hidden shadow-md hover:shadow-lg"
>
<Image
placeholder={`data:image/svg+xml;base64,${toBase64(
shimmer(700, 475)
)}`}
alt=""
width={2560}
height={1440}
src={relate?.thumbnailLink}
className="w-full rounded-lg h-40 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300"
/>
<div className="absolute bottom-0 left-0 right-0 bg-gray-600 border-l-4 border-[#bb3523] rounded-lg backdrop-blur-sm text-white p-2"> <div className="absolute bottom-0 left-0 right-0 bg-gray-600 border-l-4 border-[#bb3523] rounded-lg backdrop-blur-sm text-white p-2">
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{relate?.categoryName}</span> <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">
<h1 className="text-sm lg:text-lg mb-2 font-semibold h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{relate?.title}</h1> {relate?.categoryName}
</span>
<h1 className="text-sm lg:text-lg mb-2 font-semibold h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">
{relate?.title}
</h1>
<p className="flex flex-row items-center text-[10px] gap-2"> <p className="flex flex-row items-center text-[10px] gap-2">
{formatDateToIndonesian(new Date(relate?.createdAt))} {relate?.timezone ? relate?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {relate.clickCount}{" "} {formatDateToIndonesian(new Date(relate?.createdAt))}{" "}
{relate?.timezone ? relate?.timezone : "WIB"} |{" "}
<Icon icon="formkit:eye" width="15" height="15" />{" "}
{relate.clickCount}{" "}
</p> </p>
</div> </div>
</Link> </Link>

297
app/[locale]/(public)/(polda)/polda/[polda_name]/indeks/page.tsx
View File

@ -1,15 +1,31 @@
"use client"; "use client";
import { Skeleton } from "@/components/ui/skeleton";
import { Link } from "@/i18n/routing"; import { Link } from "@/i18n/routing";
import { getIndeksData } from "@/service/landing/landing"; import { getIndeksData } from "@/service/landing/landing";
import { formatDateToIndonesian } from "@/utils/globals"; import { formatDateToIndonesian, htmlToString } from "@/utils/globals";
import { usePathname } from "next/navigation"; import Image from "next/image";
import { useParams, usePathname } from "next/navigation";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
const Indeks: React.FC = () => { const Indeks: React.FC = () => {
const pathname = usePathname(); const pathname = usePathname();
const [indeksData, setIndeksData] = useState<any>(); const [indeksData, setIndeksData] = useState<any>();
const [isLoading, setIsLoading] = useState<any>(true);
const params = useParams();
const poldaName: any = params?.polda_name;
let prefixPath = poldaName ? `/polda/${poldaName}` : "/";
useEffect(() => {
const timer = setTimeout(() => {
setIsLoading(false);
}, 3000);
return () => clearTimeout(timer);
}, []);
let count: number = 0; let count: number = 0;
useEffect(() => { useEffect(() => {
if (indeksData) { if (indeksData) {
const intervalId = setInterval(() => { const intervalId = setInterval(() => {
@ -21,93 +37,228 @@ const Indeks: React.FC = () => {
}, [indeksData]); }, [indeksData]);
useEffect(() => { useEffect(() => {
initFetch(); if (poldaName) {
}, []); initFetch(poldaName);
const initFetch = async () => { }
const response = await getIndeksData(); }, [poldaName]);
console.log(response);
setIndeksData(response?.data?.data?.content); const initFetch = async (poldaName: string) => {
try {
const response = await getIndeksData();
console.log(response);
setIndeksData(response?.data?.data?.content);
} catch (error) {
console.error("Failed to fetch indeks data:", error);
}
}; };
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 ( return (
<div className="px-4 lg:px-14"> <div className="px-4 lg:px-14 min-h-[75.5vh]">
{/* Hero Left */} {/* Hero Left */}
<div className="flex flex-col lg:flex-row items-start gap-8 px-4 lg:px-10 py-4 mx-auto"> <div className="flex flex-col lg:flex-row items-start gap-8 px-4 lg:px-10 py-4 mx-auto">
<div className="lg:w-[60%] w-full lg:h-full"> {isLoading ? (
{indeksData?.map( <div className="flex flex-col space-y-3 mx-auto w-full lg:w-2/3">
(indeks: any, index: number) => <Skeleton className="h-[310px] lg:h-[420px] rounded-xl" />
index == count && ( </div>
<div key={indeks?.id} className="relative h-[310px] lg:h-[435px]"> ) : (
<img src={indeks?.thumbnailLink} alt="image" className="w-full h-[310px] lg:h-[435px] rounded-lg" /> <div className="lg:w-[60%] w-full lg:h-full">
<div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-white p-4 rounded-b-lg"> {indeksData?.map(
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{indeks?.categoryName}</span> (indeks: any, index: number) =>
<Link href={`/indeks/detail/${indeks?.slug}`}> index == count && (
<h2 className="text-2xl font-bold mt-2">{indeks?.title}</h2> <div
</Link> key={indeks?.id}
<p className="text-xs flex flex-row items-center gap-1 mt-1 ml-2"> className="relative h-[310px] lg:h-[435px]"
{formatDateToIndonesian(new Date(indeks?.createdAt))} {indeks?.timezone ? indeks?.timezone : "WIB"}|{" "} >
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24"> <Image
<path placeholder={`data:image/svg+xml;base64,${toBase64(
fill="currentColor" shimmer(700, 475)
d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9" )}`}
/> width={2560}
</svg>{" "} height={1440}
{indeks?.clickCount} src={indeks?.thumbnailLink}
</p> alt="image"
className="w-full h-[310px] lg:h-[435px] rounded-lg object-cover"
/>
<div className="absolute bottom-0 left-0 right-0 bg-black/15 backdrop-brightness-50 text-white p-4 rounded-b-lg">
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-xs px-2 py-1">
{indeks?.categoryName}
</span>
<Link href={`${prefixPath}/indeks/detail/${indeks?.slug}`}>
<h2 className="text-2xl font-bold mt-2">
{indeks?.title}
</h2>
</Link>
<p className="text-xs flex flex-row items-center gap-1 mt-1">
{formatDateToIndonesian(new Date(indeks?.createdAt))}{" "}
{indeks?.timezone ? indeks?.timezone : "WIB"} |{" "}
{/* <svg
xmlns="http://www.w3.org/2000/svg"
width="1.2em"
height="1.2em"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
/>
</svg>{" "} */}
{/* {indeks?.clickCount} */}
</p>
</div>
</div> </div>
</div> )
) )}
)} </div>
</div> )}
{/* Hero Right */} {/* Hero Right */}
<div className="lg:w-[40%] w-full space-y-2"> <div className="lg:w-[40%] w-full space-y-2">
{indeksData?.map( {isLoading ? (
(indeksRight: any, index: number) => <>
(index == count + 1 || index == count + 2) && ( <div className="flex flex-col space-y-3 w-full justify-center items-center gap-3">
<div key={indeksRight?.id} className="relative h-[310px] lg:h-[215px]"> <Skeleton className="h-[200px] w-full lg:w-[400px] rounded-xl" />
<img src={indeksRight?.thumbnailLink} alt="image" className="w-full h-[310px] lg:h-[215px] rounded-lg " /> <Skeleton className="h-[200px] w-full lg:w-[400px] rounded-xl" />
<div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-white p-4 rounded-b-lg"> </div>
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{indeksRight?.categoryName}</span> </>
<Link href={`/indeks/detail/${indeksRight?.slug}`}> ) : (
<h2 className="text-xl font-bold mt-2">{indeksRight?.title}</h2> <>
</Link> {indeksData?.map(
<p className="text-xs flex flex-row items-center gap-1 mt-1 ml-2"> (indeksRight: any, index: number) =>
{formatDateToIndonesian(new Date(indeksRight?.createdAt))} {indeksRight?.timezone ? indeksRight?.timezone : "WIB"}|{" "} (index == count + 1 || index == count + 2) && (
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24"> <div
<path key={indeksRight?.id}
fill="currentColor" className="relative h-[310px] lg:h-[215px]"
d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9" >
/> <Image
</svg>{" "} placeholder={`data:image/svg+xml;base64,${toBase64(
{indeksRight?.clickCount} shimmer(700, 475)
</p> )}`}
</div> width={1920}
</div> height={1080}
) src={indeksRight?.thumbnailLink}
alt="image"
className="w-full h-[310px] lg:h-[215px] rounded-lg "
/>
<div className="absolute bottom-0 left-0 right-0 bg-black/15 backdrop-brightness-50 text-white p-4 rounded-b-lg">
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-xs px-2 py-1">
{indeksRight?.categoryName}
</span>
<Link href={`/indeks/detail/${indeksRight?.slug}`}>
<h2 className="text-xl font-bold mt-2">
{indeksRight?.title}
</h2>
</Link>
<p className="text-xs flex flex-row items-center gap-1 mt-1 ml-2">
{formatDateToIndonesian(
new Date(indeksRight?.createdAt)
)}{" "}
{indeksRight?.timezone
? indeksRight?.timezone
: "WIB"}
|{" "}
{/* <svg
xmlns="http://www.w3.org/2000/svg"
width="1.2em"
height="1.2em"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
/>
</svg>{" "}
{indeksRight?.clickCount} */}
</p>
</div>
</div>
)
)}
</>
)} )}
</div> </div>
</div> </div>
{/* Bottom */} {/* Bottom */}
<div className="px-4 lg:px-7 py-4"> <div className="px-4 lg:px-7 py-4">
<div className="flex flex-col gap-4"> {isLoading ? (
{indeksData?.map( <div className="flex flex-col space-y-3 w-full gap-10">
(indeksBottom: any, index: number) => <div className="flex flex-col lg:flex-row gap-5">
index < 3 && ( <Skeleton className="h-[300px] w-full lg:w-[500px] rounded-lg" />
<div key={indeksBottom?.id} className="flex flex-col md:flex-row items-start p-4 gap-4"> <div className="space-y-2">
<img src={indeksBottom?.thumbnailLink} alt="" className="h-40 object-cover rounded-lg w-full lg:w-full lg:h-[300px]" /> <Skeleton className="h-4 w-[250px]" />
<div className="flex flex-col justify-between w-full"> <Skeleton className="h-4 w-[200px]" />
<p className="text-sm">{indeksBottom?.date}</p> </div>
<Link href={`/indeks/detail/${indeksBottom?.slug}`} className="text-2xl font-semibold text-gray-800"> </div>
{indeksBottom?.title} <div className="flex flex-col lg:flex-row gap-5">
</Link> <Skeleton className="h-[300px] w-full lg:w-[500px] rounded-lg" />
<p className="text-sm text-gray-600 mt-2">{indeksBottom?.description}</p> <div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
<div className="flex flex-col lg:flex-row gap-5">
<Skeleton className="h-[300px] w-full lg:w-[500px] rounded-lg" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
</div>
) : (
<div className="flex flex-col gap-4">
{indeksData?.map(
(indeksBottom: any, index: number) =>
index < 3 && (
<div
key={indeksBottom?.id}
className="flex flex-col md:flex-row items-start p-4 gap-4"
>
<Image
placeholder={`data:image/svg+xml;base64,${toBase64(
shimmer(700, 475)
)}`}
width={500}
height={250}
src={indeksBottom?.thumbnailLink}
alt=""
className="h-40 object-cover rounded-lg w-full lg:w-[550px] lg:h-[200px]"
/>
<div className="flex flex-col justify-between w-full">
<p className="text-sm">{indeksBottom?.date}</p>
<Link
href={`/indeks/detail/${indeksBottom?.slug}`}
className="text-2xl font-semibold text-gray-800 dark:text-white"
>
{indeksBottom?.title}
</Link>
<p className="text-sm text-gray-600 dark:text-white mt-2">
{htmlToString(indeksBottom?.description)}
</p>
</div>
</div> </div>
</div> )
) )}
)} </div>
</div> )}
</div> </div>
</div> </div>
); );

6
app/[locale]/(public)/(polda)/polda/[polda_name]/layout.tsx
View File

@ -16,9 +16,9 @@ import { useParams } from "next/navigation";
const layout = ({ children }: { children: React.ReactNode }) => { const layout = ({ children }: { children: React.ReactNode }) => {
const params = useParams(); const params = useParams();
const poldaName: any = params?.polda_name; const poldaName: any = params?.polda_name;
return poldaName === "kaltara" ? ( return (
children // children
) : ( // ) : (
<> <>
<Navbar /> <Navbar />
{children} {children}

26
app/[locale]/(public)/(polda)/polda/[polda_name]/page.tsx
View File

@ -23,19 +23,19 @@ import HeroNewPolda from "@/components/landing-page/hero-new-polda";
const page = () => { const page = () => {
const params = useParams(); const params = useParams();
const poldaName: any = params?.polda_name; const poldaName: any = params?.polda_name;
return poldaName === "kaltara" ? ( return (
<div> // <div>
<NavbarKaltara /> // <NavbarKaltara />
<HeaderBannerKaltara /> // <HeaderBannerKaltara />
{/* <SearchSectionKaltara /> */} // {/* <SearchSectionKaltara /> */}
<WelcomePolda /> // <WelcomePolda />
<LatestContentKaltara group="polda" type="latest" /> // <LatestContentKaltara group="polda" type="latest" />
<LatestContentKaltara group="polda" type="popular" /> // <LatestContentKaltara group="polda" type="popular" />
<ContentCategoryKaltara type="" group="polda" /> // <ContentCategoryKaltara type="" group="polda" />
<ContactUsKaltara /> // <ContactUsKaltara />
<NewsTickerKaltara /> // <NewsTickerKaltara />
</div> // </div>
) : ( // ) : (
// <div> // <div>
// {/* <HeaderBanner /> */} // {/* <HeaderBanner /> */}
// <HeroNew group="polda" /> // <HeroNew group="polda" />

38
app/[locale]/(public)/(polda)/tbnews-mediahub/[polda_name]/page.tsx Normal file
View File

@ -0,0 +1,38 @@
"use client";
import ContactUsKaltara from "@/components/landing-page/landing-polda-kaltara/contact-us-kaltara";
import ContentCategoryKaltara from "@/components/landing-page/landing-polda-kaltara/content-category-kaltara";
import HeaderBannerKaltara from "@/components/landing-page/landing-polda-kaltara/header-banner-kaltara";
import LatestContentKaltara from "@/components/landing-page/landing-polda-kaltara/latest-content-kaltara";
import NavbarKaltara from "@/components/landing-page/landing-polda-kaltara/navbar-polda-kaltara";
import WelcomePolda from "@/components/landing-page/welcome-polda";
import React from "react";
import NewsTickerKaltara from "../../tbnews/[polda_name]/components/news-tickers-kaltara";
import { useParams } from "next/navigation";
const PoldaKaltara2 = () => {
const params = useParams();
const poldaName: string | undefined = params?.polda_name as string;
if (poldaName !== "kaltara") {
return null;
}
return (
<div>
<NavbarKaltara />
<HeaderBannerKaltara />
{/* <SearchSectionKaltara /> */}
<div className="px-4 lg:px-[100px]">
<WelcomePolda />
</div>
<LatestContentKaltara group="polda" type="latest" />
<LatestContentKaltara group="polda" type="popular" />
<ContentCategoryKaltara type="" group="polda" />
<ContactUsKaltara />
<NewsTickerKaltara />
</div>
);
};
export default PoldaKaltara2;

4
app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/navbar-kaltara.tsx
View File

@ -47,7 +47,7 @@ const categoryLinks: any = {
MediaHub: "https://new.netidhub.com/in/polda/kaltara", MediaHub: "https://new.netidhub.com/in/polda/kaltara",
}; };
const NavbarKaltara = () => { const NavbarKaltaraTbnews = () => {
const [menuOpen, setMenuOpen] = useState(false); const [menuOpen, setMenuOpen] = useState(false);
return ( return (
@ -111,4 +111,4 @@ const NavbarKaltara = () => {
); );
}; };
export default NavbarKaltara; export default NavbarKaltaraTbnews;

17
app/[locale]/(public)/(polda)/tbnews/[polda_name]/page.tsx
View File

@ -1,7 +1,6 @@
"use client"; "use client";
import React from "react"; import React from "react";
import NavbarKaltara from "./components/navbar-kaltara";
import HeroKaltara from "./components/hero-kaltara"; import HeroKaltara from "./components/hero-kaltara";
import LatestNews from "./components/latest-news"; import LatestNews from "./components/latest-news";
import PopularNews from "./components/popular-news"; import PopularNews from "./components/popular-news";
@ -12,11 +11,15 @@ import SocialMedia from "./components/social-media";
import NewsTickerKaltara from "./components/news-tickers-kaltara"; import NewsTickerKaltara from "./components/news-tickers-kaltara";
import PpsSection from "./components/pps-section"; import PpsSection from "./components/pps-section";
import ContactUsKaltara from "@/components/landing-page/landing-polda-kaltara/contact-us-kaltara"; import ContactUsKaltara from "@/components/landing-page/landing-polda-kaltara/contact-us-kaltara";
import WelcomePolda from "@/components/landing-page/welcome-polda";
import LatestContentKaltara from "@/components/landing-page/landing-polda-kaltara/latest-content-kaltara";
import ContentCategoryKaltara from "@/components/landing-page/landing-polda-kaltara/content-category-kaltara";
import NavbarKaltaraTbnews from "./components/navbar-kaltara";
const PoldaKaltara = () => { const PoldaKaltara = () => {
return ( return (
<div> <div>
<NavbarKaltara /> <NavbarKaltaraTbnews />
<HeroKaltara /> <HeroKaltara />
<PpsSection /> <PpsSection />
<LatestNews type="latest" /> <LatestNews type="latest" />
@ -29,6 +32,16 @@ const PoldaKaltara = () => {
<ContactUsKaltara /> <ContactUsKaltara />
<NewsTickerKaltara /> <NewsTickerKaltara />
</div> </div>
// <div>
// <NavbarKaltara />
// {/* <SearchSectionKaltara /> */}
// <WelcomePolda />
// <LatestContentKaltara group="polda" type="latest" />
// <LatestContentKaltara group="polda" type="popular" />
// <ContentCategoryKaltara type="" group="polda" />
// <ContactUsKaltara />
// <NewsTickerKaltara />
// </div>
); );
}; };

538
app/[locale]/(public)/(satker)/satker/[satker_name]/indeks/detail/[slug]/page.tsx
View File

@ -1,18 +1,45 @@
"use client"; "use client";
import { Textarea } from "@/components/ui/textarea"; import { Textarea } from "@/components/ui/textarea";
import { useParams, usePathname, useRouter } from "next/navigation"; import { useParams, usePathname, useSearchParams } from "next/navigation";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel"; import {
import { Link } from "@/i18n/routing"; Carousel,
import { getDetailIndeks, publicDetailBlog } from "@/service/landing/landing"; CarouselContent,
CarouselItem,
CarouselNext,
CarouselPrevious,
} from "@/components/ui/carousel";
import { Link, useRouter } from "@/i18n/routing";
import {
deleteBlogComments,
getBlogComments,
getDetailIndeks,
getPublicSuggestionList,
postBlogComments,
publicDetailBlog,
} from "@/service/landing/landing";
import { formatDateToIndonesian } from "@/utils/globals"; import { formatDateToIndonesian } from "@/utils/globals";
import { Icon } from "@iconify/react/dist/iconify.js"; import { Icon } from "@iconify/react/dist/iconify.js";
import { getCookiesDecrypt } from "@/lib/utils";
import { close, loading } from "@/config/swal";
import { Input } from "@/components/ui/input";
import { useTranslations } from "next-intl";
import Image from "next/image";
const IndeksDetail = () => { const IndeksDetail = () => {
const searchParams = useSearchParams();
const id = searchParams?.get("id");
const [indeksData, setIndeksData] = useState<any>(); const [indeksData, setIndeksData] = useState<any>();
const params = useParams(); const params = useParams();
const slug = params?.slug; const slug = params?.slug;
const [relatedPost, setRelatedPost] = useState<any>(); const [indexData, setIndexData] = useState<any>();
const [message, setMessage] = useState("");
const [messageChild, setMessageChild] = useState("");
const userId = getCookiesDecrypt("uie");
const userRoleId = getCookiesDecrypt("urie");
const router: any = useRouter();
const [listComments, setListComments] = useState([]);
const t = useTranslations("LandingPage");
useEffect(() => { useEffect(() => {
initFetch(); initFetch();
@ -21,63 +48,512 @@ const IndeksDetail = () => {
const initFetch = async () => { const initFetch = async () => {
const response = await getDetailIndeks(); const response = await getDetailIndeks();
console.log(response); console.log(response);
setRelatedPost(response?.data?.data?.content); setIndexData(response?.data?.data?.content);
}; };
const detailFetch = async () => { const detailFetch = async () => {
const response = await publicDetailBlog(slug); const response = await publicDetailBlog(slug);
console.log(response); console.log(response);
setIndeksData(response?.data?.data); setIndeksData(response?.data?.data);
getDataComment(response?.data?.data?.id);
}; };
async function getDataComment(id?: any) {
const response = await getBlogComments(id || indeksData?.id);
console.log(response.data?.data);
setListComments(response.data?.data);
}
const showInput = (e: any) => {
console.log(document.querySelector(`#${e}`)?.classList);
document.querySelector(`#${e}`)?.classList.toggle("hidden");
};
async function sendCommentParent() {
if (message?.length > 3) {
loading();
const data = {
blogId: indeksData?.id,
message: message,
parentId: null,
};
const response = await postBlogComments(data);
console.log(response);
setMessage("");
getDataComment();
close();
}
}
// async function sendCommentChild(parentId: any) {
// if (messageChild.length > 3) {
// loading();
// const data = {
// blogId: indeksData?.id,
// message: messageChild,
// parentId,
// };
// console.log(data);
// const response = await postBlogComments(data);
// console.log(response);
// const responseGet = await getPublicSuggestionList(slug);
// console.log(responseGet?.data?.data);
// setMessageChild("");
// // $(":input").val("");
// close();
// }
// }
async function sendCommentChild(parentId: any) {
const inputMsg = document.querySelector(
`#input-comment-${parentId}`
) as HTMLInputElement;
if (inputMsg && inputMsg.value.length > 3) {
loading();
const data = {
blogId: indeksData?.id,
message: inputMsg.value,
parentId,
};
console.log(data);
const response = await postBlogComments(data);
console.log(response);
const responseGet = await getPublicSuggestionList(slug);
console.log(responseGet?.data?.data);
getDataComment();
inputMsg.value = "";
close();
}
}
async function deleteDataComment(dataId: any) {
loading();
const response = await deleteBlogComments(dataId);
console.log(response);
getDataComment();
close();
}
const getInputValue = (e: any) => {
const message = e.target.value;
console.log(message);
setMessage(message);
getDataComment();
};
const postData = () => {
if (Number(userRoleId) < 1) {
router.push("/auth");
} else {
sendCommentParent();
}
getDataComment();
};
const postDataChild = (id: any) => {
if (Number(userRoleId) < 1) {
router.push("/auth");
} else {
sendCommentChild(id);
}
};
const deleteData = (dataId: any) => {
deleteDataComment(dataId);
console.log(dataId);
};
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 ( return (
<> <>
<div className="p-4 lg:px-60 lg:p-12"> <div className="p-4 w-full lg:p-12">
{/* Judul */} {/* Judul */}
<div className="flex flex-col mb-5"> <div className="flex flex-col px-4 lg:px-[300px] mb-5">
<h1 className="text-lg mb-2">Indeks / Detail</h1> <h1 className="text-base lg:text-lg mb-2">Index / Detail</h1>
<h1 className="flex flex-row font-bold text-center text-2xl">{indeksData?.title}</h1> <h1 className="flex flex-row font-bold text-center text-lg lg:text-2xl">
{indeksData?.title}
</h1>
</div> </div>
{/* Gambar Utama */} {/* Gambar Utama */}
<div className="flex items-center justify-center"> <div className="flex items-center justify-center">
<img src={indeksData?.thumbnailLink} alt="Main" className="h-[550px] w-full rounded-lg" /> <Image
placeholder={`data:image/svg+xml;base64,${toBase64(
shimmer(700, 475)
)}`}
width={2560}
height={1440}
src={indeksData?.thumbnailLink}
alt="Main"
className="w-full max-h-[550px] object-contain rounded-xl"
/>
</div> </div>
{/* Footer Informasi */} {/* Footer Informasi */}
<div className="text-sm text-gray-500 flex justify-between items-center border-t mt-4"> <div className="px-4 lg:px-[300px]">
<div className="flex flex-row items-center mt-3 justify-between"> <div className="text-gray-500 flex border-t mt-4">
oleh&nbsp;<span className="font-semibold text-black">{indeksData?.uploaderName}</span>&nbsp; | &nbsp;Diupdate pada {indeksData?.createdAt} WIB &nbsp; <div className="flex mt-2">
<p className="text-xs lg:text-sm mb-2 ">
{t("by")}&nbsp;
<span className="font-semibold text-gray-500">
{indeksData?.uploaderName}
</span>
&nbsp; | &nbsp;{t("updatedOn")} {indeksData?.createdAt} WIB
&nbsp;
</p>
</div>
</div> </div>
</div> </div>
{/* Keterangan */} {/* Keterangan */}
<div className="w-auto"> <div className="w-full px-4 lg:px-[300px]">
<p className="font-light text-justify" dangerouslySetInnerHTML={{ __html: indeksData?.description }} /> <p
className="font-light text-base lg:text-lg text-justify"
dangerouslySetInnerHTML={{ __html: indeksData?.description }}
/>
</div> </div>
</div> </div>
{/* Comment */} {/* Comment */}
<div className="w-full"> <div className="w-full ">
<div className="flex flex-col py-5 p-10 bg-[#f7f7f7]"> <div className="flex flex-col py-5 p-0 lg:p-10 bg-[#f7f7f7] dark:bg-slate-600">
<div className="gap-5 flex flex-col px-4 lg:px-16"> <div className="gap-5 flex flex-col px-4 lg:px-[300px]">
<p className="flex items-start text-lg">Berikan Komentar</p> <p className="flex items-start text-bases lg:text-lg">
<Textarea placeholder="Type your comments here." className="flex w-full" /> {t("comment")}
<button className="flex items-start bg-[#bb3523] text-white rounded-lg w-fit px-4 py-1">Kirim</button> </p>
<Textarea
placeholder="Type your comments here."
className="flex w-full"
onChange={getInputValue}
value={message}
/>
<button
className="flex items-start bg-[#bb3523] text-white rounded-lg text-sm lg:text-base w-fit px-3 lg:px-4 py-1"
onClick={() => postData()}
>
{t("send")}
</button>
</div>
<div className="px-4 lg:px-[300px]">
<div className="border-b-2 border-slate-300 mt-4"></div>
</div>
<div className="px-4 lg:px-[230px]">
{listComments?.map((data: any) => (
<div className="flex flex-col">
<div className="flex flex-row mt-2 px-4 lg:px-14">
<Image
placeholder={`data:image/svg+xml;base64,${toBase64(
shimmer(700, 475)
)}`}
width={512}
height={512}
className="h-10 lg:h-20 w-10 lg:w-20"
src="/assets/img/user-avatar-yellow.svg"
alt="#"
/>
<div className="border border-slate-300 w-full p-4 bg-white gap-1">
<p className="flex justify-between text-sm text-slate-500 lg:text-base border-b-2 border-slate-200 mb-2">
<b>
{Number(data.commentFrom?.roleId) == 2 ||
Number(data.commentFrom?.roleId) == 3 ||
Number(data.commentFrom?.roleId) == 4
? "HUMAS POLRI"
: data.commentFrom?.fullname}
</b>
{`${new Date(data.createdAt).getDate()}/${
new Date(data.createdAt).getMonth() + 1
}/${new Date(data.createdAt).getFullYear()} ${new Date(
data.createdAt
).getHours()}:${new Date(data.createdAt).getMinutes()}`}
</p>
<p className="text-slate-500 text-sm lg:text-base mb-4">
{data.message}
</p>
<div className="gap-3">
<a
href="javascript:void(0)"
className="text-xs lg:text-sm mr-2 bg-blue-500 text-white py-1 px-2 hover:bg-blue-300 hover:text-black rounded-md"
onClick={() => showInput(`comment-id-${data.id}`)}
>
{t("reply")}
</a>
<a
href="javascript:void(0)"
style={
data.commentFrom?.id == userId
? {}
: {
display: "none",
}
}
className="text-xs lg:text-sm bg-red-500 text-white py-1 px-2 hover:bg-red-300 hover:text-black rounded-md"
onClick={() => deleteData(data.id)}
>
{t("delete")}
</a>
</div>
</div>
</div>
<div
className="flex flex-row px-4 pl-[55px] lg:px-14 lg:pl-[135px] mt-2"
id={`comment-id-${data.id}`}
>
<Input
type="text"
id={`input-comment-${data.id}`}
className="p-4 focus:outline-none focus:border-sky-500"
placeholder={t("enterReply")}
/>
<a
href="javascript:void(0)"
className="flex py-1 px-2 rounded-md items-center ml-2 bg-[#f7b357] text-white text-sm lg:text-base"
onClick={() => postDataChild(data.id)}
>
{t("send")}
</a>
</div>
{data.children.length > 0
? data.children?.map((child1: any) => (
<div className="flex flex-col">
<div className="flex flex-row mt-2 px-4 lg:pr-14 pl-12 lg:pl-32">
<Image
placeholder={`data:image/svg+xml;base64,${toBase64(
shimmer(700, 475)
)}`}
width={512}
height={512}
className="h-10 lg:h-20 w-10 lg:w-20"
src="/assets/img/user-avatar-yellow.svg"
alt="#"
/>
<div className="border border-slate-300 w-full p-4 bg-white gap-1">
<p className="flex justify-between text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
<b>
{Number(child1.commentFrom?.roleId) == 2 ||
Number(child1.commentFrom?.roleId) == 3 ||
Number(child1.commentFrom?.roleId) == 4
? "HUMAS POLRI"
: child1.commentFrom?.fullname}
</b>
{`${new Date(child1.createdAt).getDate()}/${
new Date(child1.createdAt).getMonth() + 1
}/${new Date(
child1.createdAt
).getFullYear()} ${new Date(
child1.createdAt
).getHours()}:${new Date(
child1.createdAt
).getMinutes()}`}
</p>
<p className="text-slate-500 text-sm mb-4">
{child1.message}
</p>
<div className="gap-3">
<a
href="javascript:void(0)"
className="mr-2 text-xs lg:text-sm bg-blue-500 text-white py-1 px-2 hover:bg-blue-300 hover:text-black rounded-md"
onClick={() =>
showInput(`comment-id-${child1.id}`)
}
>
{t("reply")}
</a>
<a
href="javascript:void(0)"
className="text-xs lg:text-sm bg-red-500 text-white py-1 px-2 hover:bg-red-300 hover:text-black rounded-md"
style={
Number(child1.commentFrom?.id) ==
Number(userId)
? {}
: {
display: "none",
}
}
onClick={() => deleteData(child1.id)}
>
{t("delete")}
</a>
</div>
</div>
</div>
<div
className="flex flex-row justify-center px-4 pl-[87px] lg:px-14 lg:pl-[205px] mt-2"
id={`comment-id-${child1.id}`}
>
<Input
type="text"
id={`input-comment-${child1.id}`}
className="p-4 focus:outline-none focus:border-sky-500"
placeholder={t("enterReply")}
/>
<a
href="javascript:void(0)"
className="flex text-sm lg:text-base py-1 px-2 rounded-md items-center ml-2 bg-[#f7b357] text-white"
onClick={() => postDataChild(child1.id)}
>
{t("send")}
</a>
</div>
{child1.children.length > 0
? child1.children?.map((child2: any) => (
<div className="flex flex-col">
<div className="flex flex-row mt-2 px-4 lg:pr-14 pl-20 lg:pl-48">
<Image
placeholder={`data:image/svg+xml;base64,${toBase64(
shimmer(700, 475)
)}`}
width={512}
height={512}
className="h-10 lg:h-20 w-10 lg:w-20"
src="/assets/img/user-avatar-yellow.svg"
alt="#"
/>
<div className="border border-slate-300 w-full p-4 bg-white gap-2">
<p className="flex justify-between text-slate-500 text-xs lg:text-base border-b-2 border-slate-200 mb-2">
<b>
{Number(child2.commentFrom?.roleId) ==
2 ||
Number(child2.commentFrom?.roleId) ==
3 ||
Number(child2.commentFrom?.roleId) == 4
? "HUMAS POLRI"
: child2.commentFrom?.fullname}
</b>
{`${new Date(
child2.createdAt
).getDate()}/${
new Date(child2.createdAt).getMonth() +
1
}/${new Date(
child2.createdAt
).getFullYear()} ${new Date(
child2.createdAt
).getHours()}:${new Date(
child2.createdAt
).getMinutes()}`}
</p>
<p className="text-slate-500 text-sm mb-4">
{child2.message}
</p>
<div>
<a
href="javascript:void(0)"
className="mr-2 text-xs lg:text-sm bg-blue-500 text-white py-1 px-2 hover:bg-blue-300 hover:text-black rounded-md"
onClick={() =>
showInput("comment-id-" + child2.id)
}
>
{t("reply")}
</a>
<a
href="javascript:void(0)"
className="text-xs lg:text-sm bg-red-500 text-white py-1 px-2 hover:bg-red-300 hover:text-black rounded-md"
style={
Number(child2.commentFrom?.id) ==
Number(userId)
? {}
: {
display: "none",
}
}
onClick={() => deleteData(child2.id)}
>
{t("delete")}
</a>
</div>
</div>
</div>
<div
className="flex flex-row px-4 pl-[120px] lg:px-14 lg:pl-[270px] mt-2"
id={`comment-id-${child2.id}`}
>
<Input
type="text"
id={`comment-id-${child2.id}`}
className="p-4 focus:outline-none focus:border-sky-500"
placeholder={t("enterReply")}
/>
<a
href="javascript:void(0)"
className="flex text-sm lg:text-base py-1 px-2 rounded-md items-center ml-2 bg-[#f7b357] text-white"
onClick={() => postDataChild(child1.id)}
>
{t("send")}
</a>
</div>
</div>
))
: ""}
</div>
))
: ""}
</div>
))}
</div> </div>
</div> </div>
{/* Konten Serupa */} {/* Konten Serupa */}
<div className="space-x-5 flex flex-col px-4 lg:px-16 py-16 gap-5"> <div className="space-x-5 flex flex-col px-4 lg:px-[300px] py-16 gap-5">
<h1 className="font-bold text-base lg:text-xl px-4 lg:px-8">Post Terkait</h1> <h1 className="font-bold text-base lg:text-xl px-4 lg:px-8">
{" "}
{t("relatedPosts")}
</h1>
<Carousel> <Carousel>
<CarouselContent className="w-full max-w-7xl"> <CarouselContent className="w-full max-w-7xl">
{relatedPost?.map((relate: any) => ( {indexData?.map((relate: any) => (
<CarouselItem key={relate?.id} className="md:basis-1/2 lg:basis-1/3"> <CarouselItem
<Link href={`/indeks/detail/${relate?.slug}`} className="relative group overflow-hidden shadow-md hover:shadow-lg"> key={relate?.id}
<img src={relate?.thumbnailLink} className="w-full rounded-lg h-40 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300" /> className="md:basis-1/2 lg:basis-1/3"
>
<Link
href={`/indeks/detail/${relate?.slug}`}
className="relative group overflow-hidden shadow-md hover:shadow-lg"
>
<Image
placeholder={`data:image/svg+xml;base64,${toBase64(
shimmer(700, 475)
)}`}
alt=""
width={2560}
height={1440}
src={relate?.thumbnailLink}
className="w-full rounded-lg h-40 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300"
/>
<div className="absolute bottom-0 left-0 right-0 bg-gray-600 border-l-4 border-[#bb3523] rounded-lg backdrop-blur-sm text-white p-2"> <div className="absolute bottom-0 left-0 right-0 bg-gray-600 border-l-4 border-[#bb3523] rounded-lg backdrop-blur-sm text-white p-2">
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{relate?.categoryName}</span> <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">
<h1 className="text-sm lg:text-lg mb-2 font-semibold h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{relate?.title}</h1> {relate?.categoryName}
</span>
<h1 className="text-sm lg:text-lg mb-2 font-semibold h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">
{relate?.title}
</h1>
<p className="flex flex-row items-center text-[10px] gap-2"> <p className="flex flex-row items-center text-[10px] gap-2">
{formatDateToIndonesian(new Date(relate?.createdAt))} {relate?.timezone ? relate?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {relate.clickCount}{" "} {formatDateToIndonesian(new Date(relate?.createdAt))}{" "}
{relate?.timezone ? relate?.timezone : "WIB"} |{" "}
<Icon icon="formkit:eye" width="15" height="15" />{" "}
{relate.clickCount}{" "}
</p> </p>
</div> </div>
</Link> </Link>

299
app/[locale]/(public)/(satker)/satker/[satker_name]/indeks/page.tsx
View File

@ -1,15 +1,31 @@
"use client"; "use client";
import { Skeleton } from "@/components/ui/skeleton";
import { Link } from "@/i18n/routing"; import { Link } from "@/i18n/routing";
import { getIndeksData } from "@/service/landing/landing"; import { getIndeksData } from "@/service/landing/landing";
import { formatDateToIndonesian } from "@/utils/globals"; import { formatDateToIndonesian, htmlToString } from "@/utils/globals";
import { usePathname } from "next/navigation"; import Image from "next/image";
import { useParams, usePathname } from "next/navigation";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
const Indeks: React.FC = () => { const Indeks: React.FC = () => {
const pathname = usePathname(); const pathname = usePathname();
const [indeksData, setIndeksData] = useState<any>(); const [indeksData, setIndeksData] = useState<any>();
const [isLoading, setIsLoading] = useState<any>(true);
const params = useParams();
const sarkerName: any = params?.satker_name;
let prefixPath = sarkerName ? `/satker/${sarkerName}` : "/";
useEffect(() => {
const timer = setTimeout(() => {
setIsLoading(false);
}, 3000);
return () => clearTimeout(timer);
}, []);
let count: number = 0; let count: number = 0;
useEffect(() => { useEffect(() => {
if (indeksData) { if (indeksData) {
const intervalId = setInterval(() => { const intervalId = setInterval(() => {
@ -21,93 +37,230 @@ const Indeks: React.FC = () => {
}, [indeksData]); }, [indeksData]);
useEffect(() => { useEffect(() => {
initFetch(); if (sarkerName) {
}, []); initFetch(sarkerName);
const initFetch = async () => { }
const response = await getIndeksData(); }, [sarkerName]);
console.log(response);
setIndeksData(response?.data?.data?.content); const initFetch = async (sarkerName: string) => {
try {
const response = await getIndeksData();
console.log(response);
setIndeksData(response?.data?.data?.content);
} catch (error) {
console.error("Failed to fetch indeks data:", error);
}
}; };
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 ( return (
<div className="px-4 lg:px-14"> <div className="px-4 lg:px-14 min-h-[75.5vh]">
{/* Hero Left */} {/* Hero Left */}
<div className="flex flex-col lg:flex-row items-start gap-8 px-4 lg:px-10 py-4 mx-auto"> <div className="flex flex-col lg:flex-row items-start gap-8 px-4 lg:px-10 py-4 mx-auto">
<div className="lg:w-[60%] w-full lg:h-full"> {isLoading ? (
{indeksData?.map( <div className="flex flex-col space-y-3 mx-auto w-full lg:w-2/3">
(indeks: any, index: number) => <Skeleton className="h-[310px] lg:h-[420px] rounded-xl" />
index == count && ( </div>
<div key={indeks?.id} className="relative h-[310px] lg:h-[435px]"> ) : (
<img src={indeks?.thumbnailLink} alt="image" className="w-full h-[310px] lg:h-[435px] rounded-lg" /> <div className="lg:w-[60%] w-full lg:h-full">
<div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-white p-4 rounded-b-lg"> {indeksData?.map(
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{indeks?.categoryName}</span> (indeks: any, index: number) =>
<Link href={`/indeks/detail/${indeks?.slug}`}> index == count && (
<h2 className="text-2xl font-bold mt-2">{indeks?.title}</h2> <div
</Link> key={indeks?.id}
<p className="text-xs flex flex-row items-center gap-1 mt-1 ml-2"> className="relative h-[310px] lg:h-[435px]"
{formatDateToIndonesian(new Date(indeks?.createdAt))} {indeks?.timezone ? indeks?.timezone : "WIB"}|{" "} >
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24"> <Image
<path placeholder={`data:image/svg+xml;base64,${toBase64(
fill="currentColor" shimmer(700, 475)
d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9" )}`}
/> width={2560}
</svg>{" "} height={1440}
{indeks?.clickCount} src={indeks?.thumbnailLink}
</p> alt="image"
className="w-full h-[310px] lg:h-[435px] rounded-lg object-cover"
/>
<div className="absolute bottom-0 left-0 right-0 bg-black/15 backdrop-brightness-50 text-white p-4 rounded-b-lg">
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-xs px-2 py-1">
{indeks?.categoryName}
</span>
<Link
href={`${prefixPath}/indeks/detail/${indeks?.slug}`}
>
<h2 className="text-2xl font-bold mt-2">
{indeks?.title}
</h2>
</Link>
<p className="text-xs flex flex-row items-center gap-1 mt-1">
{formatDateToIndonesian(new Date(indeks?.createdAt))}{" "}
{indeks?.timezone ? indeks?.timezone : "WIB"} |{" "}
{/* <svg
xmlns="http://www.w3.org/2000/svg"
width="1.2em"
height="1.2em"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
/>
</svg>{" "} */}
{/* {indeks?.clickCount} */}
</p>
</div>
</div> </div>
</div> )
) )}
)} </div>
</div> )}
{/* Hero Right */} {/* Hero Right */}
<div className="lg:w-[40%] w-full space-y-2"> <div className="lg:w-[40%] w-full space-y-2">
{indeksData?.map( {isLoading ? (
(indeksRight: any, index: number) => <>
(index == count + 1 || index == count + 2) && ( <div className="flex flex-col space-y-3 w-full justify-center items-center gap-3">
<div key={indeksRight?.id} className="relative h-[310px] lg:h-[215px]"> <Skeleton className="h-[200px] w-full lg:w-[400px] rounded-xl" />
<img src={indeksRight?.thumbnailLink} alt="image" className="w-full h-[310px] lg:h-[215px] rounded-lg " /> <Skeleton className="h-[200px] w-full lg:w-[400px] rounded-xl" />
<div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-white p-4 rounded-b-lg"> </div>
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{indeksRight?.categoryName}</span> </>
<Link href={`/indeks/detail/${indeksRight?.slug}`}> ) : (
<h2 className="text-xl font-bold mt-2">{indeksRight?.title}</h2> <>
</Link> {indeksData?.map(
<p className="text-xs flex flex-row items-center gap-1 mt-1 ml-2"> (indeksRight: any, index: number) =>
{formatDateToIndonesian(new Date(indeksRight?.createdAt))} {indeksRight?.timezone ? indeksRight?.timezone : "WIB"}|{" "} (index == count + 1 || index == count + 2) && (
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24"> <div
<path key={indeksRight?.id}
fill="currentColor" className="relative h-[310px] lg:h-[215px]"
d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9" >
/> <Image
</svg>{" "} placeholder={`data:image/svg+xml;base64,${toBase64(
{indeksRight?.clickCount} shimmer(700, 475)
</p> )}`}
</div> width={1920}
</div> height={1080}
) src={indeksRight?.thumbnailLink}
alt="image"
className="w-full h-[310px] lg:h-[215px] rounded-lg "
/>
<div className="absolute bottom-0 left-0 right-0 bg-black/15 backdrop-brightness-50 text-white p-4 rounded-b-lg">
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-xs px-2 py-1">
{indeksRight?.categoryName}
</span>
<Link href={`/indeks/detail/${indeksRight?.slug}`}>
<h2 className="text-xl font-bold mt-2">
{indeksRight?.title}
</h2>
</Link>
<p className="text-xs flex flex-row items-center gap-1 mt-1 ml-2">
{formatDateToIndonesian(
new Date(indeksRight?.createdAt)
)}{" "}
{indeksRight?.timezone
? indeksRight?.timezone
: "WIB"}
|{" "}
{/* <svg
xmlns="http://www.w3.org/2000/svg"
width="1.2em"
height="1.2em"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
/>
</svg>{" "}
{indeksRight?.clickCount} */}
</p>
</div>
</div>
)
)}
</>
)} )}
</div> </div>
</div> </div>
{/* Bottom */} {/* Bottom */}
<div className="px-4 lg:px-7 py-4"> <div className="px-4 lg:px-7 py-4">
<div className="flex flex-col gap-4"> {isLoading ? (
{indeksData?.map( <div className="flex flex-col space-y-3 w-full gap-10">
(indeksBottom: any, index: number) => <div className="flex flex-col lg:flex-row gap-5">
index < 3 && ( <Skeleton className="h-[300px] w-full lg:w-[500px] rounded-lg" />
<div key={indeksBottom?.id} className="flex flex-col md:flex-row items-start p-4 gap-4"> <div className="space-y-2">
<img src={indeksBottom?.thumbnailLink} alt="" className="h-40 object-cover rounded-lg w-full lg:w-full lg:h-[300px]" /> <Skeleton className="h-4 w-[250px]" />
<div className="flex flex-col justify-between w-full"> <Skeleton className="h-4 w-[200px]" />
<p className="text-sm">{indeksBottom?.date}</p> </div>
<Link href={`/indeks/detail/${indeksBottom?.slug}`} className="text-2xl font-semibold text-gray-800"> </div>
{indeksBottom?.title} <div className="flex flex-col lg:flex-row gap-5">
</Link> <Skeleton className="h-[300px] w-full lg:w-[500px] rounded-lg" />
<p className="text-sm text-gray-600 mt-2">{indeksBottom?.description}</p> <div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
<div className="flex flex-col lg:flex-row gap-5">
<Skeleton className="h-[300px] w-full lg:w-[500px] rounded-lg" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
</div>
) : (
<div className="flex flex-col gap-4">
{indeksData?.map(
(indeksBottom: any, index: number) =>
index < 3 && (
<div
key={indeksBottom?.id}
className="flex flex-col md:flex-row items-start p-4 gap-4"
>
<Image
placeholder={`data:image/svg+xml;base64,${toBase64(
shimmer(700, 475)
)}`}
width={500}
height={250}
src={indeksBottom?.thumbnailLink}
alt=""
className="h-40 object-cover rounded-lg w-full lg:w-[550px] lg:h-[200px]"
/>
<div className="flex flex-col justify-between w-full">
<p className="text-sm">{indeksBottom?.date}</p>
<Link
href={`/indeks/detail/${indeksBottom?.slug}`}
className="text-2xl font-semibold text-gray-800 dark:text-white"
>
{indeksBottom?.title}
</Link>
<p className="text-sm text-gray-600 dark:text-white mt-2">
{htmlToString(indeksBottom?.description)}
</p>
</div>
</div> </div>
</div> )
) )}
)} </div>
</div> )}
</div> </div>
</div> </div>
); );

41
app/[locale]/(public)/indeks/detail/[slug]/page.tsx
View File

@ -188,9 +188,9 @@ const IndeksDetail = () => {
return ( return (
<> <>
<div className="p-4 lg:px-28 lg:p-12"> <div className="p-4 w-full lg:p-12">
{/* Judul */} {/* Judul */}
<div className="flex flex-col mb-5"> <div className="flex flex-col px-4 lg:px-[300px] mb-5">
<h1 className="text-base lg:text-lg mb-2">Index / Detail</h1> <h1 className="text-base lg:text-lg mb-2">Index / Detail</h1>
<h1 className="flex flex-row font-bold text-center text-lg lg:text-2xl"> <h1 className="flex flex-row font-bold text-center text-lg lg:text-2xl">
{indeksData?.title} {indeksData?.title}
@ -206,25 +206,28 @@ const IndeksDetail = () => {
height={1440} height={1440}
src={indeksData?.thumbnailLink} src={indeksData?.thumbnailLink}
alt="Main" alt="Main"
className="w-full max-h-[550px] object-contain rounded-xl " className="w-full max-h-[550px] object-contain rounded-xl"
/> />
</div> </div>
{/* Footer Informasi */} {/* Footer Informasi */}
<div className="text-gray-500 flex border-t mt-4"> <div className="px-4 lg:px-[300px]">
<div className="flex mt-2"> <div className="text-gray-500 flex border-t mt-4">
<p className="text-xs lg:text-sm mb-2 "> <div className="flex mt-2">
{t("by")}&nbsp; <p className="text-xs lg:text-sm mb-2 ">
<span className="font-semibold text-gray-500"> {t("by")}&nbsp;
{indeksData?.uploaderName} <span className="font-semibold text-gray-500">
</span> {indeksData?.uploaderName}
&nbsp; | &nbsp;{t("updatedOn")} {indeksData?.createdAt} WIB &nbsp; </span>
</p> &nbsp; | &nbsp;{t("updatedOn")} {indeksData?.createdAt} WIB
&nbsp;
</p>
</div>
</div> </div>
</div> </div>
{/* Keterangan */} {/* Keterangan */}
<div className="w-auto"> <div className="w-full px-4 lg:px-[300px]">
<p <p
className="font-light text-base lg:text-lg text-justify" className="font-light text-base lg:text-lg text-justify"
dangerouslySetInnerHTML={{ __html: indeksData?.description }} dangerouslySetInnerHTML={{ __html: indeksData?.description }}
@ -233,9 +236,9 @@ const IndeksDetail = () => {
</div> </div>
{/* Comment */} {/* Comment */}
<div className="w-full"> <div className="w-full ">
<div className="flex flex-col py-5 p-0 lg:p-10 bg-[#f7f7f7] dark:bg-slate-600"> <div className="flex flex-col py-5 p-0 lg:p-10 bg-[#f7f7f7] dark:bg-slate-600">
<div className="gap-5 flex flex-col px-4 lg:px-16"> <div className="gap-5 flex flex-col px-4 lg:px-[300px]">
<p className="flex items-start text-bases lg:text-lg"> <p className="flex items-start text-bases lg:text-lg">
{t("comment")} {t("comment")}
</p> </p>
@ -253,9 +256,11 @@ const IndeksDetail = () => {
</button> </button>
</div> </div>
<div className="border-b-2 border-slate-300 mt-4 w-auto"></div> <div className="px-4 lg:px-[300px]">
<div className="border-b-2 border-slate-300 mt-4"></div>
</div>
<div> <div className="px-4 lg:px-[230px]">
{listComments?.map((data: any) => ( {listComments?.map((data: any) => (
<div className="flex flex-col"> <div className="flex flex-col">
<div className="flex flex-row mt-2 px-4 lg:px-14"> <div className="flex flex-row mt-2 px-4 lg:px-14">
@ -511,7 +516,7 @@ const IndeksDetail = () => {
</div> </div>
{/* Konten Serupa */} {/* Konten Serupa */}
<div className="space-x-5 flex flex-col px-4 lg:px-16 py-16 gap-5"> <div className="space-x-5 flex flex-col px-4 lg:px-[300px] py-16 gap-5">
<h1 className="font-bold text-base lg:text-xl px-4 lg:px-8"> <h1 className="font-bold text-base lg:text-xl px-4 lg:px-8">
{" "} {" "}
{t("relatedPosts")} {t("relatedPosts")}

2
components/landing-page/landing-polda-kaltara/contact-us-kaltara.tsx
View File

@ -45,7 +45,7 @@ const channels: Channel[] = [
const ContactUsKaltara = () => { const ContactUsKaltara = () => {
return ( return (
<div className="min-h-[300px] lg:min-h-[300px] text-black px-4 lg:px-20 pb-20"> <div className="min-h-[300px] lg:min-h-[300px] text-black px-4 lg:px-[115px] pb-20">
<div className="w-full px-4 py-4 bg-white"> <div className="w-full px-4 py-4 bg-white">
<h2 className="text-center text-xl md:text-2xl font-semibold mb-6">Channel Divisi Humas Polri</h2> <h2 className="text-center text-xl md:text-2xl font-semibold mb-6">Channel Divisi Humas Polri</h2>

2
components/landing-page/landing-polda-kaltara/content-category-kaltara.tsx
View File

@ -73,7 +73,7 @@ const ContentCategoryKaltara = (props: { group?: string; type: string }) => {
: window.btoa(str); : window.btoa(str);
return ( return (
<div className="px-4 lg:px-24 py-10"> <div className="px-4 lg:px-[115px] py-10">
<Reveal> <Reveal>
<h2 className="text-center text-xl lg:text-3xl font-bold text-[#bb3523] mb-4"> <h2 className="text-center text-xl lg:text-3xl font-bold text-[#bb3523] mb-4">
{pathname?.split("/")[1] == "in" ? ( {pathname?.split("/")[1] == "in" ? (

2
components/landing-page/landing-polda-kaltara/latest-content-kaltara.tsx
View File

@ -74,7 +74,7 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
return ( return (
<> <>
<Reveal> <Reveal>
<div className="px-4 lg:px-24 my-10"> <div className="px-4 lg:px-[115px] my-10">
{/* <div className="bg-[#c03724] rounded-md p-3 w-fit text-white">Berita {props.type == "popular" ? "Terpopuler" : props.type == "latest" ? t("new") : "Serupa"}</div> */} {/* <div className="bg-[#c03724] rounded-md p-3 w-fit text-white">Berita {props.type == "popular" ? "Terpopuler" : props.type == "latest" ? t("new") : "Serupa"}</div> */}
<div className="w-full justify-start flex flex-col lg:flex-row gap-20 mb-4"> <div className="w-full justify-start flex flex-col lg:flex-row gap-20 mb-4">
<h2 className="flex items-center text-xl lg:text-2xl w-fit font-bold bg-[#bb3523] px-4 py-1 rounded-lg text-white"> <h2 className="flex items-center text-xl lg:text-2xl w-fit font-bold bg-[#bb3523] px-4 py-1 rounded-lg text-white">

22
components/main/audio-detail.tsx
View File

@ -891,7 +891,27 @@ const DetailAudio = () => {
{/* Comment */} {/* Comment */}
<div className="flex flex-col my-16 p-4 lg:p-10 bg-[#f7f7f7] dark:bg-slate-600"> <div className="flex flex-col my-16 p-4 lg:p-10 bg-[#f7f7f7] dark:bg-slate-600">
<div className="gap-5 flex flex-col px-4 lg:px-14"> <div className="gap-5 flex flex-col px-4 lg:px-14">
<p className="flex items-start text-lg">{t("comment")}</p> <div className="flex flex-col">
<h1 className="mb-2">{t("shareTo")}</h1>
<div className="flex flex-col mb-2">
<p className="text-base font-semibold mb-1">
{t("destinationEmail")}
</p>
<Input
value={emailShareInput}
onChange={(event) => setEmailShareInput(event.target.value)}
onKeyPress={handleEmailList}
type="email"
placeholder={t("pressEnter")}
/>
</div>
<Button
className="bg-blue-500 text-white p-2 w-fit rounded-lg"
onClick={() => shareToEmail()}
>
{t("send")}
</Button>
</div>{" "}
<Textarea <Textarea
placeholder="Type your comments here." placeholder="Type your comments here."
className="flex w-full pb-12" className="flex w-full pb-12"

22
components/main/document-detail.tsx
View File

@ -621,7 +621,27 @@ const DetailDocument = () => {
{/* Tombol Bagikan */} {/* Tombol Bagikan */}
<div className="flex flex-row py-3"> <div className="flex flex-row py-3">
<p className="text-base font-semibold">{t("share")}</p> <div className="flex flex-col">
<h1 className="mb-2">{t("shareTo")}</h1>
<div className="flex flex-col mb-2">
<p className="text-base font-semibold mb-1">
{t("destinationEmail")}
</p>
<Input
value={emailShareInput}
onChange={(event) => setEmailShareInput(event.target.value)}
onKeyPress={handleEmailList}
type="email"
placeholder={t("pressEnter")}
/>
</div>
<Button
className="bg-blue-500 text-white p-2 w-fit rounded-lg"
onClick={() => shareToEmail()}
>
{t("send")}
</Button>
</div>{" "}
<a <a
className="ml-8 cursor-pointer" className="ml-8 cursor-pointer"
onClick={() => onClick={() =>

56
components/main/image-detail.tsx
View File

@ -513,7 +513,7 @@ const DetailImage = (data: any) => {
return ( return (
<> <>
<div className="w-full max-w-screen-xl mx-auto px-4 py-4"> <div className="w-full max-w-screen-xl mx-auto py-4">
<div className="rounded-md overflow-hidden md:flex flex-row justify-center"> <div className="rounded-md overflow-hidden md:flex flex-row justify-center">
{/* Bagian Kiri */} {/* Bagian Kiri */}
<div className=""> <div className="">
@ -523,7 +523,7 @@ const DetailImage = (data: any) => {
<Skeleton className="rounded-lg h-[300px] w-screen lg:h-[600px] lg:w-[900px]" /> <Skeleton className="rounded-lg h-[300px] w-screen lg:h-[600px] lg:w-[900px]" />
</div> </div>
) : ( ) : (
<div className="relative self-end ml-auto"> <div className="relative">
<Image <Image
placeholder={`data:image/svg+xml;base64,${toBase64( placeholder={`data:image/svg+xml;base64,${toBase64(
shimmer(700, 475) shimmer(700, 475)
@ -532,7 +532,7 @@ const DetailImage = (data: any) => {
height={1440} height={1440}
src={detailDataImage?.files[selectedImage]?.url} src={detailDataImage?.files[selectedImage]?.url}
alt="Main" alt="Main"
className="rounded-md w-full h-[560px] object-contain" className="rounded-lg h-[300px] w-screen lg:h-[600px] lg:w-[900px] object-cover"
/> />
<div className="absolute top-4 right-4"></div> <div className="absolute top-4 right-4"></div>
@ -724,7 +724,43 @@ const DetailImage = (data: any) => {
{/* Tombol Bagikan */} {/* Tombol Bagikan */}
<div className="flex flex-row mt-5 justify-center"> <div className="flex flex-row mt-5 justify-center">
<p className="text-base font-semibold">{t("share")}</p> <div className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
<Popover>
<PopoverTrigger asChild>
<button className="w-full flex items-center gap-2">
{/* <Icon icon="oi:share" fontSize={20} /> */}
<p className="text-base font-semibold mb-2">
{t("share")}
</p>
</button>
</PopoverTrigger>
<PopoverContent>
<div className="flex flex-col">
<h1 className="mb-2">{t("shareTo")}</h1>
<div className="flex flex-col mb-2">
<p className="text-base font-semibold mb-1">
{t("destinationEmail")}
</p>
<Input
value={emailShareInput}
onChange={(event) =>
setEmailShareInput(event.target.value)
}
onKeyPress={handleEmailList}
type="email"
placeholder={t("pressEnter")}
/>
</div>
<Button
className="bg-blue-500 text-white p-2 w-fit rounded-lg"
onClick={() => shareToEmail()}
>
{t("send")}
</Button>
</div>
</PopoverContent>
</Popover>
</div>
<a <a
className="ml-8 cursor-pointer" className="ml-8 cursor-pointer"
onClick={() => onClick={() =>
@ -821,8 +857,8 @@ const DetailImage = (data: any) => {
<div className="w-full mb-8"> <div className="w-full mb-8">
{/* Comment */} {/* Comment */}
<div className="flex flex-col my-16 p-4 lg:p-10 bg-[#f7f7f7] dark:bg-slate-600"> <div className="flex flex-col my-16 p-4 lg:p-10 bg-[#f7f7f7] dark:bg-slate-600">
<div className="gap-5 flex flex-col px-4 lg:px-14"> <div className="gap-5 flex flex-col px-4 lg:px-[300px]">
<p className="flex items-start text-lg">{t("comment")}</p> <p className="flex items-start text-lg">{t("comment")}</p>
<Textarea <Textarea
placeholder={t("leaveComment")} placeholder={t("leaveComment")}
@ -836,9 +872,9 @@ const DetailImage = (data: any) => {
{t("send")} {t("send")}
</button> </button>
</div> </div>
<div className="px-4 lg:px-[300px]">
<div className="border-b-2 border-slate-300 mt-4 w-auto"></div> <div className="border-b-2 border-slate-300 mt-4 w-auto"></div>
</div>
<div> <div>
{listSuggestion?.map((data: any) => ( {listSuggestion?.map((data: any) => (
<div className="flex flex-col"> <div className="flex flex-col">
@ -1136,7 +1172,7 @@ const DetailImage = (data: any) => {
</div> </div>
{/* Konten Serupa */} {/* Konten Serupa */}
<div className="px-4 lg:px-[100px]"> <div className="px-4 mx-auto lg:px-[340px]">
<NewContent group="mabes" type={"similar"} /> <NewContent group="mabes" type={"similar"} />
</div> </div>
</div> </div>

40
components/main/video-detail.tsx
View File

@ -639,7 +639,43 @@ const DetailVideo = () => {
{/* Tombol Bagikan */} {/* Tombol Bagikan */}
<div className="flex flex-row justify-center py-3"> <div className="flex flex-row justify-center py-3">
<p className="text-base font-semibold">{t("share")}</p> <div className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
<Popover>
<PopoverTrigger asChild>
<button className="w-full flex items-center gap-2">
{/* <Icon icon="oi:share" fontSize={20} /> */}
<p className="text-base font-semibold mb-2">
{t("share")}
</p>
</button>
</PopoverTrigger>
<PopoverContent>
<div className="flex flex-col">
<h1 className="mb-2">{t("shareTo")}</h1>
<div className="flex flex-col mb-2">
<p className="text-base font-semibold mb-1">
{t("destinationEmail")}
</p>
<Input
value={emailShareInput}
onChange={(event) =>
setEmailShareInput(event.target.value)
}
onKeyPress={handleEmailList}
type="email"
placeholder={t("pressEnter")}
/>
</div>
<Button
className="bg-blue-500 text-white p-2 w-fit rounded-lg"
onClick={() => shareToEmail()}
>
{t("send")}
</Button>
</div>
</PopoverContent>
</Popover>
</div>
<a <a
className="ml-8 cursor-pointer" className="ml-8 cursor-pointer"
onClick={() => onClick={() =>
@ -1049,7 +1085,7 @@ const DetailVideo = () => {
</div> </div>
{/* Konten Serupa */} {/* Konten Serupa */}
<div className=""> <div className="px-4 md:px-[100px]">
<NewContent group="mabes" type={"similar"} /> <NewContent group="mabes" type={"similar"} />
</div> </div>
</div> </div>