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

fix: responsive page

This commit is contained in:
sabdayagra 2025-01-31 19:51:04 +07:00
parent c858a460c0
commit 2f8225ded6
23 changed files with 544 additions and 460 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

310
app/[locale]/(public)/audio/detail/[slug]/page.tsx
View File

@ -48,8 +48,6 @@ const DetailAudio = () => {
const [downloadProgress, setDownloadProgress] = useState(0);
const [isFromSPIT, setIsFromSPIT] = useState(false);
const [main, setMain] = useState<any>();
const [resolutionSelected, setResolutionSelected] = useState("720");
const [imageSizeSelected, setImageSizeSelected] = useState("l");
const userId = getCookiesDecrypt("uie");
const [emailShareList, setEmailShareList] = useState<any>();
const [emailShareInput, setEmailShareInput] = useState<any>();
@ -67,7 +65,7 @@ const DetailAudio = () => {
const [message, setMessage] = useState("");
const [listSuggestion, setListSuggestion] = useState<any>();
const MySwal = withReactContent(Swal);
const [visibleInput, setVisibleInput] = useState<string | null>(null);
let typeString = "audio";
useEffect(() => {
@ -317,63 +315,111 @@ const DetailAudio = () => {
return false;
};
// useEffect(() => {
// function initState() {
// if (typeString == "audio" && main?.url != undefined) {
// const init = async () => {
// const { default: WaveSurfer } = await import("wavesurfer.js");
// setPlaying(false);
// const formatTime = function (time: any) {
// return [
// Math.floor((time % 3600) / 60),
// // minutes
// `00${Math.floor(time % 60)}`.slice(-2), // seconds
// ].join(":");
// };
// console.log("AUDIO", main?.url);
// const options = formWaveSurferOptions(waveformRef.current);
// wavesurfer.current = WaveSurfer.create(options);
// wavesurfer.current.load(main?.url);
// wavesurfer.current.on("ready", () => {
// // https://wavesurfer-js.org/docs/methods.html
// // wavesurfer.current.playPause();
// // setPlaying(true);
// setAudioLoaded(true);
// // make sure object stillavailable when file loaded
// if (wavesurfer.current) {
// wavesurfer.current.setVolume(volume);
// let volumeNow = volume;
// setVolume(volumeNow);
// }
// $(".waveform__duration").text(formatTime(wavesurfer.current.getDuration()));
// });
// // Show current time
// wavesurfer.current.on("audioprocess", () => {
// $(".waveform__counter").text(formatTime(wavesurfer.current.getCurrentTime()));
// });
// wavesurfer.current.on("finish", () => {
// setPlaying(false);
// });
// };
// init();
// // Removes events, elements and disconnects Web Audio nodes.
// // when component unmount
// return () => wavesurfer?.current?.destroy();
// }
// }
// initState();
// }, [main?.url]);
useEffect(() => {
function initState() {
if (typeString == "audio" && main?.url != undefined) {
const init = async () => {
const { default: WaveSurfer } = await import("wavesurfer.js");
if (typeString === "audio" && main?.url) {
const init = async () => {
const { default: WaveSurfer } = await import("wavesurfer.js");
setPlaying(false);
if (wavesurfer.current) {
wavesurfer.current.destroy(); // 🔥 Hapus instance lama sebelum membuat yang baru
}
const formatTime = function (time: any) {
return [
Math.floor((time % 3600) / 60),
// minutes
`00${Math.floor(time % 60)}`.slice(-2), // seconds
].join(":");
};
console.log("AUDIO", main?.url);
setPlaying(false);
const options = formWaveSurferOptions(waveformRef.current);
wavesurfer.current = WaveSurfer.create(options);
wavesurfer.current.load(main?.url);
wavesurfer.current.on("ready", () => {
// https://wavesurfer-js.org/docs/methods.html
// wavesurfer.current.playPause();
// setPlaying(true);
setAudioLoaded(true);
// make sure object stillavailable when file loaded
if (wavesurfer.current) {
wavesurfer.current.setVolume(volume);
let volumeNow = volume;
setVolume(volumeNow);
}
$(".waveform__duration").text(formatTime(wavesurfer.current.getDuration()));
});
// Show current time
wavesurfer.current.on("audioprocess", () => {
$(".waveform__counter").text(formatTime(wavesurfer.current.getCurrentTime()));
});
wavesurfer.current.on("finish", () => {
setPlaying(false);
});
const formatTime = function (time: any) {
return [
Math.floor((time % 3600) / 60),
// minutes
`00${Math.floor(time % 60)}`.slice(-2), // seconds
].join(":");
};
init();
// Removes events, elements and disconnects Web Audio nodes.
// when component unmount
const options = formWaveSurferOptions(waveformRef.current);
wavesurfer.current = WaveSurfer.create(options);
wavesurfer.current.load(main?.url);
return () => wavesurfer?.current?.destroy();
}
wavesurfer.current.on("ready", () => {
setAudioLoaded(true);
wavesurfer.current.setVolume(volume);
$(".waveform__duration").text(formatTime(wavesurfer.current.getDuration()));
});
wavesurfer.current.on("audioprocess", () => {
$(".waveform__counter").text(formatTime(wavesurfer.current.getCurrentTime()));
});
wavesurfer.current.on("finish", () => {
setPlaying(false);
});
};
init();
return () => {
if (wavesurfer.current) {
wavesurfer.current.destroy(); // 🔥 Hapus saat unmount
}
};
}
initState();
}, [main?.url]);
const onVolumeChange = (e: any) => {
@ -438,8 +484,10 @@ const DetailAudio = () => {
};
const showInput = (e: any) => {
console.log(document.querySelector(`#${e}`)?.classList);
document.querySelector(`#${e}`)?.classList.toggle("hidden");
document.querySelector(`#${e}`)?.classList.toggle("none");
setVisibleInput(visibleInput === e ? null : e);
};
function addDefaultProfile(ev: any) {
ev.target.src = "/assets/avatar-profile.png";
}
@ -513,7 +561,6 @@ const DetailAudio = () => {
<img src={`/assets/${playing ? "stop-icon.png" : "play-icon.png"}`} />
</button>
<div
className="flex items-center "
style={
audioLoaded
? {
@ -522,9 +569,9 @@ const DetailAudio = () => {
: {}
}
>
<BarWave color="#ffc831" width="60px" height="25px" duration="2s " />
<BarWave color="#ffc831" width="60px" height="25px" duration="2s" className="flex ml-5 mt-[50px] lg:ml-[200px]" />
</div>
<div id="waveform" ref={waveformRef} className="w-[700px] ml-12" />
<div id="waveform" ref={waveformRef} className="w-[350px] lg:w-[700px] ml-6 lg:ml-12"></div>
</div>
<div
className="flex flex-row mt-2"
@ -538,32 +585,29 @@ const DetailAudio = () => {
>
<Icon icon="fa:volume-up" />
{/* <Slider onChange={onVolumeChange} defaultValue={volume} /> */}
<input
type="range"
id="volume"
name="volume"
min="0.01"
max="1"
step=".025"
onChange={onVolumeChange}
defaultValue={volume}
/>
<input type="range" id="volume" name="volume" min="0.01" max="1" step=".025" onChange={onVolumeChange} defaultValue={volume} />
</div>
{/* Footer Informasi */}
<div className="p-4 text-sm text-gray-500 flex justify-between items-center border-t mt-4">
<p className="flex flex-row items-center">
oleh&nbsp;<span className="font-semibold text-black">{detailDataAudio?.uploadedBy?.userLevel?.name}</span>&nbsp;|&nbsp;Diupdate pada {detailDataAudio?.updatedAt} WIB&nbsp;|&nbsp;
<Icon icon="formkit:eye" width="15" height="15" />
&nbsp;
{detailDataAudio?.clickCount}
</p>
<p>Kreator: {detailDataAudio?.creatorName}</p>
<div className="text-gray-500 flex flex-col lg:flex-row justify-between items-center border-t mt-4">
<div className="flex flex-col lg:flex-row items-center mt-3 lg:justify-between">
<p className="text-xs lg:text-sm">
oleh&nbsp;<span className="font-semibold text-black">{detailDataAudio?.uploadedBy?.userLevel?.name}</span>
</p>
<p className="text-xs lg:text-sm">&nbsp;|&nbsp;Diupdate pada {detailDataAudio?.updatedAt} WIB &nbsp;|&nbsp;</p>
<p className="text-xs lg:text-sm flex justify-center items-center">
<Icon icon="formkit:eye" width="15" height="15" />
&nbsp; {detailDataAudio?.clickCount} &nbsp;
</p>
</div>
<div className="mt-3">
<p className="flex text-end text-xs lg:text-sm font-semibold">Kreator: {detailDataAudio?.creatorName}</p>
</div>
</div>
{/* Keterangan */}
<div className="w-full">
<h1 className="flex flex-row font-bold text-2xl mx-5 my-8">{detailDataAudio?.title}</h1>
<div className="font-light text-justify" dangerouslySetInnerHTML={{ __html: detailDataAudio?.htmlDescription }} />
<h1 className="flex flex-row font-bold text-lg lg:text-2xl my-8">{detailDataAudio?.title}</h1>
<div className="font-light text-justify mb-5 lg:mb-0" dangerouslySetInnerHTML={{ __html: detailDataAudio?.htmlDescription }} />
</div>
</div>
@ -671,10 +715,10 @@ const DetailAudio = () => {
<div className="w-full mb-8">
{/* Comment */}
<div className="flex flex-col my-16 p-10 bg-[#f7f7f7]">
<div className="flex flex-col my-16 p-4 lg:p-10 bg-[#f7f7f7]">
<div className="gap-5 flex flex-col px-4 lg:px-14">
<p className="flex items-start text-lg">Berikan Komentar</p>
<Textarea placeholder="Type your comments here." className="flex w-full py-8" onChange={getInputValue} />
<Textarea placeholder="Type your comments here." className="flex w-full pb-12" onChange={getInputValue} />
<button onClick={() => postData()} className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1">
Kirim
</button>
@ -682,17 +726,17 @@ const DetailAudio = () => {
<div className="border-b-2 border-slate-300 mt-4 w-auto"></div>
<div className="overflow-y-auto">
<div>
{listSuggestion?.map((data: any) => (
<div className="flex flex-col">
<div className="flex flex-row mt-2 px-4 lg:px-14">
<img src={data?.suggestionFrom?.profilePictureUrl} className="h-16 w-16 mr-2" onError={addDefaultProfile} alt="" />
<div className="border border-slate-300 w-full p-4 bg-white gap-1">
<p className="text-slate-500 text-base border-b-2 border-slate-200 mb-2">
<img src={data?.suggestionFrom?.profilePictureUrl} className="h-12 lg:h-16 w-12 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
<div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
{Number(data.suggestionFrom?.roleId) == 2 || Number(data.suggestionFrom?.roleId) == 3 || Number(data.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : data.suggestionFrom?.fullname}
{getPublicLocaleTimestamp(new Date(data.createdAt))}
</p>
<p className="text-slate-500 text-sm mb-4">{data?.message}</p>
<p className="text-slate-500 text-[13px] lg:text-sm mb-4">{data?.message}</p>
<div>
<a
style={
@ -705,11 +749,11 @@ const DetailAudio = () => {
onClick={() => showInput(`comment-id-${data.id}`)}
className="mr-2"
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Balas</small>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Balas</small>
</a>
{Number(data.suggestionFrom?.id) == Number(userId) || Number(userRoleId) == 2 ? (
<a onClick={() => deleteData(data.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Hapus</small>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Hapus</small>
</a>
) : (
""
@ -717,29 +761,32 @@ const DetailAudio = () => {
</div>
</div>
</div>
<div id={`comment-id-${data.id}`} className="px-4 lg:px-28 mt-2">
<Textarea id={`input-comment-${data.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder="Masukkan balasan anda" />
<div className="flex flex-row gap-3">
<a onClick={() => postDataChild(data.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 mt-2 cursor-pointer">Kirim</small>
</a>
<a onClick={() => showInput(`comment-id-${data.id}`)}>
<small className="flex items-start bg-[#bb3523] rounded-lg mt-2 w-fit text-white px-4 py-1 cursor-pointer">Batal</small>
</a>
{visibleInput === `comment-id-${data.id}` && (
<div id={`comment-id-${data.id}`} className="px-4 pl-[72px] lg:px-14 lg:pl-32 mt-2 ">
<Textarea id={`input-comment-${data.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder="Masukkan balasan anda" />
<div className="flex flex-row gap-3">
<a onClick={() => postDataChild(data.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 mt-2 cursor-pointer">Kirim</small>
</a>
<a onClick={() => showInput(`comment-id-${data.id}`)}>
<small className="flex items-start bg-[#bb3523] rounded-lg mt-2 w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Batal</small>
</a>
</div>
</div>
</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:px-32">
<img src={child1.suggestionFrom?.profilePictureUrl} onError={addDefaultProfile} alt="" className="h-16 w-16 mr-2" />
<div className="border border-slate-300 w-full p-4 bg-white gap-1">
<p className="text-slate-500 text-base border-b-2 border-slate-200 mb-2">
<div className="flex flex-row mt-2 px-4 lg:pr-14 pl-16 lg:pl-32">
<img src={child1.suggestionFrom?.profilePictureUrl} onError={addDefaultProfile} alt="" className="h-10 lg:h-16 w-10 lg:w-16 mr-2" />
<div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
{" "}
<b>{Number(child1.suggestionFrom?.roleId) == 2 || Number(child1.suggestionFrom?.roleId) == 3 || Number(child1.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child1.suggestionFrom?.fullname}</b>{" "}
{getPublicLocaleTimestamp(new Date(child1.createdAt))}
</p>
<p className="text-slate-500 text-sm mb-4">{parse(String(child1?.message))}</p>
<p className="text-slate-500 text-[13px] lg:text-sm mb-4">{parse(String(child1?.message))}</p>
<div>
<a
style={
@ -751,7 +798,7 @@ const DetailAudio = () => {
}
onClick={() => showInput(`comment-id-${child1.id}`)}
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Balas</small>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Balas</small>
</a>
<a
style={
@ -763,29 +810,33 @@ const DetailAudio = () => {
}
onClick={() => deleteData(child1.id)}
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Hapus</small>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Hapus</small>
</a>
</div>
</div>
</div>
<div id={`comment-id-${child1.id}`} className="px-4 lg:px-40">
<Textarea name="" className="mt-2 " id={`input-comment-${child1.id}`} placeholder="Masukkan balasan anda" />
<div className="flex flex-row mt-2 gap-3">
<a onClick={() => postDataChild(child1.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Kirim</small>
</a>
<a onClick={() => showInput(`comment-id-${child1.id}`)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Batal</small>
</a>
{visibleInput === `comment-id-${child1.id}` && (
<div id={`comment-id-${child1.id}`} className="px-4 lg:px-14 pl-28 lg:pl-[200px]">
<Textarea name="" className="mt-2 " id={`input-comment-${child1.id}`} placeholder="Masukkan balasan anda" />
<div className="flex flex-row mt-2 gap-3">
<a onClick={() => postDataChild(child1.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Kirim</small>
</a>
<a onClick={() => showInput(`comment-id-${child1.id}`)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Batal</small>
</a>
</div>
</div>
</div>
)}
{child1.children.length > 0
? child1.children?.map((child2: any) => (
<div className="">
<div className="flex flex-row mt-2 px-4 lg:px-48">
<img src={child2.suggestionFrom?.profilePictureUrl} className="h-16 w-16 mr-2" onError={addDefaultProfile} alt="" />
<div className="border border-slate-300 w-full p-4 bg-white gap-1">
<p className="text-slate-500 text-base border-b-2 border-slate-200 mb-2">
<div className="flex flex-row mt-2 px-4 lg:pr-14 pl-28 lg:pl-48">
<img src={child2.suggestionFrom?.profilePictureUrl} className="h-9 lg:h-16 w-9 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
<div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
{" "}
<b>{Number(child2.suggestionFrom?.roleId) == 2 || Number(child2.suggestionFrom?.roleId) == 3 || Number(child2.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child2.suggestionFrom?.fullname}</b>{" "}
{getPublicLocaleTimestamp(new Date(child2.createdAt))}
@ -802,7 +853,7 @@ const DetailAudio = () => {
}
onClick={() => showInput(`comment-id-${child2.id}`)}
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Balas</small>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Balas</small>
</a>
<a
style={
@ -814,23 +865,24 @@ const DetailAudio = () => {
}
onClick={() => deleteData(child2.id)}
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Hapus</small>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Hapus</small>
</a>
</div>
</div>
</div>
<div id={`comment-id-${child2.id}`} className="px-4 lg:px-52">
<Textarea name="" id={`input-comment-${child2.id}`} className="my-2" placeholder="Masukkan balasan anda" />
<div className="flex flex-row gap-3">
<a onClick={() => postDataChild(child2.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Kirim</small>
</a>
<a onClick={() => showInput(`comment-id-${child2.id}`)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Batal</small>
</a>
{visibleInput === `comment-id-${child2.id}` && (
<div id={`comment-id-${child2.id}`} className="px-4 lg:px-14 pl-40 lg:pl-[265px]">
<Textarea name="" id={`input-comment-${child2.id}`} className="my-2" placeholder="Masukkan balasan anda" />
<div className="flex flex-row gap-3">
<a onClick={() => postDataChild(child2.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Kirim</small>
</a>
<a onClick={() => showInput(`comment-id-${child2.id}`)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Batal</small>
</a>
</div>
</div>
</div>
)}
</div>
))
: ""}

6
app/[locale]/(public)/content-management/download/page.tsx
View File

@ -275,9 +275,9 @@ const Galery = (props: any) => {
return (
<>
<HeaderManagement />
<div className="flex flex-row">
<div className="flex flex-col lg:flex-row">
<SidebarManagement />
<div className="w-2/3 p-12">
<div className="w-full lg:w-2/3 p-8 lg:p-12">
<div>
<h1 className="text-2xl font-semibold mb-3">Galeri Saya</h1>
</div>
@ -318,7 +318,7 @@ const Galery = (props: any) => {
<div className="">
{selectedTab == "video" ? (
contentVideo?.length > 0 ? (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{contentVideo?.map((video: any) => (
<Card key={video?.id}>
<CardContent className="flex flex-col bg-black dark:bg-white w-full rounded-lg p-0">

6
app/[locale]/(public)/content-management/galery/page.tsx
View File

@ -281,9 +281,9 @@ const Galery = (props: any) => {
return (
<>
<HeaderManagement />
<div className="flex flex-row">
<div className="flex flex-col lg:flex-row">
<SidebarManagement />
<div className="w-2/3 p-12">
<div className="w-full lg:w-2/3 p-8 lg:p-12">
<div>
<h1 className="text-2xl font-semibold">Galeri {profile?.institute?.name}</h1>
</div>
@ -324,7 +324,7 @@ const Galery = (props: any) => {
<div className="px-2">
{selectedTab == "video" ? (
contentVideo?.length > 0 ? (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{contentVideo?.map((video: any) => (
<Card key={video?.id}>
<CardContent className="flex flex-col bg-black dark:bg-white w-full rounded-lg p-0">

21
app/[locale]/(public)/content-management/rewrite/create/[id]/page.tsx
View File

@ -289,21 +289,20 @@ const page = (props: any) => {
return (
<>
<HeaderManagement />
<div className="flex flex-row">
<div className="flex flex-col lg:flex-row">
<SidebarManagement />
<div className="w-2/3 p-12">
<div className="w-full lg:w-2/3 p-8 lg:p-12">
<div className="flex flex-col">
<div className="text-xl font-bold mb-5">Content Rewrite</div>
<div className="p-8 border border-black rounded-lg">
<form method="POST" onSubmit={handleSubmit(onSubmit)}>
{content && (
<div className="flex flex-col gap-2 ">
<div className="flex flex-row gap-2">
<div className="flex flex-col lg:flex-row gap-2">
<div className="gap-1 flex flex-col mb-3">
<p className="font-semibold">Bahasa</p>
<Select value={selectedLanguage} onValueChange={setSelectedLanguage}>
<SelectTrigger className="w-[180px]">
<SelectTrigger className="w-full lg:w-[180px]">
<SelectValue placeholder="Pilih Bahasa" />
</SelectTrigger>
<SelectContent>
@ -318,7 +317,7 @@ const page = (props: any) => {
<div className="gap-1 flex flex-col mb-3">
<p className="font-semibold">Context Type</p>
<Select value={selectedContextType} onValueChange={setSelectedContextType}>
<SelectTrigger className="w-[180px]">
<SelectTrigger className="w-full lg:w-[180px]">
<SelectValue placeholder="Select Context" />
</SelectTrigger>
<SelectContent>
@ -335,7 +334,7 @@ const page = (props: any) => {
<div className="gap-1 flex flex-col mb-3">
<p className="font-semibold">Writing Style</p>
<Select value={selectedWritingStyle} onValueChange={setSelectedWritingStyle}>
<SelectTrigger className="w-[180px]">
<SelectTrigger className="w-full lg:w-[180px]">
<SelectValue placeholder="Select Writing" />
</SelectTrigger>
<SelectContent>
@ -353,7 +352,7 @@ const page = (props: any) => {
<div className="gap-1 flex flex-col mb-3">
<p className="font-semibold">Article Size</p>
<Select value={selectedSize} onValueChange={setSelectedSize}>
<SelectTrigger className="w-[180px]">
<SelectTrigger className="w-full lg:w-[180px]">
<SelectValue placeholder="Select Size" />
</SelectTrigger>
<SelectContent>
@ -396,7 +395,7 @@ const page = (props: any) => {
/>
</div>
<div className="mb-4">
<a onClick={handleGenerateArtikel} className="text-blue-500 cursor-pointer hover:bg-blue-700 hover:text-white border border-blue-500 rounded-md p-2">
<a onClick={handleGenerateArtikel} className="text-blue-500 cursor-pointer hover:bg-blue-700 hover:text-white border border-blue-500 rounded-md p-2 text-sm lg:text-base">
Generate Artikel
</a>
{isGeneratedArticle && (
@ -441,11 +440,11 @@ const page = (props: any) => {
onClick={() => {
router.back();
}}
className="border border-blue-400 hover:bg-blue-400 hover:text-white text-blue-400"
className="border border-blue-400 hover:bg-blue-400 hover:text-white text-blue-400 text-sm lg:text-base"
>
Kembali
</Button>
<Button type="submit" className="border border-blue-500 bg-blue-500 text-white">
<Button type="submit" className="border border-blue-500 bg-blue-500 text-sm lg:text-base text-white">
Simpan
</Button>
</div>

16
app/[locale]/(public)/content-management/rewrite/detail/[id]/page.tsx
View File

@ -194,9 +194,9 @@ const page = () => {
return (
<>
<HeaderManagement />
<div className="flex flex-row">
<div className="flex flex-col lg:flex-row">
<SidebarManagement />
<div className="w-2/3 p-12">
<div className="w-full lg:w-2/3 p-8 lg:p-12">
<div className="flex flex-col">
<div className="text-xl font-bold mb-5">Detail Content Rewrite</div>
<div className="p-8 border border-black rounded-lg">
@ -218,8 +218,8 @@ const page = () => {
// onChange={(e) => setSelectedTitle(e.target.value)}
/>
</div>
<div className="flex justify-between gap-3 lg:flex-row">
<div className="w-1/2">
<div className="flex flex-col justify-between gap-3 lg:flex-row">
<div className="w-full lg:w-1/2">
<div className="mb-1">
<p className="font-semibold">Main Keyword</p>
</div>
@ -227,7 +227,7 @@ const page = () => {
<Input type="text" className="border mb-3 w-full rounded-md p-2 border-black" id="mainKeyword" name="mainKeyword" placeholder="Masukan Main Keyword disini!" defaultValue={content?.mainKeyword} />
</div>
</div>
<div className="w-1/2">
<div className="w-full lg:w-1/2">
<div className="mb-1">
<label htmlFor="title" className="font-semibold">
Additional Keyword{" "}
@ -247,8 +247,8 @@ const page = () => {
</div>
</div>
<div className="flex gap-3 justify-between lg:flex-row">
<div className="w-1/2">
<div className="flex gap-3 justify-between flex-col lg:flex-row">
<div className="w-full lg:w-1/2">
<div className="font-semibold mb-1">
<label htmlFor="metaTitle">Meta Title</label>
</div>
@ -264,7 +264,7 @@ const page = () => {
defaultValue={content?.metaTitle}
/>
</div>
<div className="w-1/2">
<div className="w-full lg:w-1/2">
<div className="font-semibold mb-1">
<label htmlFor="metaDescription">Meta Description</label>
</div>

6
app/[locale]/(public)/content-management/rewrite/page.tsx
View File

@ -197,9 +197,9 @@ const page = () => {
return (
<>
<HeaderManagement />
<div className="flex flex-row">
<div className="flex flex-col lg:flex-row">
<SidebarManagement />
<div className="w-2/3 p-12">
<div className="w-full lg:w-2/3 p-8 lg:p-12">
<div>
<h1 className="text-2xl font-semibold mb-4">Galeri Content Rewrite</h1>
</div>
@ -213,7 +213,7 @@ const page = () => {
<Link href={`/content-management/rewrite/detail/${image.id}`}>
{/* <img src={image?.thumbnailUrl} className="h-40 object-cover items-center justify-center cursor-pointer rounded-lg place-self-center" /> */}
<div className="img-container h-60 bg-[#e9e9e9] cursor-pointer rounded-lg">
<ImageBlurry src={image?.thumbnailUrl} alt={image?.title} style={{ objectFit: "contain", width: "100%", height: "100%" }} />
<ImageBlurry src={image?.thumbnailUrl} alt={image?.title} style={{ objectFit: "contain", width: "100%", height: "100%" }} />
</div>
</Link>
<div className="font-semibold p-4 text-white text-xs lg:text-sm dark:text-black truncate w-full">{image?.title}</div>

2
app/[locale]/(public)/content-management/users/page.tsx
View File

@ -114,7 +114,7 @@ const page = () => {
return (
<>
<HeaderManagement />
<div className="flex flex-row">
<div className="flex flex-col lg:flex-row">
<SidebarManagement />
<div className="w-2/3 p-12">
<div className="flex flex-col">

137
app/[locale]/(public)/document/detail/[slug]/page.tsx
View File

@ -49,6 +49,7 @@ const DetailDocument = () => {
const [message, setMessage] = useState("");
const [listSuggestion, setListSuggestion] = useState<any>();
const MySwal = withReactContent(Swal);
const [visibleInput, setVisibleInput] = useState<string | null>(null);
let typeString = "document";
@ -346,8 +347,10 @@ const DetailDocument = () => {
};
const showInput = (e: any) => {
console.log(document.querySelector(`#${e}`)?.classList);
document.querySelector(`#${e}`)?.classList.toggle("hidden");
document.querySelector(`#${e}`)?.classList.toggle("none");
setVisibleInput(visibleInput === e ? null : e);
};
function addDefaultProfile(ev: any) {
ev.target.src = "/assets/avatar-profile.png";
}
@ -420,19 +423,29 @@ const DetailDocument = () => {
<div className="absolute top-4 left-4"></div>
</div>
{/* Footer Informasi */}
<div className="text-sm text-gray-500 flex justify-between items-center border-t mt-4">
<p className="flex flex-row items-center mt-3">
<div className="text-gray-500 flex flex-col lg:flex-row justify-between items-center border-t mt-4">
{/* <p className="flex flex-row items-center mt-3">
oleh&nbsp;<span className="font-semibold text-black">{detailDataDocument?.uploadedBy?.userLevel?.name}</span>&nbsp;|&nbsp;Diupdate pada {detailDataDocument?.updatedAt} WIB&nbsp;|&nbsp;
<Icon icon="formkit:eye" width="15" height="15" />
&nbsp;
{detailDataDocument?.clickCount}
</p>
<p className="mt-3">Kreator: {detailDataDocument?.creatorName}</p>
<p className="mt-3">Kreator: {detailDataDocument?.creatorName}</p> */}
<div className="flex flex-col lg:flex-row items-center mt-3 lg:justify-between">
<p className="text-xs lg:text-sm">
oleh&nbsp;<span className="font-semibold text-black">{detailDataDocument?.uploadedBy?.userLevel?.name}</span>
</p>
<p className="text-xs lg:text-sm">&nbsp;|&nbsp;Diupdate pada {detailDataDocument?.updatedAt} WIB &nbsp;|&nbsp;</p>
<p className="text-xs lg:text-sm flex justify-center items-center">
<Icon icon="formkit:eye" width="15" height="15" />
&nbsp; {detailDataDocument?.clickCount} &nbsp;
</p>
</div>
</div>
{/* Keterangan */}
<div className="">
<h1 className="flex flex-row font-bold text-2xl my-8 text-justify">{detailDataDocument?.title}</h1>
<h1 className="flex flex-row font-bold text-lg lg:text-2xl my-8 text-justify">{detailDataDocument?.title}</h1>
<div dangerouslySetInnerHTML={{ __html: detailDataDocument?.htmlDescription }} />
</div>
</div>
@ -539,10 +552,10 @@ const DetailDocument = () => {
<div className="w-full mb-8">
{/* Comment */}
<div className="flex flex-col my-16 p-10 bg-[#f7f7f7]">
<div className="flex flex-col my-16 p-4 lg:p-10 bg-[#f7f7f7]">
<div className="gap-5 flex flex-col px-4 lg:px-14">
<p className="flex items-start text-lg">Berikan Komentar</p>
<Textarea placeholder="Type your comments here." className="flex w-full py-8" onChange={getInputValue} />
<Textarea placeholder="Type your comments here." className="flex w-full pb-12" onChange={getInputValue} />
<button onClick={() => postData()} className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1">
Kirim
</button>
@ -550,17 +563,17 @@ const DetailDocument = () => {
<div className="border-b-2 border-slate-300 mt-4 w-auto"></div>
<div className="overflow-y-auto">
<div>
{listSuggestion?.map((data: any) => (
<div className="flex flex-col">
<div className="flex flex-row mt-2 px-4 lg:px-14">
<img src={data?.suggestionFrom?.profilePictureUrl} className="h-16 w-16 mr-2" onError={addDefaultProfile} alt="" />
<div className="border border-slate-300 w-full p-4 bg-white gap-1">
<p className="text-slate-500 text-base border-b-2 border-slate-200 mb-2">
<img src={data?.suggestionFrom?.profilePictureUrl} className="h-12 lg:h-16 w-12 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
<div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
{Number(data.suggestionFrom?.roleId) == 2 || Number(data.suggestionFrom?.roleId) == 3 || Number(data.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : data.suggestionFrom?.fullname}
{getPublicLocaleTimestamp(new Date(data.createdAt))}
</p>
<p className="text-slate-500 text-sm mb-4">{data?.message}</p>
<p className="text-slate-500 text-[13px] lg:text-sm mb-4">{data?.message}</p>
<div>
<a
style={
@ -573,11 +586,11 @@ const DetailDocument = () => {
onClick={() => showInput(`comment-id-${data.id}`)}
className="mr-2"
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Balas</small>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Balas</small>
</a>
{Number(data.suggestionFrom?.id) == Number(userId) || Number(userRoleId) == 2 ? (
<a onClick={() => deleteData(data.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Hapus</small>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Hapus</small>
</a>
) : (
""
@ -585,29 +598,32 @@ const DetailDocument = () => {
</div>
</div>
</div>
<div id={`comment-id-${data.id}`} className="px-4 lg:px-28 mt-2">
<Textarea id={`input-comment-${data.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder="Masukkan balasan anda" />
<div className="flex flex-row gap-3">
<a onClick={() => postDataChild(data.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 mt-2 cursor-pointer">Kirim</small>
</a>
<a onClick={() => showInput(`comment-id-${data.id}`)}>
<small className="flex items-start bg-[#bb3523] rounded-lg mt-2 w-fit text-white px-4 py-1 cursor-pointer">Batal</small>
</a>
{visibleInput === `comment-id-${data.id}` && (
<div id={`comment-id-${data.id}`} className="px-4 pl-[72px] lg:px-14 lg:pl-32 mt-2 ">
<Textarea id={`input-comment-${data.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder="Masukkan balasan anda" />
<div className="flex flex-row gap-3">
<a onClick={() => postDataChild(data.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 mt-2 cursor-pointer">Kirim</small>
</a>
<a onClick={() => showInput(`comment-id-${data.id}`)}>
<small className="flex items-start bg-[#bb3523] rounded-lg mt-2 w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Batal</small>
</a>
</div>
</div>
</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:px-32">
<img src={child1.suggestionFrom?.profilePictureUrl} onError={addDefaultProfile} alt="" className="h-16 w-16 mr-2" />
<div className="border border-slate-300 w-full p-4 bg-white gap-1">
<p className="text-slate-500 text-base border-b-2 border-slate-200 mb-2">
<div className="flex flex-row mt-2 px-4 lg:pr-14 pl-16 lg:pl-32">
<img src={child1.suggestionFrom?.profilePictureUrl} onError={addDefaultProfile} alt="" className="h-10 lg:h-16 w-10 lg:w-16 mr-2" />
<div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
{" "}
<b>{Number(child1.suggestionFrom?.roleId) == 2 || Number(child1.suggestionFrom?.roleId) == 3 || Number(child1.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child1.suggestionFrom?.fullname}</b>{" "}
{getPublicLocaleTimestamp(new Date(child1.createdAt))}
</p>
<p className="text-slate-500 text-sm mb-4">{parse(String(child1?.message))}</p>
<p className="text-slate-500 text-[13px] lg:text-sm mb-4">{parse(String(child1?.message))}</p>
<div>
<a
style={
@ -619,7 +635,7 @@ const DetailDocument = () => {
}
onClick={() => showInput(`comment-id-${child1.id}`)}
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Balas</small>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Balas</small>
</a>
<a
style={
@ -631,29 +647,33 @@ const DetailDocument = () => {
}
onClick={() => deleteData(child1.id)}
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Hapus</small>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Hapus</small>
</a>
</div>
</div>
</div>
<div id={`comment-id-${child1.id}`} className="px-4 lg:px-40">
<Textarea name="" className="mt-2 " id={`input-comment-${child1.id}`} placeholder="Masukkan balasan anda" />
<div className="flex flex-row mt-2 gap-3">
<a onClick={() => postDataChild(child1.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Kirim</small>
</a>
<a onClick={() => showInput(`comment-id-${child1.id}`)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Batal</small>
</a>
{visibleInput === `comment-id-${child1.id}` && (
<div id={`comment-id-${child1.id}`} className="px-4 lg:px-14 pl-28 lg:pl-[200px]">
<Textarea name="" className="mt-2 " id={`input-comment-${child1.id}`} placeholder="Masukkan balasan anda" />
<div className="flex flex-row mt-2 gap-3">
<a onClick={() => postDataChild(child1.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Kirim</small>
</a>
<a onClick={() => showInput(`comment-id-${child1.id}`)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Batal</small>
</a>
</div>
</div>
</div>
)}
{child1.children.length > 0
? child1.children?.map((child2: any) => (
<div className="">
<div className="flex flex-row mt-2 px-4 lg:px-48">
<img src={child2.suggestionFrom?.profilePictureUrl} className="h-16 w-16 mr-2" onError={addDefaultProfile} alt="" />
<div className="border border-slate-300 w-full p-4 bg-white gap-1">
<p className="text-slate-500 text-base border-b-2 border-slate-200 mb-2">
<div className="flex flex-row mt-2 px-4 lg:pr-14 pl-28 lg:pl-48">
<img src={child2.suggestionFrom?.profilePictureUrl} className="h-9 lg:h-16 w-9 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
<div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
{" "}
<b>{Number(child2.suggestionFrom?.roleId) == 2 || Number(child2.suggestionFrom?.roleId) == 3 || Number(child2.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child2.suggestionFrom?.fullname}</b>{" "}
{getPublicLocaleTimestamp(new Date(child2.createdAt))}
@ -670,7 +690,7 @@ const DetailDocument = () => {
}
onClick={() => showInput(`comment-id-${child2.id}`)}
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Balas</small>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Balas</small>
</a>
<a
style={
@ -682,23 +702,24 @@ const DetailDocument = () => {
}
onClick={() => deleteData(child2.id)}
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Hapus</small>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Hapus</small>
</a>
</div>
</div>
</div>
<div id={`comment-id-${child2.id}`} className="px-4 lg:px-52">
<Textarea name="" id={`input-comment-${child2.id}`} className="my-2" placeholder="Masukkan balasan anda" />
<div className="flex flex-row gap-3">
<a onClick={() => postDataChild(child2.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Kirim</small>
</a>
<a onClick={() => showInput(`comment-id-${child2.id}`)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Batal</small>
</a>
{visibleInput === `comment-id-${child2.id}` && (
<div id={`comment-id-${child2.id}`} className="px-4 lg:px-14 pl-40 lg:pl-[265px]">
<Textarea name="" id={`input-comment-${child2.id}`} className="my-2" placeholder="Masukkan balasan anda" />
<div className="flex flex-row gap-3">
<a onClick={() => postDataChild(child2.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Kirim</small>
</a>
<a onClick={() => showInput(`comment-id-${child2.id}`)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Batal</small>
</a>
</div>
</div>
</div>
)}
</div>
))
: ""}

3
app/[locale]/(public)/feedback/page.tsx
View File

@ -62,7 +62,6 @@ const FeedbackForm: React.FC = () => {
const listData = [...userFeedbacks];
const dataIdx = userFeedbacks.findIndex((o) => o.feedbackId === id);
console.log("idx :", dataIdx);
console.log("Before :", listData);
@ -126,7 +125,7 @@ const FeedbackForm: React.FC = () => {
<Rating label="Silakan berikan rating Anda terkait dengan tampilan website MediaHUB Polri" onRate={(rating) => handleRatingChange("appearance", rating)} />
<Rating label="Silakan berikan rating Anda terkait dengan konten MediaHUB Polri" onRate={(rating) => handleRatingChange("content", rating)} />
<div className="flex justify-center">
<button onClick={handleSubmit} className="w-fit lg:w-32 bg-[#2F80ED] text-white py-2 px-4 gap-4 rounded-md hover:bg-blue-600 transition">
<button onClick={handleSubmit} className="w-fit lg:w-32 bg-[#2F80ED] text-white py-2 px-4 gap-4 rounded-md hover:bg-blue-600 transition text-sm lg:text-base">
Kirim
</button>
</div>

119
app/[locale]/(public)/image/detail/[slug]/page.tsx
View File

@ -50,7 +50,7 @@ const DetailInfo = () => {
const [message, setMessage] = useState("");
const [listSuggestion, setListSuggestion] = useState<any>();
const [isLoading, setIsLoading] = useState<any>(true);
const [visibleInput, setVisibleInput] = useState(null);
let typeString = "image";
useEffect(() => {
@ -312,7 +312,8 @@ const DetailInfo = () => {
const showInput = (e: any) => {
console.log(document.querySelector(`#${e}`)?.classList);
document.querySelector(`#${e}`)?.classList.toggle("hidden");
document.querySelector(`#${e}`)?.classList.toggle("none");
setVisibleInput(visibleInput === e ? null : e);
};
const getInputValue = (e: any) => {
@ -482,7 +483,7 @@ const DetailInfo = () => {
{/* Keterangan */}
<div className="w-full">
<h1 className="flex flex-row font-bold text-2xl my-8">{detailDataImage?.title}</h1>
<h1 className="flex flex-row font-bold text-lg lg:text-2xl my-8">{detailDataImage?.title}</h1>
<div className="font-light text-justify mb-5 lg:mb-0" dangerouslySetInnerHTML={{ __html: detailDataImage?.htmlDescription }} />
</div>
</div>
@ -590,7 +591,7 @@ const DetailInfo = () => {
<div className="w-full mb-8">
{/* Comment */}
<div className="flex flex-col my-16 p-10 bg-[#f7f7f7]">
<div className="flex flex-col my-16 p-4 lg:p-10 bg-[#f7f7f7]">
<div className="gap-5 flex flex-col px-4 lg:px-14">
<p className="flex items-start text-lg">Berikan Komentar</p>
<Textarea placeholder="Type your comments here." className="flex w-full pb-12" onChange={getInputValue} />
@ -601,17 +602,17 @@ const DetailInfo = () => {
<div className="border-b-2 border-slate-300 mt-4 w-auto"></div>
<div className="overflow-y-auto">
<div>
{listSuggestion?.map((data: any) => (
<div className="flex flex-col">
<div className="flex flex-row mt-2 px-4 lg:px-14">
<img src={data?.suggestionFrom?.profilePictureUrl} className="h-16 w-16 mr-2" onError={addDefaultProfile} alt="" />
<div className="border border-slate-300 w-full p-4 bg-white gap-1">
<p className="text-slate-500 text-base border-b-2 border-slate-200 mb-2">
<img src={data?.suggestionFrom?.profilePictureUrl} className="h-12 lg:h-16 w-12 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
<div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
{Number(data.suggestionFrom?.roleId) == 2 || Number(data.suggestionFrom?.roleId) == 3 || Number(data.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : data.suggestionFrom?.fullname}
{getPublicLocaleTimestamp(new Date(data.createdAt))}
</p>
<p className="text-slate-500 text-sm mb-4">{data?.message}</p>
<p className="text-slate-500 text-[13px] lg:text-sm mb-4">{data?.message}</p>
<div>
<a
style={
@ -624,11 +625,11 @@ const DetailInfo = () => {
onClick={() => showInput(`comment-id-${data.id}`)}
className="mr-2"
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Balas</small>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Balas</small>
</a>
{Number(data.suggestionFrom?.id) == Number(userId) || Number(userRoleId) == 2 ? (
<a onClick={() => deleteData(data.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Hapus</small>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Hapus</small>
</a>
) : (
""
@ -636,29 +637,32 @@ const DetailInfo = () => {
</div>
</div>
</div>
<div id={`comment-id-${data.id}`} className="px-4 lg:px-28 mt-2">
<Textarea id={`input-comment-${data.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder="Masukkan balasan anda" />
<div className="flex flex-row gap-3">
<a onClick={() => postDataChild(data.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 mt-2 cursor-pointer">Kirim</small>
</a>
<a onClick={() => showInput(`comment-id-${data.id}`)}>
<small className="flex items-start bg-[#bb3523] rounded-lg mt-2 w-fit text-white px-4 py-1 cursor-pointer">Batal</small>
</a>
{visibleInput === `comment-id-${data.id}` && (
<div id={`comment-id-${data.id}`} className="px-4 pl-[72px] lg:px-14 lg:pl-32 mt-2 ">
<Textarea id={`input-comment-${data.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder="Masukkan balasan anda" />
<div className="flex flex-row gap-3">
<a onClick={() => postDataChild(data.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 mt-2 cursor-pointer">Kirim</small>
</a>
<a onClick={() => showInput(`comment-id-${data.id}`)}>
<small className="flex items-start bg-[#bb3523] rounded-lg mt-2 w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Batal</small>
</a>
</div>
</div>
</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:px-32">
<img src={child1.suggestionFrom?.profilePictureUrl} onError={addDefaultProfile} alt="" className="h-16 w-16 mr-2" />
<div className="border border-slate-300 w-full p-4 bg-white gap-1">
<p className="text-slate-500 text-base border-b-2 border-slate-200 mb-2">
<div className="flex flex-row mt-2 px-4 lg:pr-14 pl-16 lg:pl-32">
<img src={child1.suggestionFrom?.profilePictureUrl} onError={addDefaultProfile} alt="" className="h-10 lg:h-16 w-10 lg:w-16 mr-2" />
<div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
{" "}
<b>{Number(child1.suggestionFrom?.roleId) == 2 || Number(child1.suggestionFrom?.roleId) == 3 || Number(child1.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child1.suggestionFrom?.fullname}</b>{" "}
{getPublicLocaleTimestamp(new Date(child1.createdAt))}
</p>
<p className="text-slate-500 text-sm mb-4">{parse(String(child1?.message))}</p>
<p className="text-slate-500 text-[13px] lg:text-sm mb-4">{parse(String(child1?.message))}</p>
<div>
<a
style={
@ -670,7 +674,7 @@ const DetailInfo = () => {
}
onClick={() => showInput(`comment-id-${child1.id}`)}
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Balas</small>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Balas</small>
</a>
<a
style={
@ -682,29 +686,33 @@ const DetailInfo = () => {
}
onClick={() => deleteData(child1.id)}
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Hapus</small>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Hapus</small>
</a>
</div>
</div>
</div>
<div id={`comment-id-${child1.id}`} className="px-4 lg:px-40">
<Textarea name="" className="mt-2 " id={`input-comment-${child1.id}`} placeholder="Masukkan balasan anda" />
<div className="flex flex-row mt-2 gap-3">
<a onClick={() => postDataChild(child1.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Kirim</small>
</a>
<a onClick={() => showInput(`comment-id-${child1.id}`)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Batal</small>
</a>
{visibleInput === `comment-id-${child1.id}` && (
<div id={`comment-id-${child1.id}`} className="px-4 lg:px-14 pl-28 lg:pl-[200px]">
<Textarea name="" className="mt-2 " id={`input-comment-${child1.id}`} placeholder="Masukkan balasan anda" />
<div className="flex flex-row mt-2 gap-3">
<a onClick={() => postDataChild(child1.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Kirim</small>
</a>
<a onClick={() => showInput(`comment-id-${child1.id}`)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Batal</small>
</a>
</div>
</div>
</div>
)}
{child1.children.length > 0
? child1.children?.map((child2: any) => (
<div className="">
<div className="flex flex-row mt-2 px-4 lg:px-48">
<img src={child2.suggestionFrom?.profilePictureUrl} className="h-16 w-16 mr-2" onError={addDefaultProfile} alt="" />
<div className="border border-slate-300 w-full p-4 bg-white gap-1">
<p className="text-slate-500 text-base border-b-2 border-slate-200 mb-2">
<div className="flex flex-row mt-2 px-4 lg:pr-14 pl-28 lg:pl-48">
<img src={child2.suggestionFrom?.profilePictureUrl} className="h-9 lg:h-16 w-9 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
<div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
{" "}
<b>{Number(child2.suggestionFrom?.roleId) == 2 || Number(child2.suggestionFrom?.roleId) == 3 || Number(child2.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child2.suggestionFrom?.fullname}</b>{" "}
{getPublicLocaleTimestamp(new Date(child2.createdAt))}
@ -721,7 +729,7 @@ const DetailInfo = () => {
}
onClick={() => showInput(`comment-id-${child2.id}`)}
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Balas</small>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Balas</small>
</a>
<a
style={
@ -733,23 +741,24 @@ const DetailInfo = () => {
}
onClick={() => deleteData(child2.id)}
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Hapus</small>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Hapus</small>
</a>
</div>
</div>
</div>
<div id={`comment-id-${child2.id}`} className="px-4 lg:px-52">
<Textarea name="" id={`input-comment-${child2.id}`} className="my-2" placeholder="Masukkan balasan anda" />
<div className="flex flex-row gap-3">
<a onClick={() => postDataChild(child2.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Kirim</small>
</a>
<a onClick={() => showInput(`comment-id-${child2.id}`)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Batal</small>
</a>
{visibleInput === `comment-id-${child2.id}` && (
<div id={`comment-id-${child2.id}`} className="px-4 lg:px-14 pl-40 lg:pl-[265px]">
<Textarea name="" id={`input-comment-${child2.id}`} className="my-2" placeholder="Masukkan balasan anda" />
<div className="flex flex-row gap-3">
<a onClick={() => postDataChild(child2.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Kirim</small>
</a>
<a onClick={() => showInput(`comment-id-${child2.id}`)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Batal</small>
</a>
</div>
</div>
</div>
)}
</div>
))
: ""}

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

@ -497,19 +497,14 @@ const FilterPage = () => {
{isLoading ? (
<div className="flex flex-col gap-4">
<div className="flex flex-col lg:flex-row space-y-3 w-full justify-center items-center gap-3">
<Skeleton className="h-[200px] w-[300px] rounded-xl" />
<Skeleton className="h-[200px] w-[300px] rounded-xl" />
<Skeleton className="h-[200px] w-[300px] rounded-xl" />
<Skeleton className="h-[200px] w-[350px] rounded-xl" />
<Skeleton className="h-[200px] w-[350px] rounded-xl" />
<Skeleton className="h-[200px] w-[350px] rounded-xl" />
</div>
<div className="flex flex-col lg:flex-row space-y-3 w-full justify-center items-center gap-3">
<Skeleton className="h-[200px] w-[300px] rounded-xl" />
<Skeleton className="h-[200px] w-[300px] rounded-xl" />
<Skeleton className="h-[200px] w-[300px] rounded-xl" />
</div>
<div className="flex flex-col lg:flex-row space-y-3 w-full justify-center items-center gap-3">
<Skeleton className="h-[200px] w-[300px] rounded-xl" />
<Skeleton className="h-[200px] w-[300px] rounded-xl" />
<Skeleton className="h-[200px] w-[300px] rounded-xl" />
<Skeleton className="h-[200px] w-[350px] rounded-xl" />
<Skeleton className="h-[200px] w-[350px] rounded-xl" />
<Skeleton className="h-[200px] w-[350px] rounded-xl" />
</div>
</div>
) : (

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

@ -154,33 +154,35 @@ const IndeksDetail = () => {
<div className="p-4 lg:px-60 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>
<h1 className="text-base lg:text-lg mb-2">Indeks / 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" />
<img src={indeksData?.thumbnailLink} alt="Main" className="h-fit lg:h-[550px] w-full rounded-lg" />
</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&nbsp;<span className="font-semibold text-black">{indeksData?.uploaderName}</span>&nbsp; | &nbsp;Diupdate pada {indeksData?.createdAt} WIB &nbsp;
<div className="text-gray-500 flex border-t mt-4">
<div className="flex mt-2">
<p className="text-sm lg:text-base mb-2">
oleh&nbsp;<span className="font-semibold text-black">{indeksData?.uploaderName}</span>&nbsp; | &nbsp;Diupdate pada {indeksData?.createdAt} WIB &nbsp;
</p>
</div>
</div>
{/* Keterangan */}
<div className="w-auto">
<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>
{/* Comment */}
<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]">
<div className="gap-5 flex flex-col px-4 lg:px-16">
<p className="flex items-start text-lg">Berikan Komentar</p>
<p className="flex items-start text-bases lg:text-lg">Berikan Komentar</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 w-fit px-4 py-1" onClick={() => postData()}>
<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()}>
Kirim
</button>
</div>
@ -191,15 +193,15 @@ const IndeksDetail = () => {
{listComments?.map((data: any) => (
<div className="flex flex-col">
<div className="flex flex-row mt-2 px-4 lg:px-14">
<img className="h-10 w-10" src="/assets/img/user-avatar-yellow.svg" alt="#" />
<img 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-base border-b-2 border-slate-200 mb-2">
<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 mb-4">{data.message}</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-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}`)}>
<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}`)}>
Balas
</a>
<a
@ -211,7 +213,7 @@ const IndeksDetail = () => {
display: "none",
}
}
className="text-sm bg-red-500 text-white py-1 px-2 hover:bg-red-300 hover:text-black rounded-md"
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)}
>
Hapus
@ -219,19 +221,19 @@ const IndeksDetail = () => {
</div>
</div>
</div>
<div className="flex flex-row px-4 lg:px-28 mt-2" id={`comment-id-${data.id}`}>
<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="Masukkan balasan anda" />
<a href="javascript:void(0)" className="flex py-1 px-2 rounded-md items-center ml-2 bg-[#f7b357] text-white" onClick={() => postDataChild(data.id)}>
<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)}>
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:px-32">
<img className="h-10 w-10" src="/assets/img/user-avatar-yellow.svg" alt="#" />
<div className="flex flex-row mt-2 px-4 lg:pr-14 pl-12 lg:pl-32">
<img 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-base border-b-2 border-slate-200 mb-2">
<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
@ -239,12 +241,12 @@ const IndeksDetail = () => {
</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-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}`)}>
<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}`)}>
Balas
</a>
<a
href="javascript:void(0)"
className="text-sm bg-red-500 text-white py-1 px-2 hover:bg-red-300 hover:text-black rounded-md"
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)
? {}
@ -259,19 +261,19 @@ const IndeksDetail = () => {
</div>
</div>
</div>
<div className="flex flex-row justify-center px-4 lg:px-44 mt-2" id={`comment-id-${child1.id}`}>
<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="Masukkan balasan anda" />
<a href="javascript:void(0)" className="flex py-1 px-2 rounded-md items-center ml-2 bg-[#f7b357] text-white" onClick={() => postDataChild(child1.id)}>
<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)}>
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:px-48">
<img className="h-10 w-10" 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-base border-b-2 border-slate-200 mb-2">
<div className="flex flex-row mt-2 px-4 lg:pr-14 pl-20 lg:pl-48">
<img 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
@ -279,12 +281,12 @@ const IndeksDetail = () => {
</p>
<p className="text-slate-500 text-sm mb-4">{child2.message}</p>
<div>
<a href="javascript:void(0)" className="mr-2 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)}>
<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)}>
Balas
</a>
<a
href="javascript:void(0)"
className="text-sm bg-red-500 text-white py-1 px-2 hover:bg-red-300 hover:text-black rounded-md"
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)
? {}
@ -299,9 +301,9 @@ const IndeksDetail = () => {
</div>
</div>
</div>
<div className="flex flex-row px-4 lg:px-56 mt-2" id={`comment-id-${child2.id}`}>
<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="Masukkan balasan anda" />
<a href="javascript:void(0)" className="flex py-1 px-2 rounded-md items-center ml-2 bg-[#f7b357] text-white" onClick={() => postDataChild(child1.id)}>
<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)}>
Send
</a>
</div>

16
app/[locale]/(public)/indeks/page.tsx
View File

@ -81,8 +81,8 @@ const Indeks: React.FC = () => {
{isLoading ? (
<>
<div className="flex flex-col space-y-3 w-full justify-center items-center gap-3">
<Skeleton className="h-[200px] w-[400px] rounded-xl" />
<Skeleton className="h-[200px] w-[400px] rounded-xl" />
<Skeleton className="h-[200px] w-full lg:w-[400px] rounded-xl" />
<Skeleton className="h-[200px] w-full lg:w-[400px] rounded-xl" />
</div>
</>
) : (
@ -120,22 +120,22 @@ const Indeks: React.FC = () => {
<div className="px-4 lg:px-7 py-4">
{isLoading ? (
<div className="flex flex-col space-y-3 w-full gap-10">
<div className="flex flex-row gap-5">
<Skeleton className="h-[300px] w-[500px] rounded-lg" />
<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-row gap-5">
<Skeleton className="h-[300px] w-[500px] rounded-lg" />
<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-row gap-5">
<Skeleton className="h-[300px] w-[500px] rounded-lg" />
<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]" />

83
app/[locale]/(public)/video/detail/[slug]/page.tsx
View File

@ -47,6 +47,7 @@ const DetailVideo = () => {
const userRoleId = getCookiesDecrypt("urie");
const [message, setMessage] = useState("");
const [listSuggestion, setListSuggestion] = useState<any>();
const [visibleInput, setVisibleInput] = useState(null);
const MySwal = withReactContent(Swal);
let typeString = "video";
@ -346,7 +347,8 @@ const DetailVideo = () => {
};
const showInput = (e: any) => {
console.log(document.querySelector(`#${e}`)?.classList);
document.querySelector(`#${e}`)?.classList.toggle("hidden");
document.querySelector(`#${e}`)?.classList.toggle("none");
setVisibleInput(visibleInput === e ? null : e);
};
function addDefaultProfile(ev: any) {
ev.target.src = "/assets/avatar-profile.png";
@ -449,7 +451,7 @@ const DetailVideo = () => {
{/* Keterangan */}
<div className="w-full">
<h1 className="flex flex-row font-bold text-2xl my-8">{detailDataVideo?.title}</h1>
<h1 className="flex flex-row font-bold text-lg lg:text-2xl my-8">{detailDataVideo?.title}</h1>
<div
className="font-light text-justify mb-5 lg:mb-0"
dangerouslySetInnerHTML={{
@ -608,17 +610,20 @@ const DetailVideo = () => {
</div>
</div>
</div>
<div id={`comment-id-${data.id}`} className="px-4 pl-14 lg:px-14 lg:pl-32 mt-2 ">
<Textarea id={`input-comment-${data.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder="Masukkan balasan anda" />
<div className="flex flex-row gap-3">
<a onClick={() => postDataChild(data.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 mt-2 cursor-pointer">Kirim</small>
</a>
<a onClick={() => showInput(`comment-id-${data.id}`)}>
<small className="flex items-start bg-[#bb3523] rounded-lg mt-2 w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Batal</small>
</a>
{visibleInput === `comment-id-${data.id}` && (
<div id={`comment-id-${data.id}`} className="px-4 pl-[72px] lg:px-14 lg:pl-32 mt-2 ">
<Textarea id={`input-comment-${data.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder="Masukkan balasan anda" />
<div className="flex flex-row gap-3">
<a onClick={() => postDataChild(data.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 mt-2 cursor-pointer">Kirim</small>
</a>
<a onClick={() => showInput(`comment-id-${data.id}`)}>
<small className="flex items-start bg-[#bb3523] rounded-lg mt-2 w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Batal</small>
</a>
</div>
</div>
</div>
)}
{data.children.length > 0
? data.children?.map((child1: any) => (
<div className="flex flex-col">
@ -659,24 +664,27 @@ const DetailVideo = () => {
</div>
</div>
</div>
<div id={`comment-id-${child1.id}`} className="px-4 lg:px-14 pl-28 lg:pl-32">
<Textarea name="" className="mt-2 " id={`input-comment-${child1.id}`} placeholder="Masukkan balasan anda" />
<div className="flex flex-row mt-2 gap-3">
<a onClick={() => postDataChild(child1.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Kirim</small>
</a>
<a onClick={() => showInput(`comment-id-${child1.id}`)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Batal</small>
</a>
{visibleInput === `comment-id-${child1.id}` && (
<div id={`comment-id-${child1.id}`} className="px-4 lg:px-14 pl-28 lg:pl-[200px]">
<Textarea name="" className="mt-2 " id={`input-comment-${child1.id}`} placeholder="Masukkan balasan anda" />
<div className="flex flex-row mt-2 gap-3">
<a onClick={() => postDataChild(child1.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Kirim</small>
</a>
<a onClick={() => showInput(`comment-id-${child1.id}`)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Batal</small>
</a>
</div>
</div>
</div>
)}
{child1.children.length > 0
? child1.children?.map((child2: any) => (
<div className="">
<div className="flex flex-row mt-2 px-4 lg:px-48">
<img src={child2.suggestionFrom?.profilePictureUrl} className="h-16 w-16 mr-2" onError={addDefaultProfile} alt="" />
<div className="border border-slate-300 w-full p-4 bg-white gap-1">
<p className="text-slate-500 text-base border-b-2 border-slate-200 mb-2">
<div className="flex flex-row mt-2 px-4 lg:pr-14 pl-28 lg:pl-48">
<img src={child2.suggestionFrom?.profilePictureUrl} className="h-9 lg:h-16 w-9 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
<div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
{" "}
<b>{Number(child2.suggestionFrom?.roleId) == 2 || Number(child2.suggestionFrom?.roleId) == 3 || Number(child2.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child2.suggestionFrom?.fullname}</b>{" "}
{getPublicLocaleTimestamp(new Date(child2.createdAt))}
@ -710,18 +718,19 @@ const DetailVideo = () => {
</div>
</div>
</div>
<div id={`comment-id-${child2.id}`} className="px-4 lg:px-52">
<Textarea name="" id={`input-comment-${child2.id}`} className="my-2" placeholder="Masukkan balasan anda" />
<div className="flex flex-row gap-3">
<a onClick={() => postDataChild(child2.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Kirim</small>
</a>
<a onClick={() => showInput(`comment-id-${child2.id}`)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Batal</small>
</a>
{visibleInput === `comment-id-${child2.id}` && (
<div id={`comment-id-${child2.id}`} className="px-4 lg:px-14 pl-40 lg:pl-[265px]">
<Textarea name="" id={`input-comment-${child2.id}`} className="my-2" placeholder="Masukkan balasan anda" />
<div className="flex flex-row gap-3">
<a onClick={() => postDataChild(child2.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Kirim</small>
</a>
<a onClick={() => showInput(`comment-id-${child2.id}`)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Batal</small>
</a>
</div>
</div>
</div>
)}
</div>
))
: ""}

17
app/[locale]/(public)/video/filter/page.tsx
View File

@ -522,19 +522,14 @@ const FilterPage = () => {
{isLoading ? (
<div className="flex flex-col gap-4">
<div className="flex flex-col lg:flex-row space-y-3 w-full justify-center items-center gap-3">
<Skeleton className="h-[300px] w-[400px] rounded-xl" />
<Skeleton className="h-[300px] w-[400px] rounded-xl" />
<Skeleton className="h-[300px] w-[400px] rounded-xl" />
<Skeleton className="h-[280px] w-[380px] rounded-xl" />
<Skeleton className="h-[280px] w-[380px] rounded-xl" />
<Skeleton className="h-[280px] w-[380px] rounded-xl" />
</div>
<div className="flex flex-col lg:flex-row space-y-3 w-full justify-center items-center gap-3">
<Skeleton className="h-[300px] w-[400px] rounded-xl" />
<Skeleton className="h-[300px] w-[400px] rounded-xl" />
<Skeleton className="h-[300px] w-[400px] rounded-xl" />
</div>
<div className="flex flex-col lg:flex-row space-y-3 w-full justify-center items-center gap-3">
<Skeleton className="h-[300px] w-[400px] rounded-xl" />
<Skeleton className="h-[300px] w-[400px] rounded-xl" />
<Skeleton className="h-[300px] w-[400px] rounded-xl" />
<Skeleton className="h-[280px] w-[380px] rounded-xl" />
<Skeleton className="h-[280px] w-[380px] rounded-xl" />
<Skeleton className="h-[280px] w-[380px] rounded-xl" />
</div>
</div>
) : (

4
app/[locale]/auth/page.tsx
View File

@ -33,11 +33,11 @@ const Login = ({ params: { locale } }: { params: { locale: string } }) => {
<div className="flex-1 relative">
<div className=" h-full flex flex-col dark:bg-default-100 bg-white">
<div className="max-w-[524px] md:px-[42px] md:py-[44px] p-7 mx-auto w-full text-2xl text-default-900 mb-3 h-full flex flex-col justify-center">
<div className="flex justify-center items-center text-center mb-6 lg:hidden ">
{/* <div className="flex justify-center items-center text-center mb-6 lg:hidden ">
<Link href="/">
<Logo />
</Link>
</div>
</div> */}
<div className="text-left 2xl:mb-10 mb-4 mt-10">
<h4 className="font-semibold text-3xl text-left">Silahkan masuk ke akun Anda terlebih dahulu</h4>
<div className="text-default-500 text-base">

74
app/[locale]/auth/registration/page.tsx
View File

@ -504,7 +504,7 @@ const page = () => {
return (
<div className="overflow-y-auto flex flex-wrap w-full h-dvh">
<div className="lg:block hidden flex-1 overflow-hidden bg-black text-[40px] leading-[48px] text-default-600 relative z-[1]">
<div className="lg:block hidden flex-1 overflow-hidden bg-[#f7f7f7] text-[40px] leading-[48px] text-default-600 relative z-[1]">
<div className="max-w-[520px] pt-16 ps-20 ">
<Link href="/" className="mb-6 inline-block">
<Image src="/assets/mediahub-logo.png" alt="" width={250} height={250} className="mb-10 w-full h-full" />
@ -516,7 +516,7 @@ const page = () => {
</div>
<form
className="flex-1 bg-[#f7f7f7]"
className="flex-1 w-full bg-white"
onSubmit={handleSubmit(onSubmit)}
style={
Number(category) < 5
@ -560,8 +560,8 @@ const page = () => {
: {}
}
>
<p className="text-4xl px-12 font-bold ">{stepThreeActive ? "Silahkan lengkapi data pengguna" : "Silahkan registrasi terlebih dahulu"}</p>
<p className="px-12 mt-2">
<p className="text-2xl lg:text-4xl px-0 lg:px-12 font-bold ">{stepThreeActive ? "Silahkan lengkapi data pengguna" : "Silahkan registrasi terlebih dahulu"}</p>
<p className="px-0 lg:px-12 text-sm lg:text-base mt-2">
Sudah memiliki akun?{" "}
<Link href="/auth" className="text-red-500">
<b>Masuk</b>
@ -569,7 +569,7 @@ const page = () => {
</p>
</div>
<div
className="px-20 mb-6"
className="px-8 lg:px-20 mb-6"
style={
!stepTwoActive || (stepOneActive && stepThreeActive)
? {
@ -578,14 +578,14 @@ const page = () => {
: {}
}
>
<p className="text-black text-2xl px-20 font-semibold">Masukkan Kode OTP</p>
<p className="text-red-500 text-sm px-20">Silahkan cek inbox atau kotak spam pada email Anda.</p>
<p className="text-black text-2xl px-0 lg:px-20 font-semibold">Masukkan Kode OTP</p>
<p className="text-red-500 text-sm px-0 lg:px-20">Silahkan cek inbox atau kotak spam pada email Anda.</p>
</div>
</div>
<div className={`flex flex-col gap-3 px-12 ${formProfile == true || stepTwoActive ? "hidden" : ""}`}>
<div className={`flex flex-col gap-3 px-8 lg:px-12 ${formProfile == true || stepTwoActive ? "hidden" : ""}`}>
<div
className=" flex flex-col px-8 "
className="flex flex-col"
style={
Number(category) == 6
? {}
@ -597,7 +597,7 @@ const page = () => {
<Label htmlFor="association" className="mb-2">
Jenis Keanggotaan <span className="text-red-500">*</span>
</Label>
<select className={`py-3 px-2 rounded-md border border-slate-300 bg-white ${errors.association ? "block" : ""}`} {...register("association")} id="association" onChange={(e) => setAssociation(e.target.value)}>
<select className={`py-2 px-1 rounded-md border border-slate-300 bg-white ${errors.association ? "block" : ""}`} {...register("association")} id="association" onChange={(e) => setAssociation(e.target.value)}>
<option disabled selected>
Pilih Asosiasi
</option>
@ -621,7 +621,7 @@ const page = () => {
</div>
{Number(category) == 7 ? (
<div className="px-[34px]">
<div className="px-0 lg:px-[34px]">
<label htmlFor="userIdentity" className="mb-3">
<b>Nomor Registrasi Polri (NRP)</b> <span className="text-red-500">*</span>
</label>
@ -633,7 +633,7 @@ const page = () => {
)}
{Number(category) == 6 ? (
<div
className="px-[34px]"
className="px-0 lg:px-[34px]"
style={
Number(category) == 6
? {}
@ -650,16 +650,16 @@ const page = () => {
) : (
""
)}
<div className="flex flex-col w-full px-8 gap-2">
<div className="flex flex-col w-full px-0 lg:px-8 gap-2">
<label htmlFor="email">
<b>Email</b> <span className="text-red-500">*</span>
</label>
<Input className="w-full" autoComplete="off" placeholder="Masukan Email Anda" type="email" onChange={(event) => checkEmail(event.target.value)} />
<Input className="w-full" autoComplete="off" placeholder="Masukkan Email Anda" type="email" onChange={(event) => checkEmail(event.target.value)} />
<p className="text-sm text-red-500 mt-1">{emailValidate}</p>
</div>
</div>
<div className={`flex flex-col mt-4 px-12 ${!stepTwoActive || stepThreeActive ? "hidden" : ""}`}>
<div className={`flex flex-col mt-4 px-8 lg:px-12 ${!stepTwoActive || stepThreeActive ? "hidden" : ""}`}>
<div className="flex justify-center mb-6">
<InputOTP maxLength={6} onChange={(e) => setOtpValue(e)}>
<InputOTPGroup>
@ -681,7 +681,7 @@ const page = () => {
<p className="text-red-500">
<b>{otpValidate}</b>
</p>
<div className="flex flex-row px-28 justify-between items-center my-4">
<div className="flex flex-row px-0 lg:px-28 justify-between items-center my-4">
<a className="bg-slate-300 text-center rounded-lg mr-1 w-[200px] py-2 text-base cursor-pointer" onClick={() => handleResendOTP()}>
Kirim Ulang ({convertMilisecondsToHour(timerCount)})
</a>
@ -691,10 +691,10 @@ const page = () => {
</div>
</div>
<div className={`flex flex-col px-12 ${formProfile == false ? "hidden" : ""}`}>
<div className={`flex flex-col px-8 lg:px-12 ${formProfile == false ? "hidden" : ""}`}>
<div>
{Number(category) == 6 || Number(category) == 7 ? (
<div className="px-[34px]">
<div className="px-0 lg:px-[34px]">
<Label className="mb-2">
{`${Number(category) == 6 ? "Nomor Sertifikasi Wartawan" : "NRP"}`}
<span className="text-red-500">*</span>
@ -713,14 +713,14 @@ const page = () => {
) : (
""
)}
<div className="mb-4 px-[34px]">
<div className="mb-4 px-0 lg:px-[34px]">
<Label className="mb-2">
Nama Lengkap <span className="text-red-500">*</span>
</Label>
<Input type="text" autoComplete="off" className={` ${errors.firstName ? "block" : ""}`} {...register("firstName")} placeholder="Masukan Nama Lengkap Anda" />
<div className="text-red-500">{errors.firstName?.message}</div>
</div>
<div className="mb-4 px-[34px]">
<div className="mb-4 px-0 lg:px-[34px]">
<Label className="mb-2">
Username <span className="text-red-500">*</span>
</Label>
@ -742,7 +742,7 @@ const page = () => {
/>
<div className="text-red-500">{errors.username?.message}</div>
</div>
<div className="mb-4 px-[34px]">
<div className="mb-4 px-0 lg:px-[34px]">
<Label className="mb-2">
Email <span className="text-red-500">*</span>
</Label>
@ -750,14 +750,14 @@ const page = () => {
<div className="text-red-500">{errors.email?.message}</div>
</div>
</div>
<div className="flex flex-col px-[34px]">
<div className="flex flex-col px-0 lg:px-[34px]">
<Label className="mb-2">
No. HP<span className="text-red-500">*</span>
</Label>
<Input type="number" autoComplete="off" className={`mb-3 ${errors.phoneNumber ? "block" : ""}`} {...register("phoneNumber")} placeholder="Masukan Nomor Telepon Anda" />
<div className="text-red-500">{errors.phoneNumber?.message}</div>
</div>
<div className="mb-4 px-[34px]">
<div className="mb-4 px-0 lg:px-[34px]">
<Label htmlFor="address" className="mb-2">
Alamat <span className="text-red-500">*</span>
</Label>
@ -765,7 +765,7 @@ const page = () => {
<div className="text-red-500">{errors.address?.message}</div>
</div>
{Number(category) == 6 ? (
<div className="flex flex-col gap-3 px-[34px]">
<div className="flex flex-col gap-3 px-0 lg:px-[34px]">
<div className="flex flex-col mb-2">
<Label htmlFor="provinsi">
Institusi <span className="text-red-500">*</span>
@ -785,7 +785,7 @@ const page = () => {
</select>
</div>
<div
className="px-[34px]"
className="px-0 lg:px-[34px]"
style={
isCustomActive == false
? {
@ -799,7 +799,7 @@ const page = () => {
</Label>
<Input className="mb-3" autoComplete="off" placeholder="Masukan Nama Lengkap Institusi Anda" type="text" onChange={(event) => setCustomInstituteName(event.target.value)} />
</div>
<div className="">
<div>
<Label htmlFor="alamat" className="mb-2">
Alamat Institusi <span className="text-red-500">*</span>
</Label>
@ -809,11 +809,17 @@ const page = () => {
) : (
""
)}
<div className="flex flex-col px-[34px]">
<div className="flex flex-col px-0 lg:px-[34px]">
<label htmlFor="provinsi" className="mb-2">
Provinsi <span className="text-red-500">*</span>
</label>
<select className={`mb-3 p-2 border rounded-md border-slate-300 bg-white cursor-pointer ${errors.provinsi ? "block" : ""}`} {...register("provinsi")} id="provinsi" name="provinsi" onChange={(event) => getCity(event.target.value)}>
<select
className={`mb-3 p-2 border rounded-md border-slate-300 bg-white cursor-pointer ${errors.provinsi ? "block" : ""}`}
{...register("provinsi")}
id="provinsi"
name="provinsi"
onChange={(event) => getCity(event.target.value)}
>
<option disabled selected>
Pilih Provinsi
</option>
@ -825,7 +831,7 @@ const page = () => {
</select>
<div className="text-red-500">{errors.provinsi?.message}</div>
</div>
<div className="flex flex-col px-[34px]">
<div className="flex flex-col px-0 lg:px-[34px]">
<label htmlFor="kota" className="mb-2">
Kota/Kabupaten <span className="text-red-500">*</span>
</label>
@ -841,7 +847,7 @@ const page = () => {
</select>
<div className="text-red-500">{errors.kota?.message}</div>
</div>
<div className="flex flex-col px-[34px]">
<div className="flex flex-col px-0 lg:px-[34px]">
<label htmlFor="kecamatan" className="mb-2">
Kecamatan <span className="text-red-500">*</span>
</label>
@ -886,7 +892,7 @@ const page = () => {
</a>
<div className="text-red-500">{errors.password?.message}</div>
</div> */}
<div className="mt-3.5 space-y-2 px-[34px]">
<div className="mt-3.5 space-y-2 px-0 lg:px-[34px]">
<Label htmlFor="password" className="mb-2 font-medium text-default-600">
Kata Sandi <span className="text-red-500">*</span>
</Label>
@ -944,7 +950,7 @@ const page = () => {
<Icon icon="fa:eye-slash" />
</a>
</div> */}
<div className="mt-3.5 space-y-2 px-[34px]">
<div className="mt-3.5 space-y-2 px-0 lg:px-[34px]">
<Label htmlFor="password" className="mb-2 font-medium text-default-600">
Konfirmasi Kata Sandi <span className="text-red-500">*</span>
</Label>
@ -973,7 +979,7 @@ const page = () => {
</div>
<div className="text-red-500">{warningPassConf}</div>
</div>
<div className="form-group px-[34px]">
<div className="form-group px-0 lg:px-[34px]">
<PasswordChecklist
rules={["minLength", "specialChar", "number", "capital", "match"]}
minLength={8}
@ -1004,7 +1010,7 @@ const page = () => {
}
>
<div className="text-center mb-2 px-[34px]">
<p>
<p className="text-sm lg:text-base">
Dengan mendaftar, saya telah menyetujui <br />{" "}
<a href="/privacy" target="_blank" className="text-red-500">
<b>Syarat dan Ketentuan</b>

6
components/landing-page/content-category.tsx
View File

@ -20,9 +20,7 @@ const ContentCategory = (props: { group?: string }) => {
}, []);
const initFetch = async () => {
const response = await getPublicCategoryData(
props.group == "mabes" ? "" :
props.group == "polda" && poldaName && String(poldaName)?.length > 1 ? poldaName :
props.group == "satker" && satkerName && String(satkerName)?.length > 1 ? "satker-"+satkerName : "",
props.group == "mabes" ? "" : props.group == "polda" && poldaName && String(poldaName)?.length > 1 ? poldaName : props.group == "satker" && satkerName && String(satkerName)?.length > 1 ? "satker-" + satkerName : "",
"",
locale == "en" ? true : false
);
@ -55,7 +53,7 @@ const ContentCategory = (props: { group?: string }) => {
<div className="grid my-3 grid-cols-2 lg:grid-cols-4 gap-4">
{categories?.map((category: any, index: number) =>
!seeAllValue ? (
index < 8 ? (
index < 4 ? (
<Link key={category?.id} href={`all/filter?category=${category?.id}`} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
<img src={category?.thumbnailLink} className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
<div className="absolute bottom-0 rounded-lg left-0 right-0 bg-gray-400 border-l-4 mb-4 border-[#bb3523] text-white p-2">

8
components/landing-page/header-management.tsx
View File

@ -67,8 +67,8 @@ const HeaderManagement = () => {
return (
<div>
{/* Header */}
<div className="bg-[#504e52] p-12">
<div className="flex justify-between mx-10">
<div className="bg-[#504e52] p-10 lg:p-12">
<div className="flex flex-col lg:flex-row justify-center lg:justify-between mx-6 lg:mx-10">
<div className="flex items-center gap-2 ">
<img src="/assets/avatar-profile.png" alt="avatar" className="w-14 h-14" />
<div className="flex flex-col mx-2">
@ -82,9 +82,9 @@ const HeaderManagement = () => {
</p>
</div>
</div>
<Link href="/profile" className="flex items-center text-white gap-2">
<Link href="/profile" className="flex justify-center items-center text-white gap-2 mt-3 lg:mt-0">
<Icon icon="tdesign:setting-1-filled" />
Pengaturan
<p className="text-sm lg:text-base">Pengaturan</p>
</Link>
</div>
</div>

8
components/landing-page/hero.tsx
View File

@ -104,28 +104,28 @@ const Hero: React.FC = () => {
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
<div className="flex items-center gap-4 max-w-sm mx-auto mb-3">
<div className="items-center hidden md:block gap-4 max-w-sm mx-auto mb-3 lg:flex">
<Skeleton className="h-[73px] w-16 rounded-md" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
<div className="flex items-center gap-4 max-w-sm mx-auto mb-3">
<div className="hidden md:block items-center gap-4 max-w-sm mx-auto mb-3 lg:flex">
<Skeleton className="h-[73px] w-16 rounded-md" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
<div className="flex items-center gap-4 max-w-sm mx-auto mb-3">
<div className="hidden md:block items-center gap-4 max-w-sm mx-auto mb-3 lg:flex">
<Skeleton className="h-[73px] w-16 rounded-md" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</div>
<div className="flex items-center gap-4 max-w-sm mx-auto">
<div className="hidden md:block items-center gap-4 max-w-sm mx-auto lg:flex">
<Skeleton className="h-[73px] w-16 rounded-md" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />

65
components/landing-page/navbar.tsx
View File

@ -693,7 +693,7 @@ const Navbar = () => {
</div>
<div className="border-b-2 border-black"></div>
<DialogFooter>
<Link href={`/auth/registration?category=${category}`} className="bg-red-500 px-4 py-1 rounded-md border border-black text-white" type="submit">
<Link href={`/auth/registration?category=${category}`} className="flex justify-center bg-red-500 px-4 py-1 rounded-md border border-black text-white" type="submit">
Selanjutnya{" "}
</Link>
</DialogFooter>
@ -794,43 +794,42 @@ const Navbar = () => {
</NavigationMenuList>
</NavigationMenu>
<div className="flex flex-row justify-between mx-3">
{roleId == undefined ? (
""
) : (
<div
className="my-auto items-center cursor-pointer"
style={
Number(roleId) == 5 || Number(roleId) == 8
? {
display: "none",
}
: {}
}
>
<Link
href="https://spit.humas.polri.go.id"
className=""
target="_blank"
{roleId == undefined ? (
""
) : (
<div
className="my-auto items-center cursor-pointer"
style={
menuActive == "indeks"
Number(roleId) == 5 || Number(roleId) == 8
? {
color: "#fff",
}
: {
color: "#1F1A17",
display: "none",
}
: {}
}
legacyBehavior
>
<div className="flex flex-row items-center gap-1">
<Icon icon="gravity-ui:database-fill" fontSize={25} />
<p className="text-xs font-semibold">Raw Data</p>
</div>
</Link>
</div>
)}
<Link
href="https://spit.humas.polri.go.id"
className=""
target="_blank"
style={
menuActive == "indeks"
? {
color: "#fff",
}
: {
color: "#1F1A17",
}
}
legacyBehavior
>
<div className="flex flex-row items-center gap-1">
<Icon icon="gravity-ui:database-fill" fontSize={25} />
<p className="text-xs font-semibold">Raw Data</p>
</div>
</Link>
</div>
)}
{/* <div className="flex items-center space-x-1 mx-3 text-red-600">
<span className="w-2 h-2 bg-red-500 rounded-full"></span>
<span className="font-medium">Live</span>
@ -1268,7 +1267,7 @@ const Navbar = () => {
</div>
<div className="border-b-2 border-black"></div>
<DialogFooter>
<Link href={`/auth/registration?category=${category}`} className="bg-red-500 px-4 py-1 rounded-md border border-black text-white" type="submit">
<Link href={`/auth/registration?category=${category}`} className="bg-red-500 flex justify-center px-4 py-1 rounded-md border border-black text-white" type="submit">
Selanjutnya{" "}
</Link>
</DialogFooter>

4
components/landing-page/new-content.tsx
View File

@ -105,8 +105,8 @@ const NewContent = (props: { group: string; type: string }) => {
{isLoading ? (
<div className="flex flex-row space-y-3 w-full justify-center items-center gap-10">
<Skeleton className="h-[200px] w-[400px] rounded-xl" />
<Skeleton className="h-[200px] w-[400px] rounded-xl" />
<Skeleton className="h-[200px] w-[400px] rounded-xl" />
<Skeleton className="h-[200px] w-[400px] rounded-xl hidden md:block" />
<Skeleton className="h-[200px] w-[400px] rounded-xl hidden md:block" />
</div>
) : (
<div className="px-0 lg:px-10">

2
components/landing-page/sidebar-management.tsx
View File

@ -65,7 +65,7 @@ const SidebarManagement = () => {
// Render
if (!hasMounted) return null;
return (
<div className="p-12 w-1/3 ">
<div className="p-4 lg:p-12 w-full lg:w-1/3 ">
<div className="border rounded-2xl border-black m-4">
<h1 className="text-xl p-5">Tentang Saya</h1>
<div>