humas
/
web-humas-fe
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:use translation landing

This commit is contained in:
Rama Priyanto 2024-12-12 16:48:17 +07:00
parent 89c71a5acc
commit 6b0ee4cce5
9 changed files with 89 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/layout.tsx
View File

@ -28,19 +28,10 @@ import storedLanguage from "@/store/language-store";
// },
// };
export default function RootLayout({
children,
params,
}: {
children: ReactNode;
params: { locale: string };
}) {
// const { locale } = params;
export default function RootLayout({ children }: { children: ReactNode }) {
const [localeNow, setLocaleNow] = useState<string>("id");
const locale = storedLanguage((state) => state.locale);
// Load messages dynamically based on locale
// const messages = (await import(`../messages/${locale}.json`)).default;
useEffect(() => {
if (locale) {

10
components/landing/BannerHumas.tsx
View File

@ -1,6 +1,8 @@
import { useTranslations } from "next-intl";
import React from "react";
export default function BannerHumas() {
const t = useTranslations("Banner");
return (
<div className="bg-white relative text-white">
<img
@ -10,13 +12,9 @@ export default function BannerHumas() {
/>
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center w-full md:w-[75%]">
<p className="text-sm lg:text-4xl font-bold pb-1 md:pb-5">
TRANSPARANSI, PATISIPASI, DAN LAYANAN TERBAIK DARI POLRI UNTUK
INDONESIA
</p>
<p className="text-xs md:text-medium">
{`"Menyajikan Informasi Terpercaya dan Mendekatkan Polri dengan
Masyarakat"`}
{t("jumbotron")}
</p>
<p className="text-xs md:text-medium">{`"${t("phrase")}"`}</p>
</div>
</div>
);

10
components/landing/CategorySatker.tsx
View File

@ -13,12 +13,14 @@ import {
import { ChevronLeftWhite, ChevronRightWhite } from "../icons";
import React from "react";
import Link from "next/link";
import { useTranslations } from "next-intl";
export default function CategorySatker() {
const { isOpen, onOpen, onOpenChange } = useDisclosure();
const [scrollBehavior, setScrollBehavior] =
React.useState<ModalProps["scrollBehavior"]>("inside");
const [modalPlacement, setModalPlacement] = React.useState<any>("auto");
const t = useTranslations("Landing");
const list = [
{
@ -299,7 +301,7 @@ export default function CategorySatker() {
return (
<div className="text-center bg-[#DD8306] rounded-none md:rounded-lg h-auto lg:h-[338px] space-y-0 py-4 md:space-y-7 flex flex-col justify-center">
<div className="text-white font-bold text-2xl underline underline-offset-4 decoration-red-600">
Kategori Satker
{t("kategoriSatker")}
</div>
<div className="flex items-center justify-around">
<div>
@ -328,7 +330,7 @@ export default function CategorySatker() {
className="bg-white text-[#DD8306] font-bold"
size="sm"
>
Lihat Lebih Banyak
{t("lebihBanyak")}
</Button>
<Modal
isOpen={isOpen}
@ -345,7 +347,7 @@ export default function CategorySatker() {
{(onClose) => (
<>
<ModalHeader className="flex flex-col text-[#DD8306] items-center min-h text-3xl font-semibold">
Berita Wilayah
{t("kategoriSatker")}
</ModalHeader>
<ModalBody className="flex flex-row flex-wrap justify-center text-center">
{SatkerAll.map((item: any, index: any) => (
@ -368,7 +370,7 @@ export default function CategorySatker() {
</ModalBody>
<ModalFooter>
<Button color="danger" variant="light" onPress={onClose}>
Tutup
{t("tutup")}
</Button>
</ModalFooter>
</>

23
components/landing/Footer.tsx
View File

@ -2,8 +2,11 @@ import { Button } from "@nextui-org/button";
import { Input } from "@nextui-org/input";
import { MailIcon, SendIcon } from "../icons";
import Link from "next/link";
import { useTranslations } from "next-intl";
export default function Footer() {
const t2 = useTranslations("Navbar");
const t3 = useTranslations("LandingInformasiPublik");
return (
<div className="relative text-xs leading-4 md:leading-loose lg:leading-8 font-semibold ">
<div className="h-[650px] md:h-[720px] lg:h-auto bg-black">
@ -25,10 +28,12 @@ export default function Footer() {
<Link href="/kontak-kami">Kontak</Link>
</div>
<div className="pb-2 md:pb-0 flex flex-col gap-2">
<Link href="/static/humas-polri">Tentang PPID</Link>
<Link href="/static/profile-kapolri">Profil Pimpinan Polri</Link>
<Link href="/static/struktur-mabes">Struktur Organisasi</Link>
<Link href="/static/visi-misi-polri">Visi & Misi</Link>
<Link href="/static/humas-polri">{t2("tentang")} PPID</Link>
<Link href="/static/profile-kapolri">{t2("profilPimpinan")}</Link>
<Link href="/static/struktur-mabes">{t2("strukturOrganisasi")}</Link>
<Link href="/static/visi-misi-polri">
{t2("visi")} & {t2("misi")}
</Link>
<Link href="/static/logo">Logo</Link>
</div>
<div className="pb-2 md:pb-0 flex flex-col gap-2">
@ -36,31 +41,31 @@ export default function Footer() {
href="https://siberpresisi.com/informasi-publik/informasi-berkala"
target="_blank"
>
Informasi Berkala
{t3("InformasiBerkala")}
</Link>
<Link
href="https://siberpresisi.com/informasi-publik/informasi-serta-merta"
target="_blank"
>
Informasi Serta Merta
{t3("InformasiSertaMerta")}
</Link>
<Link
href="https://siberpresisi.com/informasi-publik/informasi-setiap-saat"
target="_blank"
>
Informasi Setiap Saat
{t3("InformasiSetiapSaat")}
</Link>
<Link
href="https://siberpresisi.com/informasi-publik/informasi-dikecualikan"
target="_blank"
>
Informasi Dikecualikan
{t3("InformasiDikecualikan")}
</Link>
<Link
href="https://sisdivkum.id/library/peraturan-kepolisian"
target="_blank"
>
UU & Peraturan
{t3("UUdanPeraturan")}
</Link>
{/* <Link href="#">Penerangan Satuan</Link> */}
</div>

6
components/landing/HeaderNews.tsx
View File

@ -11,9 +11,11 @@ import GPRKominfo from "../ui/social-media/gpr-kominfo";
import { useEffect, useState } from "react";
import { getListArticle } from "@/service/article";
import { convertDateFormat } from "@/utils/global";
import { useTranslations } from "next-intl";
export default function HeaderNews() {
const [article, setArticle] = useState<any>([]);
const t = useTranslations("Landing");
useEffect(() => {
async function getArticle() {
@ -28,7 +30,7 @@ export default function HeaderNews() {
<div className=" bg-[#1F1A17] gap-3 md:py-6 md:px-12 md:h-[700px]">
<div className="lg:flex items-center justify-center bg-white p-1 md:p-4 rounded-lg gap-3 md:h-[654px] md:w-fit md:mx-auto">
<div className="w-auto lg:w-[25%] p-2 bg-[#020101] text-white rounded-md mb-2 md:mb-0 md:h-[636px]">
<p className="text-lg font-bold h-10 text-center">Berita Terkini</p>
<p className="text-lg font-bold h-10 text-center">{t("berita")}</p>
<ScrollShadow hideScrollBar className="md:h-[530px] gap-3">
{article?.map((data: any) => (
<div
@ -53,7 +55,7 @@ export default function HeaderNews() {
className="w-full bg-[#DD8306] font-bold rounded-bl-md rounded-br-md focus:outline-none"
radius="none"
>
Lihat Semua
{t("semua")}
</Button>
</Link>
</div>

11
components/landing/MedolUpdate.tsx
View File

@ -22,6 +22,7 @@ import {
} from "@/service/third-party-service";
import { convertDateFormatNoTime } from "@/utils/global";
import PolriTvWidget from "../ui/social-media/polri-tv";
import { useTranslations } from "next-intl";
export default function MedolUpdate() {
const [selectedTab, setSelectedTab] = useState<any>("mediahub");
@ -29,6 +30,8 @@ export default function MedolUpdate() {
const [tbnUpdate, setTbnUpdate] = useState([]);
const [inpUpdate, setInpUpdate] = useState([]);
const t = useTranslations("Landing");
useEffect(() => {
if (selectedTab === "mediahub" && mediahubUpdate.length < 1) {
getMedihubUpdate();
@ -128,7 +131,7 @@ export default function MedolUpdate() {
color="warning"
variant="bordered"
>
Lihat Lebih Banyak
{t("lebihBanyak")}
</Button>
</Link>
</div>
@ -176,7 +179,7 @@ export default function MedolUpdate() {
color="warning"
variant="bordered"
>
Lihat Lebih Banyak
{t("lebihBanyak")}
</Button>
</Link>
</div>
@ -224,7 +227,7 @@ export default function MedolUpdate() {
color="warning"
variant="bordered"
>
Lihat Lebih Banyak
{t("lebihBanyak")}
</Button>
</a>
</div>
@ -246,7 +249,7 @@ export default function MedolUpdate() {
color="warning"
variant="bordered"
>
Lihat Lebih Banyak
{t("lebihBanyak")}
</Button>
</Link>
</div>

10
components/landing/RegionalNews.tsx
View File

@ -13,6 +13,7 @@ import {
import { ChevronLeftWhite, ChevronRightWhite } from "../icons";
import React, { useEffect, useState } from "react";
import Link from "next/link";
import { useTranslations } from "next-intl";
export default function RegionalNews() {
const [limitedData, setLimitedData] = useState<any>([]);
@ -20,6 +21,7 @@ export default function RegionalNews() {
const [scrollBehavior, setScrollBehavior] =
React.useState<ModalProps["scrollBehavior"]>("inside");
const [modalPlacement, setModalPlacement] = React.useState<any>("auto");
const t = useTranslations("Landing");
const listPolda = [
{
@ -294,7 +296,7 @@ export default function RegionalNews() {
return (
<div className="text-center border-3 border-[#DD8306] rounded-none md:rounded-lg h-auto lg:h-[338px] py-4 flex flex-col justify-around">
<div className="font-bold text-2xl underline underline-offset-4 decoration-red-600 text-[#DD8306]">
Berita Wilayah
{t("beritaWilayah")}
</div>
<div className="flex items-center justify-around">
<div>
@ -323,7 +325,7 @@ export default function RegionalNews() {
className="bg-[#DD8306] text-white font-bold"
size="sm"
>
Lihat Lebih Banyak
{t("lebihBanyak")}
</Button>
<Modal
isOpen={isOpen}
@ -342,7 +344,7 @@ export default function RegionalNews() {
{(onClose) => (
<>
<ModalHeader className="flex flex-col text-[#DD8306] items-center min-h mb- text-3xl font-semibold">
Berita Wilayah
{t("beritaWilayah")}
</ModalHeader>
<ModalBody className="flex flex-row flex-wrap justify-center text-center">
{listPoldaAll.map((item: any, index: any) => (
@ -367,7 +369,7 @@ export default function RegionalNews() {
</ModalBody>
<ModalFooter>
<Button color="danger" variant="light" onPress={onClose}>
Tutup
{t("tutup")}
</Button>
</ModalFooter>
</>

24
messages/en.json
View File

@ -10,5 +10,29 @@
"profilPimpinan": "Profile of The Police Leader",
"tugas": "Duties",
"fungsi": "Functions"
},
"Banner": {
"jumbotron": "TRANSPARENCY, PARTICIPATION, AND THE BEST SERVICES FROM POLRI FOR INDONESIA",
"phrase": "Providing Trusted Information and Bringing Polri Closer to the Community"
},
"Footer": {},
"LandingInformasiPublik": {
"InformasiPublik": "Public Information",
"InformasiSertaMerta": "Immediate Information",
"InformasiBerkala": "Periodic Information",
"InformasiSetiapSaat": "Information on Request",
"InformasiDikecualikan": "Excluded Information",
"LayananPolriDigital": "Digital Polri Services",
"UUdanPeraturan": "Laws and Segulations",
"Pusiknas": "Pusiknas",
"SatuData": "Satu Data"
},
"Landing": {
"berita": "Breaking News",
"semua": "See All",
"lebihBanyak": "See More",
"kategoriSatker": "Satker Cateogry",
"beritaWilayah": "Regional News",
"tutup": "Close"
}
}

23
messages/id.json
View File

@ -10,5 +10,28 @@
"profilPimpinan": "Profil Pimpinan Polri",
"tugas": "Tugas",
"fungsi": "Fungsi"
},
"Banner": {
"jumbotron": "TRANSPARANSI, PATISIPASI, DAN LAYANAN TERBAIK DARI POLRI UNTUK INDONESIA",
"phrase": "Menyajikan Informasi Terpercaya dan Mendekatkan Polri dengan Masyarakat"
},
"LandingInformasiPublik": {
"InformasiPublik": "Informasi Publik",
"InformasiSertaMerta": "Informasi Serta Merta",
"InformasiBerkala": "Informasi Berkala",
"InformasiSetiapSaat": "Informasi Setiap Saat",
"InformasiDikecualikan": "Informasi Dikecualikan",
"LayananPolriDigital": "Layanan Polri Digital",
"UUdanPeraturan": "UU & Peraturan",
"Pusiknas": "Pusiknas",
"SatuData": "Satu Data"
},
"Landing": {
"berita": "Berita Terkini",
"semua": "Lihat Semua",
"lebihBanyak": "Lihat Lebih Banyak",
"kategoriSatker": "Kategori Satker",
"beritaWilayah": "Berita Wilayah",
"tutup": "Tutup"
}
}