Merge branch 'main' of https://gitlab.com/hanifsalafi/mediahub_redesign into dev-rama
This commit is contained in:
Rama Priyanto
commit
48d24e76b6
|
|
@ -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;
|
||||
|
|
@ -1,18 +1,45 @@
|
|||
"use client";
|
||||
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 { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
|
||||
import { Link } from "@/i18n/routing";
|
||||
import { getDetailIndeks, publicDetailBlog } from "@/service/landing/landing";
|
||||
import {
|
||||
Carousel,
|
||||
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 { 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 searchParams = useSearchParams();
|
||||
const id = searchParams?.get("id");
|
||||
const [indeksData, setIndeksData] = useState<any>();
|
||||
const params = useParams();
|
||||
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(() => {
|
||||
initFetch();
|
||||
|
|
@ -21,63 +48,512 @@ const IndeksDetail = () => {
|
|||
const initFetch = async () => {
|
||||
const response = await getDetailIndeks();
|
||||
console.log(response);
|
||||
setRelatedPost(response?.data?.data?.content);
|
||||
setIndexData(response?.data?.data?.content);
|
||||
};
|
||||
const detailFetch = async () => {
|
||||
const response = await publicDetailBlog(slug);
|
||||
console.log(response);
|
||||
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 (
|
||||
<>
|
||||
<div className="p-4 lg:px-60 lg:p-12">
|
||||
<div className="p-4 w-full lg:p-12">
|
||||
{/* Judul */}
|
||||
<div className="flex flex-col mb-5">
|
||||
<h1 className="text-lg mb-2">Indeks / Detail</h1>
|
||||
<h1 className="flex flex-row font-bold text-center text-2xl">{indeksData?.title}</h1>
|
||||
<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="flex flex-row font-bold text-center text-lg lg:text-2xl">
|
||||
{indeksData?.title}
|
||||
</h1>
|
||||
</div>
|
||||
{/* Gambar Utama */}
|
||||
<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>
|
||||
|
||||
{/* Footer Informasi */}
|
||||
<div className="text-sm text-gray-500 flex justify-between items-center border-t mt-4">
|
||||
<div className="flex flex-row items-center mt-3 justify-between">
|
||||
oleh <span className="font-semibold text-black">{indeksData?.uploaderName}</span> | Diupdate pada {indeksData?.createdAt} WIB
|
||||
<div className="px-4 lg:px-[300px]">
|
||||
<div className="text-gray-500 flex border-t mt-4">
|
||||
<div className="flex mt-2">
|
||||
<p className="text-xs lg:text-sm mb-2 ">
|
||||
{t("by")}
|
||||
<span className="font-semibold text-gray-500">
|
||||
{indeksData?.uploaderName}
|
||||
</span>
|
||||
| {t("updatedOn")} {indeksData?.createdAt} WIB
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Keterangan */}
|
||||
<div className="w-auto">
|
||||
<p className="font-light text-justify" dangerouslySetInnerHTML={{ __html: indeksData?.description }} />
|
||||
<div className="w-full px-4 lg:px-[300px]">
|
||||
<p
|
||||
className="font-light text-base lg:text-lg text-justify"
|
||||
dangerouslySetInnerHTML={{ __html: indeksData?.description }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Comment */}
|
||||
<div className="w-full">
|
||||
<div className="flex flex-col py-5 p-10 bg-[#f7f7f7]">
|
||||
<div className="gap-5 flex flex-col px-4 lg:px-16">
|
||||
<p className="flex items-start text-lg">Berikan Komentar</p>
|
||||
<Textarea placeholder="Type your comments here." className="flex w-full" />
|
||||
<button className="flex items-start bg-[#bb3523] text-white rounded-lg w-fit px-4 py-1">Kirim</button>
|
||||
<div className="w-full ">
|
||||
<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-[300px]">
|
||||
<p className="flex items-start text-bases lg:text-lg">
|
||||
{t("comment")}
|
||||
</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>
|
||||
|
||||
{/* Konten Serupa */}
|
||||
<div className="space-x-5 flex flex-col px-4 lg:px-16 py-16 gap-5">
|
||||
<h1 className="font-bold text-base lg:text-xl px-4 lg:px-8">Post Terkait</h1>
|
||||
<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">
|
||||
{" "}
|
||||
{t("relatedPosts")}
|
||||
</h1>
|
||||
<Carousel>
|
||||
<CarouselContent className="w-full max-w-7xl">
|
||||
{relatedPost?.map((relate: any) => (
|
||||
<CarouselItem key={relate?.id} 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">
|
||||
<img src={relate?.thumbnailLink} className="w-full rounded-lg h-40 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300" />
|
||||
{indexData?.map((relate: any) => (
|
||||
<CarouselItem
|
||||
key={relate?.id}
|
||||
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">
|
||||
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{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>
|
||||
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">
|
||||
{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">
|
||||
{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>
|
||||
</div>
|
||||
</Link>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,31 @@
|
|||
"use client";
|
||||
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { Link } from "@/i18n/routing";
|
||||
import { getIndeksData } from "@/service/landing/landing";
|
||||
import { formatDateToIndonesian } from "@/utils/globals";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { formatDateToIndonesian, htmlToString } from "@/utils/globals";
|
||||
import Image from "next/image";
|
||||
import { useParams, usePathname } from "next/navigation";
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
const Indeks: React.FC = () => {
|
||||
const pathname = usePathname();
|
||||
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;
|
||||
|
||||
useEffect(() => {
|
||||
if (indeksData) {
|
||||
const intervalId = setInterval(() => {
|
||||
|
|
@ -21,93 +37,228 @@ const Indeks: React.FC = () => {
|
|||
}, [indeksData]);
|
||||
|
||||
useEffect(() => {
|
||||
initFetch();
|
||||
}, []);
|
||||
const initFetch = async () => {
|
||||
const response = await getIndeksData();
|
||||
console.log(response);
|
||||
setIndeksData(response?.data?.data?.content);
|
||||
if (poldaName) {
|
||||
initFetch(poldaName);
|
||||
}
|
||||
}, [poldaName]);
|
||||
|
||||
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 (
|
||||
<div className="px-4 lg:px-14">
|
||||
<div className="px-4 lg:px-14 min-h-[75.5vh]">
|
||||
{/* 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="lg:w-[60%] w-full lg:h-full">
|
||||
{indeksData?.map(
|
||||
(indeks: any, index: number) =>
|
||||
index == count && (
|
||||
<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="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-white p-4 rounded-b-lg">
|
||||
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{indeks?.categoryName}</span>
|
||||
<Link href={`/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 ml-2">
|
||||
{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>
|
||||
{isLoading ? (
|
||||
<div className="flex flex-col space-y-3 mx-auto w-full lg:w-2/3">
|
||||
<Skeleton className="h-[310px] lg:h-[420px] rounded-xl" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="lg:w-[60%] w-full lg:h-full">
|
||||
{indeksData?.map(
|
||||
(indeks: any, index: number) =>
|
||||
index == count && (
|
||||
<div
|
||||
key={indeks?.id}
|
||||
className="relative h-[310px] lg:h-[435px]"
|
||||
>
|
||||
<Image
|
||||
placeholder={`data:image/svg+xml;base64,${toBase64(
|
||||
shimmer(700, 475)
|
||||
)}`}
|
||||
width={2560}
|
||||
height={1440}
|
||||
src={indeks?.thumbnailLink}
|
||||
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>
|
||||
)}
|
||||
|
||||
{/* Hero Right */}
|
||||
<div className="lg:w-[40%] w-full space-y-2">
|
||||
{indeksData?.map(
|
||||
(indeksRight: any, index: number) =>
|
||||
(index == count + 1 || index == count + 2) && (
|
||||
<div key={indeksRight?.id} className="relative h-[310px] lg:h-[215px]">
|
||||
<img 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-transparent backdrop-blur-sm text-white p-4 rounded-b-lg">
|
||||
<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>
|
||||
<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>
|
||||
)
|
||||
{isLoading ? (
|
||||
<>
|
||||
<div className="flex flex-col space-y-3 w-full justify-center items-center gap-3">
|
||||
<Skeleton className="h-[200px] w-full lg:w-[400px] rounded-xl" />
|
||||
<Skeleton className="h-[200px] w-full lg:w-[400px] rounded-xl" />
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{indeksData?.map(
|
||||
(indeksRight: any, index: number) =>
|
||||
(index == count + 1 || index == count + 2) && (
|
||||
<div
|
||||
key={indeksRight?.id}
|
||||
className="relative h-[310px] lg:h-[215px]"
|
||||
>
|
||||
<Image
|
||||
placeholder={`data:image/svg+xml;base64,${toBase64(
|
||||
shimmer(700, 475)
|
||||
)}`}
|
||||
width={1920}
|
||||
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>
|
||||
|
||||
{/* Bottom */}
|
||||
<div className="px-4 lg:px-7 py-4">
|
||||
<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">
|
||||
<img src={indeksBottom?.thumbnailLink} alt="" className="h-40 object-cover rounded-lg w-full lg:w-full lg:h-[300px]" />
|
||||
<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">
|
||||
{indeksBottom?.title}
|
||||
</Link>
|
||||
<p className="text-sm text-gray-600 mt-2">{indeksBottom?.description}</p>
|
||||
{isLoading ? (
|
||||
<div className="flex flex-col space-y-3 w-full gap-10">
|
||||
<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 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 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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -16,9 +16,9 @@ import { useParams } from "next/navigation";
|
|||
const layout = ({ children }: { children: React.ReactNode }) => {
|
||||
const params = useParams();
|
||||
const poldaName: any = params?.polda_name;
|
||||
return poldaName === "kaltara" ? (
|
||||
children
|
||||
) : (
|
||||
return (
|
||||
// children
|
||||
// ) : (
|
||||
<>
|
||||
<Navbar />
|
||||
{children}
|
||||
|
|
|
|||
|
|
@ -23,19 +23,19 @@ import HeroNewPolda from "@/components/landing-page/hero-new-polda";
|
|||
const page = () => {
|
||||
const params = useParams();
|
||||
const poldaName: any = params?.polda_name;
|
||||
return poldaName === "kaltara" ? (
|
||||
<div>
|
||||
<NavbarKaltara />
|
||||
<HeaderBannerKaltara />
|
||||
{/* <SearchSectionKaltara /> */}
|
||||
<WelcomePolda />
|
||||
<LatestContentKaltara group="polda" type="latest" />
|
||||
<LatestContentKaltara group="polda" type="popular" />
|
||||
<ContentCategoryKaltara type="" group="polda" />
|
||||
<ContactUsKaltara />
|
||||
<NewsTickerKaltara />
|
||||
</div>
|
||||
) : (
|
||||
return (
|
||||
// <div>
|
||||
// <NavbarKaltara />
|
||||
// <HeaderBannerKaltara />
|
||||
// {/* <SearchSectionKaltara /> */}
|
||||
// <WelcomePolda />
|
||||
// <LatestContentKaltara group="polda" type="latest" />
|
||||
// <LatestContentKaltara group="polda" type="popular" />
|
||||
// <ContentCategoryKaltara type="" group="polda" />
|
||||
// <ContactUsKaltara />
|
||||
// <NewsTickerKaltara />
|
||||
// </div>
|
||||
// ) : (
|
||||
// <div>
|
||||
// {/* <HeaderBanner /> */}
|
||||
// <HeroNew group="polda" />
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -47,7 +47,7 @@ const categoryLinks: any = {
|
|||
MediaHub: "https://new.netidhub.com/in/polda/kaltara",
|
||||
};
|
||||
|
||||
const NavbarKaltara = () => {
|
||||
const NavbarKaltaraTbnews = () => {
|
||||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
|
||||
return (
|
||||
|
|
@ -111,4 +111,4 @@ const NavbarKaltara = () => {
|
|||
);
|
||||
};
|
||||
|
||||
export default NavbarKaltara;
|
||||
export default NavbarKaltaraTbnews;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import NavbarKaltara from "./components/navbar-kaltara";
|
||||
import HeroKaltara from "./components/hero-kaltara";
|
||||
import LatestNews from "./components/latest-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 PpsSection from "./components/pps-section";
|
||||
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 = () => {
|
||||
return (
|
||||
<div>
|
||||
<NavbarKaltara />
|
||||
<NavbarKaltaraTbnews />
|
||||
<HeroKaltara />
|
||||
<PpsSection />
|
||||
<LatestNews type="latest" />
|
||||
|
|
@ -29,6 +32,16 @@ const PoldaKaltara = () => {
|
|||
<ContactUsKaltara />
|
||||
<NewsTickerKaltara />
|
||||
</div>
|
||||
// <div>
|
||||
// <NavbarKaltara />
|
||||
// {/* <SearchSectionKaltara /> */}
|
||||
// <WelcomePolda />
|
||||
// <LatestContentKaltara group="polda" type="latest" />
|
||||
// <LatestContentKaltara group="polda" type="popular" />
|
||||
// <ContentCategoryKaltara type="" group="polda" />
|
||||
// <ContactUsKaltara />
|
||||
// <NewsTickerKaltara />
|
||||
// </div>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,18 +1,45 @@
|
|||
"use client";
|
||||
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 { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
|
||||
import { Link } from "@/i18n/routing";
|
||||
import { getDetailIndeks, publicDetailBlog } from "@/service/landing/landing";
|
||||
import {
|
||||
Carousel,
|
||||
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 { 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 searchParams = useSearchParams();
|
||||
const id = searchParams?.get("id");
|
||||
const [indeksData, setIndeksData] = useState<any>();
|
||||
const params = useParams();
|
||||
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(() => {
|
||||
initFetch();
|
||||
|
|
@ -21,63 +48,512 @@ const IndeksDetail = () => {
|
|||
const initFetch = async () => {
|
||||
const response = await getDetailIndeks();
|
||||
console.log(response);
|
||||
setRelatedPost(response?.data?.data?.content);
|
||||
setIndexData(response?.data?.data?.content);
|
||||
};
|
||||
const detailFetch = async () => {
|
||||
const response = await publicDetailBlog(slug);
|
||||
console.log(response);
|
||||
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 (
|
||||
<>
|
||||
<div className="p-4 lg:px-60 lg:p-12">
|
||||
<div className="p-4 w-full lg:p-12">
|
||||
{/* Judul */}
|
||||
<div className="flex flex-col mb-5">
|
||||
<h1 className="text-lg mb-2">Indeks / Detail</h1>
|
||||
<h1 className="flex flex-row font-bold text-center text-2xl">{indeksData?.title}</h1>
|
||||
<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="flex flex-row font-bold text-center text-lg lg:text-2xl">
|
||||
{indeksData?.title}
|
||||
</h1>
|
||||
</div>
|
||||
{/* Gambar Utama */}
|
||||
<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>
|
||||
|
||||
{/* Footer Informasi */}
|
||||
<div className="text-sm text-gray-500 flex justify-between items-center border-t mt-4">
|
||||
<div className="flex flex-row items-center mt-3 justify-between">
|
||||
oleh <span className="font-semibold text-black">{indeksData?.uploaderName}</span> | Diupdate pada {indeksData?.createdAt} WIB
|
||||
<div className="px-4 lg:px-[300px]">
|
||||
<div className="text-gray-500 flex border-t mt-4">
|
||||
<div className="flex mt-2">
|
||||
<p className="text-xs lg:text-sm mb-2 ">
|
||||
{t("by")}
|
||||
<span className="font-semibold text-gray-500">
|
||||
{indeksData?.uploaderName}
|
||||
</span>
|
||||
| {t("updatedOn")} {indeksData?.createdAt} WIB
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Keterangan */}
|
||||
<div className="w-auto">
|
||||
<p className="font-light text-justify" dangerouslySetInnerHTML={{ __html: indeksData?.description }} />
|
||||
<div className="w-full px-4 lg:px-[300px]">
|
||||
<p
|
||||
className="font-light text-base lg:text-lg text-justify"
|
||||
dangerouslySetInnerHTML={{ __html: indeksData?.description }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Comment */}
|
||||
<div className="w-full">
|
||||
<div className="flex flex-col py-5 p-10 bg-[#f7f7f7]">
|
||||
<div className="gap-5 flex flex-col px-4 lg:px-16">
|
||||
<p className="flex items-start text-lg">Berikan Komentar</p>
|
||||
<Textarea placeholder="Type your comments here." className="flex w-full" />
|
||||
<button className="flex items-start bg-[#bb3523] text-white rounded-lg w-fit px-4 py-1">Kirim</button>
|
||||
<div className="w-full ">
|
||||
<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-[300px]">
|
||||
<p className="flex items-start text-bases lg:text-lg">
|
||||
{t("comment")}
|
||||
</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>
|
||||
|
||||
{/* Konten Serupa */}
|
||||
<div className="space-x-5 flex flex-col px-4 lg:px-16 py-16 gap-5">
|
||||
<h1 className="font-bold text-base lg:text-xl px-4 lg:px-8">Post Terkait</h1>
|
||||
<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">
|
||||
{" "}
|
||||
{t("relatedPosts")}
|
||||
</h1>
|
||||
<Carousel>
|
||||
<CarouselContent className="w-full max-w-7xl">
|
||||
{relatedPost?.map((relate: any) => (
|
||||
<CarouselItem key={relate?.id} 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">
|
||||
<img src={relate?.thumbnailLink} className="w-full rounded-lg h-40 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300" />
|
||||
{indexData?.map((relate: any) => (
|
||||
<CarouselItem
|
||||
key={relate?.id}
|
||||
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">
|
||||
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{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>
|
||||
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">
|
||||
{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">
|
||||
{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>
|
||||
</div>
|
||||
</Link>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,31 @@
|
|||
"use client";
|
||||
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { Link } from "@/i18n/routing";
|
||||
import { getIndeksData } from "@/service/landing/landing";
|
||||
import { formatDateToIndonesian } from "@/utils/globals";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { formatDateToIndonesian, htmlToString } from "@/utils/globals";
|
||||
import Image from "next/image";
|
||||
import { useParams, usePathname } from "next/navigation";
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
const Indeks: React.FC = () => {
|
||||
const pathname = usePathname();
|
||||
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;
|
||||
|
||||
useEffect(() => {
|
||||
if (indeksData) {
|
||||
const intervalId = setInterval(() => {
|
||||
|
|
@ -21,93 +37,230 @@ const Indeks: React.FC = () => {
|
|||
}, [indeksData]);
|
||||
|
||||
useEffect(() => {
|
||||
initFetch();
|
||||
}, []);
|
||||
const initFetch = async () => {
|
||||
const response = await getIndeksData();
|
||||
console.log(response);
|
||||
setIndeksData(response?.data?.data?.content);
|
||||
if (sarkerName) {
|
||||
initFetch(sarkerName);
|
||||
}
|
||||
}, [sarkerName]);
|
||||
|
||||
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 (
|
||||
<div className="px-4 lg:px-14">
|
||||
<div className="px-4 lg:px-14 min-h-[75.5vh]">
|
||||
{/* 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="lg:w-[60%] w-full lg:h-full">
|
||||
{indeksData?.map(
|
||||
(indeks: any, index: number) =>
|
||||
index == count && (
|
||||
<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="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-white p-4 rounded-b-lg">
|
||||
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{indeks?.categoryName}</span>
|
||||
<Link href={`/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 ml-2">
|
||||
{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>
|
||||
{isLoading ? (
|
||||
<div className="flex flex-col space-y-3 mx-auto w-full lg:w-2/3">
|
||||
<Skeleton className="h-[310px] lg:h-[420px] rounded-xl" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="lg:w-[60%] w-full lg:h-full">
|
||||
{indeksData?.map(
|
||||
(indeks: any, index: number) =>
|
||||
index == count && (
|
||||
<div
|
||||
key={indeks?.id}
|
||||
className="relative h-[310px] lg:h-[435px]"
|
||||
>
|
||||
<Image
|
||||
placeholder={`data:image/svg+xml;base64,${toBase64(
|
||||
shimmer(700, 475)
|
||||
)}`}
|
||||
width={2560}
|
||||
height={1440}
|
||||
src={indeks?.thumbnailLink}
|
||||
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>
|
||||
)}
|
||||
|
||||
{/* Hero Right */}
|
||||
<div className="lg:w-[40%] w-full space-y-2">
|
||||
{indeksData?.map(
|
||||
(indeksRight: any, index: number) =>
|
||||
(index == count + 1 || index == count + 2) && (
|
||||
<div key={indeksRight?.id} className="relative h-[310px] lg:h-[215px]">
|
||||
<img 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-transparent backdrop-blur-sm text-white p-4 rounded-b-lg">
|
||||
<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>
|
||||
<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>
|
||||
)
|
||||
{isLoading ? (
|
||||
<>
|
||||
<div className="flex flex-col space-y-3 w-full justify-center items-center gap-3">
|
||||
<Skeleton className="h-[200px] w-full lg:w-[400px] rounded-xl" />
|
||||
<Skeleton className="h-[200px] w-full lg:w-[400px] rounded-xl" />
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{indeksData?.map(
|
||||
(indeksRight: any, index: number) =>
|
||||
(index == count + 1 || index == count + 2) && (
|
||||
<div
|
||||
key={indeksRight?.id}
|
||||
className="relative h-[310px] lg:h-[215px]"
|
||||
>
|
||||
<Image
|
||||
placeholder={`data:image/svg+xml;base64,${toBase64(
|
||||
shimmer(700, 475)
|
||||
)}`}
|
||||
width={1920}
|
||||
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>
|
||||
|
||||
{/* Bottom */}
|
||||
<div className="px-4 lg:px-7 py-4">
|
||||
<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">
|
||||
<img src={indeksBottom?.thumbnailLink} alt="" className="h-40 object-cover rounded-lg w-full lg:w-full lg:h-[300px]" />
|
||||
<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">
|
||||
{indeksBottom?.title}
|
||||
</Link>
|
||||
<p className="text-sm text-gray-600 mt-2">{indeksBottom?.description}</p>
|
||||
{isLoading ? (
|
||||
<div className="flex flex-col space-y-3 w-full gap-10">
|
||||
<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 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 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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -188,9 +188,9 @@ const IndeksDetail = () => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="p-4 lg:px-28 lg:p-12">
|
||||
<div className="p-4 w-full lg:p-12">
|
||||
{/* 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="flex flex-row font-bold text-center text-lg lg:text-2xl">
|
||||
{indeksData?.title}
|
||||
|
|
@ -206,25 +206,28 @@ const IndeksDetail = () => {
|
|||
height={1440}
|
||||
src={indeksData?.thumbnailLink}
|
||||
alt="Main"
|
||||
className="w-full max-h-[550px] object-contain rounded-xl "
|
||||
className="w-full max-h-[550px] object-contain rounded-xl"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Footer Informasi */}
|
||||
<div className="text-gray-500 flex border-t mt-4">
|
||||
<div className="flex mt-2">
|
||||
<p className="text-xs lg:text-sm mb-2 ">
|
||||
{t("by")}
|
||||
<span className="font-semibold text-gray-500">
|
||||
{indeksData?.uploaderName}
|
||||
</span>
|
||||
| {t("updatedOn")} {indeksData?.createdAt} WIB
|
||||
</p>
|
||||
<div className="px-4 lg:px-[300px]">
|
||||
<div className="text-gray-500 flex border-t mt-4">
|
||||
<div className="flex mt-2">
|
||||
<p className="text-xs lg:text-sm mb-2 ">
|
||||
{t("by")}
|
||||
<span className="font-semibold text-gray-500">
|
||||
{indeksData?.uploaderName}
|
||||
</span>
|
||||
| {t("updatedOn")} {indeksData?.createdAt} WIB
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Keterangan */}
|
||||
<div className="w-auto">
|
||||
<div className="w-full px-4 lg:px-[300px]">
|
||||
<p
|
||||
className="font-light text-base lg:text-lg text-justify"
|
||||
dangerouslySetInnerHTML={{ __html: indeksData?.description }}
|
||||
|
|
@ -233,9 +236,9 @@ const IndeksDetail = () => {
|
|||
</div>
|
||||
|
||||
{/* 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="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">
|
||||
{t("comment")}
|
||||
</p>
|
||||
|
|
@ -253,9 +256,11 @@ const IndeksDetail = () => {
|
|||
</button>
|
||||
</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) => (
|
||||
<div className="flex flex-col">
|
||||
<div className="flex flex-row mt-2 px-4 lg:px-14">
|
||||
|
|
@ -511,7 +516,7 @@ const IndeksDetail = () => {
|
|||
</div>
|
||||
|
||||
{/* 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">
|
||||
{" "}
|
||||
{t("relatedPosts")}
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ const channels: Channel[] = [
|
|||
|
||||
const ContactUsKaltara = () => {
|
||||
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">
|
||||
<h2 className="text-center text-xl md:text-2xl font-semibold mb-6">Channel Divisi Humas Polri</h2>
|
||||
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@ const ContentCategoryKaltara = (props: { group?: string; type: string }) => {
|
|||
: window.btoa(str);
|
||||
|
||||
return (
|
||||
<div className="px-4 lg:px-24 py-10">
|
||||
<div className="px-4 lg:px-[115px] py-10">
|
||||
<Reveal>
|
||||
<h2 className="text-center text-xl lg:text-3xl font-bold text-[#bb3523] mb-4">
|
||||
{pathname?.split("/")[1] == "in" ? (
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
|
|||
return (
|
||||
<>
|
||||
<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="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">
|
||||
|
|
|
|||
|
|
@ -891,7 +891,27 @@ const DetailAudio = () => {
|
|||
{/* Comment */}
|
||||
<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">
|
||||
<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
|
||||
placeholder="Type your comments here."
|
||||
className="flex w-full pb-12"
|
||||
|
|
|
|||
|
|
@ -621,7 +621,27 @@ const DetailDocument = () => {
|
|||
|
||||
{/* Tombol Bagikan */}
|
||||
<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
|
||||
className="ml-8 cursor-pointer"
|
||||
onClick={() =>
|
||||
|
|
|
|||
|
|
@ -513,7 +513,7 @@ const DetailImage = (data: any) => {
|
|||
|
||||
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">
|
||||
{/* Bagian Kiri */}
|
||||
<div className="">
|
||||
|
|
@ -523,7 +523,7 @@ const DetailImage = (data: any) => {
|
|||
<Skeleton className="rounded-lg h-[300px] w-screen lg:h-[600px] lg:w-[900px]" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="relative self-end ml-auto">
|
||||
<div className="relative">
|
||||
<Image
|
||||
placeholder={`data:image/svg+xml;base64,${toBase64(
|
||||
shimmer(700, 475)
|
||||
|
|
@ -532,7 +532,7 @@ const DetailImage = (data: any) => {
|
|||
height={1440}
|
||||
src={detailDataImage?.files[selectedImage]?.url}
|
||||
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>
|
||||
|
|
@ -724,7 +724,43 @@ const DetailImage = (data: any) => {
|
|||
|
||||
{/* Tombol Bagikan */}
|
||||
<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
|
||||
className="ml-8 cursor-pointer"
|
||||
onClick={() =>
|
||||
|
|
@ -821,8 +857,8 @@ const DetailImage = (data: any) => {
|
|||
|
||||
<div className="w-full mb-8">
|
||||
{/* Comment */}
|
||||
<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="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-[300px]">
|
||||
<p className="flex items-start text-lg">{t("comment")}</p>
|
||||
<Textarea
|
||||
placeholder={t("leaveComment")}
|
||||
|
|
@ -836,9 +872,9 @@ const DetailImage = (data: any) => {
|
|||
{t("send")}
|
||||
</button>
|
||||
</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 w-auto"></div>
|
||||
</div>
|
||||
<div>
|
||||
{listSuggestion?.map((data: any) => (
|
||||
<div className="flex flex-col">
|
||||
|
|
@ -1136,7 +1172,7 @@ const DetailImage = (data: any) => {
|
|||
</div>
|
||||
|
||||
{/* Konten Serupa */}
|
||||
<div className="px-4 lg:px-[100px]">
|
||||
<div className="px-4 mx-auto lg:px-[340px]">
|
||||
<NewContent group="mabes" type={"similar"} />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -639,7 +639,43 @@ const DetailVideo = () => {
|
|||
|
||||
{/* Tombol Bagikan */}
|
||||
<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
|
||||
className="ml-8 cursor-pointer"
|
||||
onClick={() =>
|
||||
|
|
@ -1049,7 +1085,7 @@ const DetailVideo = () => {
|
|||
</div>
|
||||
|
||||
{/* Konten Serupa */}
|
||||
<div className="">
|
||||
<div className="px-4 md:px-[100px]">
|
||||
<NewContent group="mabes" type={"similar"} />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue