feat: eng language
This commit is contained in:
parent
af7d4a5e1d
commit
2e03a6ecdc
|
|
@ -20,6 +20,7 @@ import Swal from "sweetalert2";
|
|||
import { checkMaliciousText, getPublicLocaleTimestamp } from "@/utils/globals";
|
||||
import parse from "html-react-parser";
|
||||
import $ from "jquery";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
const formWaveSurferOptions = (ref: any) => ({
|
||||
container: ref,
|
||||
|
|
@ -66,6 +67,8 @@ const DetailAudio = () => {
|
|||
const [listSuggestion, setListSuggestion] = useState<any>();
|
||||
const MySwal = withReactContent(Swal);
|
||||
const [visibleInput, setVisibleInput] = useState<string | null>(null);
|
||||
const t = useTranslations("LandingPage");
|
||||
|
||||
let typeString = "audio";
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -250,11 +253,8 @@ const DetailAudio = () => {
|
|||
};
|
||||
|
||||
const sizes = [
|
||||
{ label: "XL", value: "3198 x 1798 px" },
|
||||
{ label: "L", value: "2399 x 1349 px" },
|
||||
{ label: "M", value: "1599 x 899 px" },
|
||||
{ label: "S", value: "1066 x 599 px" },
|
||||
{ label: "XS", value: "800 x 450 px" },
|
||||
{ label: "MP3", value: "... MB" },
|
||||
{ label: "WAV", value: "... MB" },
|
||||
];
|
||||
|
||||
const handleShare = (type: any, url: any) => {
|
||||
|
|
@ -592,16 +592,20 @@ const DetailAudio = () => {
|
|||
<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 <span className="font-semibold text-black">{detailDataAudio?.uploadedBy?.userLevel?.name}</span>
|
||||
{t("by")} <span className="font-semibold text-black">{detailDataAudio?.uploadedBy?.userLevel?.name}</span>
|
||||
</p>
|
||||
<p className="text-xs lg:text-sm">
|
||||
| {t("updatedOn")} {detailDataAudio?.updatedAt} WIB |
|
||||
</p>
|
||||
<p className="text-xs lg:text-sm"> | Diupdate pada {detailDataAudio?.updatedAt} WIB | </p>
|
||||
<p className="text-xs lg:text-sm flex justify-center items-center">
|
||||
<Icon icon="formkit:eye" width="15" height="15" />
|
||||
{detailDataAudio?.clickCount}
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-3">
|
||||
<p className="flex text-end text-xs lg:text-sm font-semibold">Kreator: {detailDataAudio?.creatorName}</p>
|
||||
<p className="flex text-end text-xs lg:text-sm font-semibold">
|
||||
{t("creator")} {detailDataAudio?.creatorName}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* Keterangan */}
|
||||
|
|
@ -616,12 +620,12 @@ const DetailAudio = () => {
|
|||
{isSaved ? (
|
||||
<a onClick={() => handleDeleteWishlist()} className="flex flex-col mb-3 items-center justify-center cursor-pointer">
|
||||
<Icon icon="material-symbols:bookmark" width={40} />
|
||||
<p className="text-base lg:text-lg">Hapus</p>
|
||||
<p className="text-base lg:text-lg">{t("delete")}</p>
|
||||
</a>
|
||||
) : (
|
||||
<a onClick={() => doBookmark()} className="flex flex-col mb-3 items-center justify-center cursor-pointer">
|
||||
<Icon icon="material-symbols:bookmark-outline" width={40} />
|
||||
<p className="text-base lg:text-lg">Simpan</p>
|
||||
<p className="text-base lg:text-lg">{t("save")}</p>
|
||||
</a>
|
||||
)}
|
||||
|
||||
|
|
@ -643,7 +647,7 @@ const DetailAudio = () => {
|
|||
<div className="border-t border-black my-4"></div>
|
||||
|
||||
{/* Opsi Ukuran Foto */}
|
||||
<h4 className="flex text-lg justify-center items-center font-semibold my-3">Opsi Ukuran Audio</h4>
|
||||
<h4 className="flex text-lg justify-center items-center font-semibold my-3">{t("audioSize")}</h4>
|
||||
|
||||
<div className="border-t border-black my-4"></div>
|
||||
|
||||
|
|
@ -665,7 +669,7 @@ const DetailAudio = () => {
|
|||
<div className="mt-4">
|
||||
<label className="flex items-center space-x-2 text-sm">
|
||||
<input type="checkbox" className="text-red-600 focus:ring-red-600" onChange={() => setIsDownloadAll(!isDownloadAll)} />
|
||||
<span>Download Semua File?</span>
|
||||
<span>{t("downloadAll")}</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
|
@ -674,12 +678,12 @@ const DetailAudio = () => {
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
|
||||
<path fill="white" d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z" />
|
||||
</svg>
|
||||
Download
|
||||
{t("download")}
|
||||
</button>
|
||||
|
||||
{/* Tombol Bagikan */}
|
||||
<div className="flex flex-row py-3">
|
||||
<p className="text-base font-semibold">Bagikan</p>
|
||||
<p className="text-base font-semibold">{t("share")}</p>
|
||||
<a className="ml-8 cursor-pointer" onClick={() => handleShare("fb", `https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}"e=${content?.title}`)}>
|
||||
<Icon icon="brandico:facebook" height="20" className="px-auto text-red-600 text-center" />
|
||||
</a>
|
||||
|
|
@ -697,13 +701,13 @@ const DetailAudio = () => {
|
|||
</PopoverTrigger>
|
||||
<PopoverContent>
|
||||
<div className="flex flex-col">
|
||||
<h1 className="mb-2">Share Ke Email</h1>
|
||||
<h1 className="mb-2">{t("shareTo")}</h1>
|
||||
<div className="flex flex-col mb-2">
|
||||
<p className="text-base font-semibold mb-1">Email Tujuan :</p>
|
||||
<Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder="Tekan Enter untuk input Email" />
|
||||
<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()}>
|
||||
Kirim
|
||||
{t("send")}
|
||||
</Button>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
|
|
@ -717,10 +721,10 @@ const DetailAudio = () => {
|
|||
{/* Comment */}
|
||||
<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>
|
||||
<p className="flex items-start text-lg">{t("comment")}</p>
|
||||
<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
|
||||
{t("send")}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
|
@ -749,11 +753,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-2 text-xs lg:text-base lg: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">{t("reply")}</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-2 text-xs lg:text-base lg: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">{t("delete")}</small>
|
||||
</a>
|
||||
) : (
|
||||
""
|
||||
|
|
@ -763,13 +767,13 @@ const DetailAudio = () => {
|
|||
</div>
|
||||
{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" />
|
||||
<Textarea id={`input-comment-${data.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder={t("enterReply")} />
|
||||
<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>
|
||||
<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">{t("send")}</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>
|
||||
<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">{t("cancel")}</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -798,7 +802,7 @@ const DetailAudio = () => {
|
|||
}
|
||||
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">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">{t("reply")}</small>
|
||||
</a>
|
||||
<a
|
||||
style={
|
||||
|
|
@ -810,7 +814,7 @@ const DetailAudio = () => {
|
|||
}
|
||||
onClick={() => deleteData(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">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">{t("delete")}</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -818,13 +822,13 @@ const DetailAudio = () => {
|
|||
|
||||
{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" />
|
||||
<Textarea name="" className="mt-2 " id={`input-comment-${child1.id}`} placeholder={t("enterReply")} />
|
||||
<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>
|
||||
<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">{t("send")}</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>
|
||||
<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">{t("cancel")}</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -853,7 +857,7 @@ const DetailAudio = () => {
|
|||
}
|
||||
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">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">{t("reply")}</small>
|
||||
</a>
|
||||
<a
|
||||
style={
|
||||
|
|
@ -865,7 +869,7 @@ const DetailAudio = () => {
|
|||
}
|
||||
onClick={() => deleteData(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">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">{t("delete")}</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -875,10 +879,10 @@ const DetailAudio = () => {
|
|||
<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>
|
||||
<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">{t("send")}</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>
|
||||
<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">{t("cancel")}</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ import { checkMaliciousText, getPublicLocaleTimestamp } from "@/utils/globals";
|
|||
import withReactContent from "sweetalert2-react-content";
|
||||
import Swal from "sweetalert2";
|
||||
import parse from "html-react-parser";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
const DetailDocument = () => {
|
||||
const [selectedSize, setSelectedSize] = useState<string>("L");
|
||||
|
|
@ -50,6 +51,7 @@ const DetailDocument = () => {
|
|||
const [listSuggestion, setListSuggestion] = useState<any>();
|
||||
const MySwal = withReactContent(Swal);
|
||||
const [visibleInput, setVisibleInput] = useState<string | null>(null);
|
||||
const t = useTranslations("LandingPage");
|
||||
|
||||
let typeString = "document";
|
||||
|
||||
|
|
@ -139,11 +141,9 @@ const DetailDocument = () => {
|
|||
};
|
||||
|
||||
const sizes = [
|
||||
{ label: "XL", value: "3198 x 1798 px" },
|
||||
{ label: "L", value: "2399 x 1349 px" },
|
||||
{ label: "M", value: "1599 x 899 px" },
|
||||
{ label: "S", value: "1066 x 599 px" },
|
||||
{ label: "XS", value: "800 x 450 px" },
|
||||
{ label: "DOC", value: "...KB" },
|
||||
{ label: "PPT", value: "...KB" },
|
||||
{ label: "PDF", value: "...KB" },
|
||||
];
|
||||
|
||||
async function sendActivityLog(activityTypeId: number) {
|
||||
|
|
@ -433,14 +433,22 @@ const DetailDocument = () => {
|
|||
<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 <span className="font-semibold text-black">{detailDataDocument?.uploadedBy?.userLevel?.name}</span>
|
||||
{t("by")} <span className="font-semibold text-black">{detailDataDocument?.uploadedBy?.userLevel?.name}</span>
|
||||
</p>
|
||||
<p className="text-xs lg:text-sm">
|
||||
| {t("updatedOn")} {detailDataDocument?.updatedAt} WIB |
|
||||
</p>
|
||||
<p className="text-xs lg:text-sm"> | Diupdate pada {detailDataDocument?.updatedAt} WIB | </p>
|
||||
<p className="text-xs lg:text-sm flex justify-center items-center">
|
||||
<Icon icon="formkit:eye" width="15" height="15" />
|
||||
{detailDataDocument?.clickCount}
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-3">
|
||||
<p className="flex text-end text-xs lg:text-sm font-semibold">
|
||||
{t("creator")}
|
||||
{detailDataDocument?.creatorName}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Keterangan */}
|
||||
|
|
@ -455,12 +463,12 @@ const DetailDocument = () => {
|
|||
{isSaved ? (
|
||||
<a onClick={() => handleDeleteWishlist()} className="flex flex-col mb-3 items-center justify-center cursor-pointer">
|
||||
<Icon icon="material-symbols:bookmark" width={40} />
|
||||
<p className="text-base lg:text-lg">Hapus</p>
|
||||
<p className="text-base lg:text-lg">{t("delete")}</p>
|
||||
</a>
|
||||
) : (
|
||||
<a onClick={() => doBookmark()} className="flex flex-col mb-3 items-center justify-center cursor-pointer">
|
||||
<Icon icon="material-symbols:bookmark-outline" width={40} />
|
||||
<p className="text-base lg:text-lg">Simpan</p>
|
||||
<p className="text-base lg:text-lg">{t("save")}</p>
|
||||
</a>
|
||||
)}
|
||||
|
||||
|
|
@ -482,7 +490,7 @@ const DetailDocument = () => {
|
|||
<div className="border-t border-black my-4"></div>
|
||||
|
||||
{/* Opsi Ukuran Foto */}
|
||||
<h4 className="flex text-lg justify-center items-center font-semibold my-3">Opsi Ukuran Foto</h4>
|
||||
<h4 className="flex text-lg justify-center items-center font-semibold my-3">{t("docSize")}</h4>
|
||||
<div className="border-t border-black my-4"></div>
|
||||
<div className="space-y-2">
|
||||
{sizes.map((size: any) => (
|
||||
|
|
@ -502,7 +510,7 @@ const DetailDocument = () => {
|
|||
<div className="mt-4">
|
||||
<label className="flex items-center space-x-2 text-sm">
|
||||
<input type="checkbox" className="text-red-600 focus:ring-red-600" onChange={() => setIsDownloadAll(!isDownloadAll)} />
|
||||
<span>Download Semua File?</span>
|
||||
<span>{t("downloadAll")}</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
|
@ -511,12 +519,12 @@ const DetailDocument = () => {
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
|
||||
<path fill="white" d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z" />
|
||||
</svg>
|
||||
Download
|
||||
{t("download")}
|
||||
</button>
|
||||
|
||||
{/* Tombol Bagikan */}
|
||||
<div className="flex flex-row py-3">
|
||||
<p className="text-base font-semibold">Bagikan</p>
|
||||
<p className="text-base font-semibold">{t("share")}</p>
|
||||
<a className="ml-8 cursor-pointer" onClick={() => handleShare("fb", `https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}"e=${content?.title}`)}>
|
||||
<Icon icon="brandico:facebook" height="20" className="px-auto text-red-600 text-center" />
|
||||
</a>
|
||||
|
|
@ -534,13 +542,13 @@ const DetailDocument = () => {
|
|||
</PopoverTrigger>
|
||||
<PopoverContent>
|
||||
<div className="flex flex-col">
|
||||
<h1 className="mb-2">Share Ke Email</h1>
|
||||
<h1 className="mb-2">{t("shareTo")}</h1>
|
||||
<div className="flex flex-col mb-2">
|
||||
<p className="text-base font-semibold mb-1">Email Tujuan :</p>
|
||||
<Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder="Tekan Enter untuk input Email" />
|
||||
<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()}>
|
||||
Kirim
|
||||
{t("send")}
|
||||
</Button>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
|
|
@ -554,10 +562,10 @@ const DetailDocument = () => {
|
|||
{/* Comment */}
|
||||
<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>
|
||||
<p className="flex items-start text-lg">{t("comment")}</p>
|
||||
<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
|
||||
{t("send")}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
|
@ -586,11 +594,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-2 text-xs lg:text-base lg: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">{t("reply")}</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-2 text-xs lg:text-base lg: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">{t("delete")}</small>
|
||||
</a>
|
||||
) : (
|
||||
""
|
||||
|
|
@ -600,13 +608,13 @@ const DetailDocument = () => {
|
|||
</div>
|
||||
{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" />
|
||||
<Textarea id={`input-comment-${data.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder={t("enterReply")} />
|
||||
<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>
|
||||
<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">{t("send")}</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>
|
||||
<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">{t("cancel")}</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -635,7 +643,7 @@ const DetailDocument = () => {
|
|||
}
|
||||
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">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">{t("reply")}</small>
|
||||
</a>
|
||||
<a
|
||||
style={
|
||||
|
|
@ -647,7 +655,7 @@ const DetailDocument = () => {
|
|||
}
|
||||
onClick={() => deleteData(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">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">{t("delete")}</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -655,13 +663,13 @@ const DetailDocument = () => {
|
|||
|
||||
{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" />
|
||||
<Textarea name="" className="mt-2 " id={`input-comment-${child1.id}`} placeholder={t("enterReply")} />
|
||||
<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>
|
||||
<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">{t("send")}</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>
|
||||
<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">{t("cancel")}</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -690,7 +698,7 @@ const DetailDocument = () => {
|
|||
}
|
||||
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">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">{t("reply")}</small>
|
||||
</a>
|
||||
<a
|
||||
style={
|
||||
|
|
@ -702,20 +710,20 @@ const DetailDocument = () => {
|
|||
}
|
||||
onClick={() => deleteData(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">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">{t("delete")}</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{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" />
|
||||
<Textarea name="" id={`input-comment-${child2.id}`} className="my-2" placeholder={t("enterReply")} />
|
||||
<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>
|
||||
<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">{t("send")}</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>
|
||||
<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">{t("cancel")}</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -473,7 +473,7 @@ const DetailInfo = () => {
|
|||
{t("by")} <span className="font-semibold text-black">{detailDataImage?.uploadedBy?.userLevel?.name}</span>
|
||||
</p>
|
||||
<p className="text-xs lg:text-sm">
|
||||
| {t("updateOn")}
|
||||
| {t("updatedOn")}
|
||||
{detailDataImage?.updatedAt} WIB |
|
||||
</p>
|
||||
<p className="text-xs lg:text-sm flex justify-center items-center">
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ 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";
|
||||
|
||||
const IndeksDetail = () => {
|
||||
const searchParams = useSearchParams();
|
||||
|
|
@ -24,6 +25,7 @@ const IndeksDetail = () => {
|
|||
const userRoleId = getCookiesDecrypt("urie");
|
||||
const router: any = useRouter();
|
||||
const [listComments, setListComments] = useState([]);
|
||||
const t = useTranslations("LandingPage");
|
||||
|
||||
useEffect(() => {
|
||||
initFetch();
|
||||
|
|
@ -154,7 +156,7 @@ const IndeksDetail = () => {
|
|||
<div className="p-4 lg:px-60 lg:p-12">
|
||||
{/* Judul */}
|
||||
<div className="flex flex-col mb-5">
|
||||
<h1 className="text-base lg:text-lg mb-2">Indeks / Detail</h1>
|
||||
<h1 className="text-base lg:text-lg mb-2">Index / Detail</h1>
|
||||
<h1 className="flex flex-row font-bold text-center text-lg lg:text-2xl">{indeksData?.title}</h1>
|
||||
</div>
|
||||
{/* Gambar Utama */}
|
||||
|
|
@ -164,8 +166,8 @@ const IndeksDetail = () => {
|
|||
{/* Footer Informasi */}
|
||||
<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 <span className="font-semibold text-black">{indeksData?.uploaderName}</span> | Diupdate pada {indeksData?.createdAt} WIB
|
||||
<p className="text-xs lg:text-sm mb-2">
|
||||
{t("by")} <span className="font-semibold text-black">{indeksData?.uploaderName}</span> | {t("updatedOn")} {indeksData?.createdAt} WIB
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -180,10 +182,10 @@ const IndeksDetail = () => {
|
|||
<div className="w-full">
|
||||
<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-bases lg:text-lg">Berikan Komentar</p>
|
||||
<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()}>
|
||||
Kirim
|
||||
{t("send")}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
|
@ -202,7 +204,7 @@ const IndeksDetail = () => {
|
|||
<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}`)}>
|
||||
Balas
|
||||
{t("reply")}
|
||||
</a>
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
|
|
@ -216,15 +218,15 @@ const IndeksDetail = () => {
|
|||
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
|
||||
{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="Masukkan balasan anda" />
|
||||
<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)}>
|
||||
Send
|
||||
{t("send")}
|
||||
</a>
|
||||
</div>
|
||||
{data.children.length > 0
|
||||
|
|
@ -242,7 +244,7 @@ const IndeksDetail = () => {
|
|||
<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}`)}>
|
||||
Balas
|
||||
{t("reply")}
|
||||
</a>
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
|
|
@ -256,15 +258,15 @@ const IndeksDetail = () => {
|
|||
}
|
||||
onClick={() => deleteData(child1.id)}
|
||||
>
|
||||
Hapus
|
||||
{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="Masukkan balasan anda" />
|
||||
<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)}>
|
||||
Send
|
||||
{t("send")}
|
||||
</a>
|
||||
</div>
|
||||
{child1.children.length > 0
|
||||
|
|
@ -282,7 +284,7 @@ const IndeksDetail = () => {
|
|||
<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)}>
|
||||
Balas
|
||||
{t("reply")}
|
||||
</a>
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
|
|
@ -296,15 +298,15 @@ const IndeksDetail = () => {
|
|||
}
|
||||
onClick={() => deleteData(child2.id)}
|
||||
>
|
||||
Hapus
|
||||
{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="Masukkan balasan anda" />
|
||||
<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)}>
|
||||
Send
|
||||
{t("send")}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -320,7 +322,7 @@ const IndeksDetail = () => {
|
|||
|
||||
{/* 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>
|
||||
<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">
|
||||
{indexData?.map((relate: any) => (
|
||||
|
|
|
|||
|
|
@ -440,7 +440,7 @@ const DetailVideo = () => {
|
|||
{t("by")} <span className="font-semibold text-black">{detailDataVideo?.uploadedBy?.userLevel?.name}</span>
|
||||
</p>
|
||||
<p className="text-xs lg:text-sm">
|
||||
| {t("updateOn")}
|
||||
| {t("updatedOn")}
|
||||
{detailDataVideo?.updatedAt} WIB |
|
||||
</p>
|
||||
<p className="text-xs lg:text-sm flex justify-center items-center">
|
||||
|
|
@ -536,7 +536,7 @@ const DetailVideo = () => {
|
|||
|
||||
{/* Tombol Bagikan */}
|
||||
<div className="flex flex-row justify-center py-3">
|
||||
<p className="text-base font-semibold">Bagikan</p>
|
||||
<p className="text-base font-semibold">{t("share")}</p>
|
||||
<a className="ml-8 cursor-pointer" onClick={() => handleShare("fb", `https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}"e=${content?.title}`)}>
|
||||
<Icon icon="brandico:facebook" height="20" className="px-auto text-red-600 text-center" />
|
||||
</a>
|
||||
|
|
@ -557,7 +557,7 @@ const DetailVideo = () => {
|
|||
<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="Tekan Enter untuk input Email" />
|
||||
<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")}
|
||||
|
|
@ -720,7 +720,7 @@ const DetailVideo = () => {
|
|||
}
|
||||
onClick={() => deleteData(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">{t("cancel")}</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">{t("delete")}</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -366,7 +366,7 @@
|
|||
"previousSchedule": "Previous Schedule",
|
||||
"speaker": "Speaker :",
|
||||
"nextSchedule": "Next Schedule",
|
||||
"by": "By",
|
||||
"by": "Uploaded By",
|
||||
"updatedOn": "Update On",
|
||||
"creator": "Creator :",
|
||||
"delete": "Delete",
|
||||
|
|
@ -382,7 +382,10 @@
|
|||
"leaveComment": "Leave your comments here.",
|
||||
"reply": "Reply",
|
||||
"cancel": "Cancel",
|
||||
"enterReply": "Enter Your Replay"
|
||||
"enterReply": "Enter Your Replay",
|
||||
"docSize": "Document Size Options",
|
||||
"audioSize": "Audio Size Options",
|
||||
"relatedPosts": "Related Posts"
|
||||
},
|
||||
"FilterPage": {
|
||||
"image": "Image",
|
||||
|
|
|
|||
|
|
@ -366,7 +366,7 @@
|
|||
"previousSchedule": "Jadwal Sebelumnya",
|
||||
"speaker": "Pembicara :",
|
||||
"nextSchedule": "Jadwal Selanjutnya",
|
||||
"by": "Oleh",
|
||||
"by": "Diunggah Oleh",
|
||||
"updatedOn": "Diupdate pada",
|
||||
"creator": "Kreator :",
|
||||
"delete": "Hapus",
|
||||
|
|
@ -382,7 +382,10 @@
|
|||
"reply": "Balas",
|
||||
"cancel": "Batal",
|
||||
"videoSize": "Opsi Ukuran Audio Visual",
|
||||
"enterReply": "Masukkan balasan Anda"
|
||||
"enterReply": "Masukkan balasan Anda",
|
||||
"docSize": "Opsi Ukuran Teks",
|
||||
"audioSize": "Opsi Ukuran Audio",
|
||||
"relatedPosts": "Post Terkait"
|
||||
},
|
||||
"FilterPage": {
|
||||
"image": "Foto",
|
||||
|
|
|
|||
Loading…
Reference in New Issue