feat: language eng
This commit is contained in:
parent
2f8225ded6
commit
af7d4a5e1d
|
|
@ -19,6 +19,7 @@ import withReactContent from "sweetalert2-react-content";
|
|||
import Swal from "sweetalert2";
|
||||
import parse from "html-react-parser";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
const DetailInfo = () => {
|
||||
const MySwal = withReactContent(Swal);
|
||||
|
|
@ -52,6 +53,7 @@ const DetailInfo = () => {
|
|||
const [isLoading, setIsLoading] = useState<any>(true);
|
||||
const [visibleInput, setVisibleInput] = useState(null);
|
||||
let typeString = "image";
|
||||
const t = useTranslations("LandingPage");
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
|
|
@ -468,16 +470,22 @@ const DetailInfo = () => {
|
|||
<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">{detailDataImage?.uploadedBy?.userLevel?.name}</span>
|
||||
{t("by")} <span className="font-semibold text-black">{detailDataImage?.uploadedBy?.userLevel?.name}</span>
|
||||
</p>
|
||||
<p className="text-xs lg:text-sm">
|
||||
| {t("updateOn")}
|
||||
{detailDataImage?.updatedAt} WIB |
|
||||
</p>
|
||||
<p className="text-xs lg:text-sm"> | Diupdate pada {detailDataImage?.updatedAt} WIB | </p>
|
||||
<p className="text-xs lg:text-sm flex justify-center items-center">
|
||||
<Icon icon="formkit:eye" width="15" height="15" />
|
||||
{detailDataImage?.clickCount}
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-3">
|
||||
<p className="flex text-end text-xs lg:text-sm font-semibold">Kreator: {detailDataImage?.creatorName}</p>
|
||||
<p className="flex text-end text-xs lg:text-sm font-semibold">
|
||||
{t("creator")}
|
||||
{detailDataImage?.creatorName}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -493,12 +501,12 @@ const DetailInfo = () => {
|
|||
{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>
|
||||
)}
|
||||
|
||||
|
|
@ -520,7 +528,7 @@ const DetailInfo = () => {
|
|||
<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("imageSize")}</h4>
|
||||
<div className="border-t border-black my-4"></div>
|
||||
|
||||
<div className="space-y-2">
|
||||
|
|
@ -541,7 +549,7 @@ const DetailInfo = () => {
|
|||
<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>
|
||||
|
||||
|
|
@ -550,12 +558,12 @@ const DetailInfo = () => {
|
|||
<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 mt-5 justify-center">
|
||||
<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>
|
||||
|
|
@ -573,13 +581,13 @@ const DetailInfo = () => {
|
|||
</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>
|
||||
|
|
@ -593,10 +601,10 @@ const DetailInfo = () => {
|
|||
{/* 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>
|
||||
<Textarea placeholder="Type your comments here." className="flex w-full pb-12" onChange={getInputValue} />
|
||||
<p className="flex items-start text-lg">{t("comment")}</p>
|
||||
<Textarea placeholder={t("leaveComment")} 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>
|
||||
|
||||
|
|
@ -625,11 +633,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-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>
|
||||
) : (
|
||||
""
|
||||
|
|
@ -639,13 +647,13 @@ const DetailInfo = () => {
|
|||
</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>
|
||||
|
|
@ -674,7 +682,7 @@ const DetailInfo = () => {
|
|||
}
|
||||
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={
|
||||
|
|
@ -686,7 +694,7 @@ const DetailInfo = () => {
|
|||
}
|
||||
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>
|
||||
|
|
@ -694,13 +702,13 @@ const DetailInfo = () => {
|
|||
|
||||
{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>
|
||||
|
|
@ -729,7 +737,7 @@ const DetailInfo = () => {
|
|||
}
|
||||
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={
|
||||
|
|
@ -741,7 +749,7 @@ const DetailInfo = () => {
|
|||
}
|
||||
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>
|
||||
|
|
@ -751,10 +759,10 @@ const DetailInfo = () => {
|
|||
<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>
|
||||
|
|
|
|||
|
|
@ -518,7 +518,7 @@ const Schedule = (props: any) => {
|
|||
<div className="gap-6 flex flex-row justify-end">
|
||||
<p className="font-semibold">Filter</p>
|
||||
<button className="text-blue-400" onClick={doFilter}>
|
||||
Simpan
|
||||
{t("save")}
|
||||
</button>
|
||||
</div>
|
||||
<div className="border w-full border-t border-slate-500"></div>
|
||||
|
|
@ -554,7 +554,7 @@ const Schedule = (props: any) => {
|
|||
<table className="w-full text-sm text-start">
|
||||
<thead className="text-md">
|
||||
<tr className="h-full">
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[120px]">Time Table</th>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[120px]">{t("timeTable")}</th>
|
||||
<th className="text-center border border-r-0 border-gray-100 dark:border-gray-700 py-6 w-[20px]">
|
||||
<a onClick={() => changePrevWeek()} className="cursor-pointer h-fit self-center bottom-0">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40px" height="40px" viewBox="0 0 24 24">
|
||||
|
|
@ -570,23 +570,28 @@ const Schedule = (props: any) => {
|
|||
</a>{" "} */}
|
||||
<div className="flex flex-col ">
|
||||
<p className="text-2xl">{dateAWeek[0]?.split("-")[2]}</p>
|
||||
<p>Monday</p>
|
||||
<p>{t("monday")}</p>
|
||||
</div>
|
||||
</th>
|
||||
<th className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[1] ? "bg-[#BE0106] text-white rounded-lg" : ""}`}>
|
||||
<div className="text-2xl">{dateAWeek[1]?.split("-")[2]}</div>Tuesday
|
||||
<div className="text-2xl">{dateAWeek[1]?.split("-")[2]}</div>
|
||||
{t("tuesday")}
|
||||
</th>
|
||||
<th className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[2] ? "bg-[#BE0106] text-white rounded-lg" : ""}`}>
|
||||
<div className="text-2xl">{dateAWeek[2]?.split("-")[2]}</div>Wednesday
|
||||
<div className="text-2xl">{dateAWeek[2]?.split("-")[2]}</div>
|
||||
{t("wednesday")}
|
||||
</th>
|
||||
<th className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[3] ? "bg-[#BE0106] text-white rounded-lg" : ""}`}>
|
||||
<div className="text-2xl">{dateAWeek[3]?.split("-")[2]}</div>Thursday
|
||||
<div className="text-2xl">{dateAWeek[3]?.split("-")[2]}</div>
|
||||
{t("thursday")}
|
||||
</th>
|
||||
<th className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[4] ? "bg-[#BE0106] text-white rounded-lg" : ""}`}>
|
||||
<div className="text-2xl">{dateAWeek[4]?.split("-")[2]}</div>Friday
|
||||
<div className="text-2xl">{dateAWeek[4]?.split("-")[2]}</div>
|
||||
{t("friday")}
|
||||
</th>
|
||||
<th className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[5] ? "bg-[#BE0106] text-white rounded-lg" : ""}`}>
|
||||
<div className="text-2xl">{dateAWeek[5]?.split("-")[2]}</div>Saturday
|
||||
<div className="text-2xl">{dateAWeek[5]?.split("-")[2]}</div>
|
||||
{t("saturday")}
|
||||
</th>
|
||||
<th
|
||||
onClick={() => changeNextWeek()}
|
||||
|
|
@ -596,7 +601,7 @@ const Schedule = (props: any) => {
|
|||
>
|
||||
<div className="flex flex-col ">
|
||||
<p className="text-2xl">{dateAWeek[6]?.split("-")[2]}</p>
|
||||
<p>Sunday</p>
|
||||
<p>{t("sunday")}</p>
|
||||
</div>
|
||||
{/* <a className="cursor-pointer h-fit p-0 m-0 self-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
|
||||
|
|
@ -693,7 +698,7 @@ const Schedule = (props: any) => {
|
|||
|
||||
<Accordion type="single" collapsible className="w-full">
|
||||
<AccordionItem value="item-1">
|
||||
<AccordionTrigger>Jadwal Hari ini</AccordionTrigger>
|
||||
<AccordionTrigger>{t("todaySchedule")}</AccordionTrigger>
|
||||
{todayList?.map((list: any) => (
|
||||
<AccordionContent key={list?.id} className="flex flex-row gap-3">
|
||||
<div className="border-l-4 border-red-700 pl-1 h-fit font-bold text-lg">{new Date(list.startDate).getDate()}</div>
|
||||
|
|
@ -707,7 +712,7 @@ const Schedule = (props: any) => {
|
|||
<Icon icon="bxs:map" width={40} />
|
||||
{list?.address}
|
||||
</p>
|
||||
<p>Pembicara :</p>
|
||||
<p>{t("speaker")}</p>
|
||||
<p className="flex flex-row items-center gap-2">
|
||||
<Icon icon="ic:round-person" />
|
||||
{list?.speakerTitle} {list?.speakerName}
|
||||
|
|
@ -718,7 +723,7 @@ const Schedule = (props: any) => {
|
|||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="item-2">
|
||||
<AccordionTrigger>Jadwal Sebelumnya</AccordionTrigger>
|
||||
<AccordionTrigger>{t("previousSchedule")}</AccordionTrigger>
|
||||
{prevdayList?.map((list: any) => (
|
||||
<AccordionContent key={list?.id} className="flex flex-row gap-3">
|
||||
<div className="border-l-4 border-red-700 pl-1 h-fit font-bold text-lg">{new Date(list.startDate).getDate()}</div>
|
||||
|
|
@ -732,7 +737,7 @@ const Schedule = (props: any) => {
|
|||
<Icon icon="bxs:map" width={40} />
|
||||
{list?.address}
|
||||
</p>
|
||||
<p>Pembicara :</p>
|
||||
<p>{t("speaker")}</p>
|
||||
<p className="flex flex-row items-center gap-2">
|
||||
<Icon icon="ic:round-person" />
|
||||
{list?.speakerTitle} {list?.speakerName}
|
||||
|
|
@ -743,7 +748,7 @@ const Schedule = (props: any) => {
|
|||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="item-3">
|
||||
<AccordionTrigger>Jadwal Selanjutnya</AccordionTrigger>
|
||||
<AccordionTrigger>{t("nextSchedule")}</AccordionTrigger>
|
||||
{nextdayList?.map((list: any) => (
|
||||
<AccordionContent key={list?.id} className="flex flex-row gap-3">
|
||||
<div className="border-l-4 border-red-700 pl-1 h-fit font-bold text-lg">{new Date(list.startDate).getDate()}</div>
|
||||
|
|
@ -757,7 +762,7 @@ const Schedule = (props: any) => {
|
|||
<Icon icon="bxs:map" width={40} />
|
||||
{list?.address}
|
||||
</p>
|
||||
<p>Pembicara :</p>
|
||||
<p>{t("speaker")}</p>
|
||||
<p className="flex flex-row items-center gap-2">
|
||||
<Icon icon="ic:round-person" />
|
||||
{list?.speakerTitle} {list?.speakerName}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,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 DetailVideo = () => {
|
||||
const [selectedSize, setSelectedSize] = useState<string>("L");
|
||||
|
|
@ -49,7 +50,7 @@ const DetailVideo = () => {
|
|||
const [listSuggestion, setListSuggestion] = useState<any>();
|
||||
const [visibleInput, setVisibleInput] = useState(null);
|
||||
const MySwal = withReactContent(Swal);
|
||||
|
||||
const t = useTranslations("LandingPage");
|
||||
let typeString = "video";
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -436,16 +437,22 @@ const DetailVideo = () => {
|
|||
<p className="mt-3">Kreator: {detailDataVideo?.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">{detailDataVideo?.uploadedBy?.userLevel?.name}</span>
|
||||
{t("by")} <span className="font-semibold text-black">{detailDataVideo?.uploadedBy?.userLevel?.name}</span>
|
||||
</p>
|
||||
<p className="text-xs lg:text-sm">
|
||||
| {t("updateOn")}
|
||||
{detailDataVideo?.updatedAt} WIB |
|
||||
</p>
|
||||
<p className="text-xs lg:text-sm"> | Diupdate pada {detailDataVideo?.updatedAt} WIB | </p>
|
||||
<p className="text-xs lg:text-sm flex justify-center items-center">
|
||||
<Icon icon="formkit:eye" width="15" height="15" />
|
||||
{detailDataVideo?.clickCount}
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-3">
|
||||
<p className="flex text-end text-xs lg:text-sm font-semibold">Kreator: {detailDataVideo?.creatorName}</p>
|
||||
<p className="flex text-end text-xs lg:text-sm font-semibold">
|
||||
{t("creator")}
|
||||
{detailDataVideo?.creatorName}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -466,12 +473,12 @@ const DetailVideo = () => {
|
|||
{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>
|
||||
)}
|
||||
|
||||
|
|
@ -493,7 +500,7 @@ const DetailVideo = () => {
|
|||
<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 Visual</h4>
|
||||
<h4 className="flex text-lg justify-center items-center font-semibold my-3">{t("videoSize")}</h4>
|
||||
|
||||
<div className="border-t border-black my-4"></div>
|
||||
|
||||
|
|
@ -515,7 +522,7 @@ const DetailVideo = () => {
|
|||
<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>
|
||||
|
||||
|
|
@ -524,7 +531,7 @@ const DetailVideo = () => {
|
|||
<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 */}
|
||||
|
|
@ -547,13 +554,13 @@ const DetailVideo = () => {
|
|||
</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>
|
||||
<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" />
|
||||
</div>
|
||||
<Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
|
||||
Kirim
|
||||
{t("send")}
|
||||
</Button>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
|
|
@ -566,10 +573,10 @@ const DetailVideo = () => {
|
|||
{/* 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>
|
||||
|
||||
|
|
@ -598,11 +605,11 @@ const DetailVideo = () => {
|
|||
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>
|
||||
) : (
|
||||
""
|
||||
|
|
@ -612,13 +619,13 @@ const DetailVideo = () => {
|
|||
</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>
|
||||
|
|
@ -647,7 +654,7 @@ const DetailVideo = () => {
|
|||
}
|
||||
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={
|
||||
|
|
@ -659,20 +666,20 @@ const DetailVideo = () => {
|
|||
}
|
||||
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>
|
||||
</div>
|
||||
{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>
|
||||
|
|
@ -701,7 +708,7 @@ const DetailVideo = () => {
|
|||
}
|
||||
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={
|
||||
|
|
@ -713,20 +720,20 @@ 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">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("cancel")}</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>
|
||||
|
|
|
|||
|
|
@ -4,9 +4,11 @@ import Link from "next/link";
|
|||
import React, { useEffect, useState } from "react";
|
||||
import { generateLocalizedPath } from "@/utils/globals";
|
||||
import { useParams, usePathname, useRouter } from "next/navigation";
|
||||
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
|
||||
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
|
||||
import { getPrivacy } from "@/service/landing/landing";
|
||||
import parse from "html-react-parser";
|
||||
import { useTranslations } from "next-intl";
|
||||
import NewsTicker from "./news-tickers";
|
||||
|
||||
const Footer = () => {
|
||||
const router = useRouter();
|
||||
|
|
@ -14,6 +16,7 @@ const Footer = () => {
|
|||
const params = useParams();
|
||||
const locale = params?.locale;
|
||||
const [privacy, setPrivacy] = useState();
|
||||
const t = useTranslations("LandingPage");
|
||||
|
||||
useEffect(() => {
|
||||
async function initState() {
|
||||
|
|
@ -24,19 +27,21 @@ const Footer = () => {
|
|||
}, []);
|
||||
|
||||
return (
|
||||
<footer className="bg-[#bb3523] text-white text-xs lg:text-sm py-4">
|
||||
<div className="container mx-auto flex flex-col md:flex-row justify-between items-center space-y-2 md:space-y-0 px-4">
|
||||
<footer className="bg-[#bb3523] text-white text-xs lg:text-sm py-4 space-y-3 lg:space-y-0 h-">
|
||||
<div className="mx-auto flex flex-col md:flex-row justify-between items-center px-4">
|
||||
{/* Hak Cipta */}
|
||||
<div className="text-center md:text-left">Hak Cipta © {new Date().getFullYear()} Divisi Humas Polri. All Right Reserved.</div>
|
||||
<div className="text-center md:text-left">
|
||||
{t("copyright")} © {new Date().getFullYear()} {t("publicRelation")} {t("reserved")}
|
||||
</div>
|
||||
|
||||
{/* Menu Links */}
|
||||
<div className="flex flex-wrap justify-center items-center space-x-3">
|
||||
<Link href={generateLocalizedPath("/feedback", String(locale))} className="hover:underline">
|
||||
FeedBack
|
||||
{t("feedback")}
|
||||
</Link>
|
||||
<span className="hidden md:inline-block ">|</span>
|
||||
<Link href={generateLocalizedPath("/contact", String(locale))} className="hover:underline">
|
||||
Hubungi Kami
|
||||
{t("contact")}
|
||||
</Link>
|
||||
<span className="hidden md:inline-block">|</span>
|
||||
<Link href={generateLocalizedPath("/faqs", String(locale))} className="hover:underline">
|
||||
|
|
@ -47,13 +52,13 @@ const Footer = () => {
|
|||
<DialogTrigger>
|
||||
<span className="hidden md:inline-block">|</span>
|
||||
<a href="#" className="hover:underline px-2">
|
||||
Privacy
|
||||
{t("privacy")}
|
||||
</a>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="flex flex-col overflow-y-scroll h-[80%]" size="md">
|
||||
<div className="flex flex-row items-center justify-center gap-4">
|
||||
<img src="/assets/icon-privacy.png" alt="Privacy" />
|
||||
<p className="font-semibold text-lg">Kebijakan Privacy</p>
|
||||
<p className="font-semibold text-lg">{t("privacy")}</p>
|
||||
</div>
|
||||
<div className="container text-dark">{parse(String(privacy))}</div>
|
||||
</DialogContent>
|
||||
|
|
|
|||
|
|
@ -346,7 +346,43 @@
|
|||
"live": "Live",
|
||||
"notFound": "Not Found",
|
||||
"titleSchedule": "Input schedule title",
|
||||
"scheduleToday": ""
|
||||
"copyright": "Copyright",
|
||||
"publicRelation": "Public Relations Division of Polri",
|
||||
"reserved": "All Right Reserved.",
|
||||
"feedback": "Feedback",
|
||||
"contact": "Contact Us",
|
||||
"privacy": "Privacy Policy",
|
||||
"follow": "Follow Us",
|
||||
"save": "Save",
|
||||
"timeTable": "Time Table",
|
||||
"monday": "Monday",
|
||||
"tuesday": "Tuesday",
|
||||
"wednesday": "Wednesday",
|
||||
"thursday": "Thursday",
|
||||
"friday": "Friday",
|
||||
"saturday": "Saturday",
|
||||
"sunday": "Sunday",
|
||||
"todaySchedule": "Today Schedule",
|
||||
"previousSchedule": "Previous Schedule",
|
||||
"speaker": "Speaker :",
|
||||
"nextSchedule": "Next Schedule",
|
||||
"by": "By",
|
||||
"updatedOn": "Update On",
|
||||
"creator": "Creator :",
|
||||
"delete": "Delete",
|
||||
"imageSize": "Image Size Options",
|
||||
"videoSize": "Video Size Options",
|
||||
"downloadAll": "Download All File?",
|
||||
"share": "Share",
|
||||
"shareTo": "Share to Email",
|
||||
"destinationEmail": "Destination Email :",
|
||||
"pressEnter": "Press Enter to Input Email",
|
||||
"send": "Send",
|
||||
"comment": "Comment",
|
||||
"leaveComment": "Leave your comments here.",
|
||||
"reply": "Reply",
|
||||
"cancel": "Cancel",
|
||||
"enterReply": "Enter Your Replay"
|
||||
},
|
||||
"FilterPage": {
|
||||
"image": "Image",
|
||||
|
|
|
|||
|
|
@ -316,7 +316,7 @@
|
|||
"search": "Pencarian",
|
||||
"exploration": "Eksplorasi",
|
||||
"and": "dan",
|
||||
"download": "Download",
|
||||
"download": "Unduh",
|
||||
"coverage": "Liputan Resmi Kami",
|
||||
"officialCoverage": "Liputan resmi yang bersumber dari kegiatan Polri di Mabes dan Polda seluruh Indonesia",
|
||||
"allContent": "Semua Konten",
|
||||
|
|
@ -345,7 +345,44 @@
|
|||
"seeLess": "Lihat Lebih Sedikit",
|
||||
"notFound": "Tidak Ditemukan",
|
||||
"division": "Satker",
|
||||
"titleSchedule": "Masukkan judul Jadwal"
|
||||
"titleSchedule": "Masukkan judul Jadwal",
|
||||
"copyright": "Hak Cipta",
|
||||
"publicRelation": "Divisi Humas Polri",
|
||||
"reserved": "Hak Cipta Dilindungi Undang-undang.",
|
||||
"feedback": "Masukan",
|
||||
"contact": "Hubungi Kami",
|
||||
"privacy": "Kebijakan Privacy",
|
||||
"follow": "Ikuti Kami",
|
||||
"save": "Simpan",
|
||||
"timeTable": "Jadwal",
|
||||
"monday": "Senin",
|
||||
"tuesday": "Selasa",
|
||||
"wednesday": "Rabu",
|
||||
"thursday": "Kamis",
|
||||
"friday": "Jumat",
|
||||
"saturday": "Sabtu",
|
||||
"sunday": "Minggu",
|
||||
"todaySchedule": "Jadwal Hari Ini",
|
||||
"previousSchedule": "Jadwal Sebelumnya",
|
||||
"speaker": "Pembicara :",
|
||||
"nextSchedule": "Jadwal Selanjutnya",
|
||||
"by": "Oleh",
|
||||
"updatedOn": "Diupdate pada",
|
||||
"creator": "Kreator :",
|
||||
"delete": "Hapus",
|
||||
"imageSize": "Opsi Ukuran Poto",
|
||||
"downloadAll": "Download Semua File?",
|
||||
"share": "Bagikan",
|
||||
"shareTo": "Bagikan ke Email",
|
||||
"destinationEmail": "Email Tujuan :",
|
||||
"pressEnter": "Tekan Enter untuk Input Email",
|
||||
"send": "Kirim",
|
||||
"comment": "Berikan Komentar",
|
||||
"leaveComment": "Tinggalkan Komentar anda di sini",
|
||||
"reply": "Balas",
|
||||
"cancel": "Batal",
|
||||
"videoSize": "Opsi Ukuran Audio Visual",
|
||||
"enterReply": "Masukkan balasan Anda"
|
||||
},
|
||||
"FilterPage": {
|
||||
"image": "Foto",
|
||||
|
|
|
|||
Loading…
Reference in New Issue