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

fix landing

This commit is contained in:
Rama Priyanto 2025-02-17 17:01:58 +07:00
parent f7793d5f61
commit 1e60384a47
13 changed files with 230 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/landing/CategorySatker.tsx
View File

@ -322,9 +322,9 @@ export default function CategorySatker() {
}; };
return ( return (
<div className="text-center bg-[#DD8306] rounded-md h-auto lg:h-[338px] space-y-0 py-4 md:space-y-7 flex flex-col justify-center"> <div className="text-center bg-gradient-to-b from-red-900 via-red-700 to-[#bb3523] rounded-md h-auto lg:h-[338px] space-y-0 py-4 md:space-y-7 flex flex-col justify-center">
<div className="text-xl text-white w-full justify-center flex"> <div className="text-xl text-white w-full justify-center flex">
<p className="border-b-3 border-[#C3170F] py-2 w-fit"> <p className="border-b-3 border-white py-2 w-fit">
{" "} {" "}
{t("kategoriSatker")} {t("kategoriSatker")}
</p> </p>

4
components/landing/Footer.tsx
View File

@ -133,7 +133,7 @@ export default function Footer() {
</div> </div>
</div> </div>
<Link href={`/auth`}> <Link href={`/auth`}>
<Button className="mt-1 bg-[#DD8306] text-white"> <Button className="mt-1 bg-[#bb3523] text-white">
Kontributor Wilayah Kontributor Wilayah
</Button> </Button>
</Link> </Link>
@ -255,7 +255,7 @@ export default function Footer() {
</div> </div>
</div> </div>
<Link href={`/auth`}> <Link href={`/auth`}>
<Button className="mt-1 bg-[#DD8306] text-white"> <Button className="mt-1 bg-[#bb3523] text-white ">
Kontributor Wilayah Kontributor Wilayah
</Button> </Button>
</Link> </Link>

83
components/landing/HeaderNews.tsx
View File

@ -27,16 +27,37 @@ export default function HeaderNews() {
const [article, setArticle] = useState<any>([]); const [article, setArticle] = useState<any>([]);
const t = useTranslations("Landing"); const t = useTranslations("Landing");
const [selectedTab, setSelectedTab] = useState("media"); const [selectedTab, setSelectedTab] = useState("media");
const [hotNews, setHotNews] = useState<any>([]);
// useEffect(() => {
// }, []);
useEffect(() => { useEffect(() => {
async function getArticle() {
const req = { page: 1, search: "", limit: "10" };
const response = await getListArticle(req);
setArticle(response?.data?.data);
}
getArticle(); getArticle();
getHotNews();
}, []); }, []);
async function getArticle() {
const req = { page: 1, search: "", limit: "10", sort: "desc" };
const response = await getListArticle(req);
setArticle(response?.data?.data);
}
async function getHotNews() {
const req = {
page: 1,
search: "",
limit: "10",
sortBy: "view_count",
sort: "desc",
};
const response = await getListArticle(req);
setHotNews(response?.data?.data);
console.log("sadadasdasd", response?.data?.data);
}
return ( return (
<div className="flex flex-col lg:flex-row gap-3 lg:gap-8 bg-white p-1 lg:p-8 lg:h-[70vh]"> <div className="flex flex-col lg:flex-row gap-3 lg:gap-8 bg-white p-1 lg:p-8 lg:h-[70vh]">
<div className="lg:hidden w-full h-full"> <div className="lg:hidden w-full h-full">
@ -113,7 +134,7 @@ export default function HeaderNews() {
{t("berita")} {t("berita")}
</p> </p>
<ScrollShadow hideScrollBar className="h-[34vh] lg:h-[53vh] "> <ScrollShadow hideScrollBar className="h-[34vh] lg:h-[53vh] ">
{article?.map((data: any, index: number) => ( {hotNews?.map((data: any, index: number) => (
<div <div
className="text-xs text-left m-2 p-2 dark:bg-[#1E1616] bg-white rounded-md flex flex-row gap-2" className="text-xs text-left m-2 p-2 dark:bg-[#1E1616] bg-white rounded-md flex flex-row gap-2"
key={data?.id} key={data?.id}
@ -159,7 +180,7 @@ export default function HeaderNews() {
<div className="m-2"> <div className="m-2">
<Link href="/news/all"> <Link href="/news/all">
<Button <Button
className="w-full bg-[#DD8306] text-white font-bold rounded-md focus:outline-none" className="w-full bg-gradient-to-r from-red-700 to-[#bb3523] text-white font-bold rounded-md focus:outline-none"
radius="none" radius="none"
> >
{t("semua")} {t("semua")}
@ -254,7 +275,7 @@ export default function HeaderNews() {
: "text-slate-300 cursor-pointer py-2" : "text-slate-300 cursor-pointer py-2"
} }
> >
Media Update {t("terkini")}
</a> </a>
<a <a
onClick={() => setSelectedTab("video")} onClick={() => setSelectedTab("video")}
@ -291,24 +312,46 @@ export default function HeaderNews() {
))} ))}
</ScrollShadow> </ScrollShadow>
<Button <Button
className="w-full bg-[#DD8306] text-white font-bold rounded-md focus:outline-none" className="w-full bg-gradient-to-r from-red-700 to-[#bb3523] text-white font-bold rounded-md focus:outline-none"
radius="none" radius="none"
> >
Lihat Semua Lihat Semua
</Button> </Button>
</div> </div>
) : ( ) : (
<div className="w-full"> <div className="lg:!h-[62vh] dark:bg-stone-800 bg-[#f0f0f0] dark:text-white text-black rounded-lg flex flex-col p-2 lg:p-8 gap-2 lg:gap-5">
<iframe <Link
width="100%" target="_blank"
height="410" href="https://www.youtube.com/watch?v=6_g_PyiFcNo"
src="https://www.youtube.com/embed/7oRcWfl9lxE?si=G_CZfXak_AiHjGzG" className="border-b-2 py-2 lg:py-4"
title="YouTube video player" >
frameBorder="0" IKLAN LAYANAN MASYARAKAT DIVHUMAS POLRI - POLRI PRESISI UNTUK
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" INDONESIA
referrerPolicy="strict-origin-when-cross-origin" </Link>
allowFullScreen <Link
></iframe> target="_blank"
href="https://www.youtube.com/watch?v=p0AJEwvJ7gU"
className="border-b-2 py-2 lg:py-4"
>
ILM DIVHUMAS POLRI - POLRI PRESISI MENGAWAL PROSES VAKSINASI UNTUK
MENGATASI PANDEMI COVID 19
</Link>
<Link
target="_blank"
href="https://www.youtube.com/watch?v=jaihQPjxcy4"
className="border-b-2 py-2 lg:py-4"
>
IKLAN LAYANAN MASYARAKAT DIVHUMAS POLRI - INDONESIA MENOLAK
RADIKALISME
</Link>
<Link
target="_blank"
href="https://www.youtube.com/watch?v=umPEo0FYTQk"
className="border-b-2 py-2 lg:py-4"
>
IKLAN LAYANAN MASYARAKAT DIVHUMAS POLRI - BHABINKAMTIBMAS SAHABAT
MASYARAKAT
</Link>
</div> </div>
)} )}
</div> </div>

26
components/landing/MedolUpdate.tsx
View File

@ -85,11 +85,15 @@ export default function MedolUpdate() {
<div className="bg-white text-black p-1 md:p-5 space-y-5"> <div className="bg-white text-black p-1 md:p-5 space-y-5">
<Tabs <Tabs
classNames={{ classNames={{
tabList: "bg-white shadow-lg border", tabList: "bg-white shadow-lg border p-2 rounded-md",
tabContent: "group-data-[selected=true]:text-[white] text-warning", tab: "group-data-[selected=true]:bg-[#bb3523] bg-white p-0 mx-2",
tabContent: [
"group-data-[selected=true]:text-[white] text-[#bb3523]",
"group-data-[selected=true]:bg-[#bb3523] bg-white rounded-md p-2",
],
}} }}
aria-label="Options" aria-label="Options"
color="warning" // color="[#bb3523]"
className="flex justify-center" className="flex justify-center"
selectedKey={selectedTab} selectedKey={selectedTab}
onSelectionChange={setSelectedTab} onSelectionChange={setSelectedTab}
@ -156,9 +160,9 @@ export default function MedolUpdate() {
<div className="text-center pt-6"> <div className="text-center pt-6">
<Link href="https://mediahub.polri.go.id" target="_blank"> <Link href="https://mediahub.polri.go.id" target="_blank">
<Button <Button
className="bg-white text-[#DD8306] font-bold w-56" className="bg-white text-[#bb3523] font-bold w-56"
size="sm" size="sm"
color="warning" color="danger"
variant="bordered" variant="bordered"
> >
{t("lebihBanyak")} {t("lebihBanyak")}
@ -226,9 +230,9 @@ export default function MedolUpdate() {
<div className="text-center pt-6"> <div className="text-center pt-6">
<Link href="https://tribratanews.polri.go.id" target="_blank"> <Link href="https://tribratanews.polri.go.id" target="_blank">
<Button <Button
className="bg-white text-[#DD8306] font-bold w-56" className="bg-white text-[#bb3523] font-bold w-56"
size="sm" size="sm"
color="warning" color="danger"
variant="bordered" variant="bordered"
> >
{t("lebihBanyak")} {t("lebihBanyak")}
@ -299,9 +303,9 @@ export default function MedolUpdate() {
<div className="text-center pt-6"> <div className="text-center pt-6">
<a href="https://inp.polri.go.id/" target="_blank"> <a href="https://inp.polri.go.id/" target="_blank">
<Button <Button
className="bg-white text-[#DD8306] font-bold w-56" className="bg-white text-[#bb3523] font-bold w-56"
size="sm" size="sm"
color="warning" color="danger"
variant="bordered" variant="bordered"
> >
{t("lebihBanyak")} {t("lebihBanyak")}
@ -321,9 +325,9 @@ export default function MedolUpdate() {
target="_blank" target="_blank"
> >
<Button <Button
className="bg-white text-[#DD8306] font-bold w-56" className="bg-white text-[#bb3523] font-bold w-56"
size="sm" size="sm"
color="warning" color="danger"
variant="bordered" variant="bordered"
> >
{t("lebihBanyak")} {t("lebihBanyak")}

8
components/landing/NewsTicker.tsx
View File

@ -47,9 +47,9 @@ export default function NewsTicker() {
return ( return (
<div className="fixed bottom-0 z-50 flex flex-row h-[60px] gap-3 w-full justify-between dark:bg-stone-800 bg-gray-50"> <div className="fixed bottom-0 z-50 flex flex-row h-[60px] gap-3 w-full justify-between dark:bg-stone-800 bg-gray-50">
<div className="relative px-4 py-2 font-semibold text-xs lg:text-sm flex items-center bg-amber-500 text-white w-[30%] lg:w-[10%]"> <div className="relative px-4 py-2 font-semibold text-xs lg:text-sm flex items-center bg-[#bb3523] text-white w-[30%] lg:w-[10%]">
<span className="mr-2"></span> BREAKING NEWS <span className="mr-2"></span> BREAKING NEWS
<div className="absolute right-0 top-0 h-full w-4 bg-amber-500 transform translate-x-full clipPath-triangle"></div> <div className="absolute right-0 top-0 h-full w-4 bg-[#bb3523] transform translate-x-full clipPath-triangle"></div>
</div> </div>
<div <div
className={`w-full px-5 py-1 flex flex-col gap-1 transition-transform duration-300 ${ className={`w-full px-5 py-1 flex flex-col gap-1 transition-transform duration-300 ${
@ -78,13 +78,13 @@ export default function NewsTicker() {
</div> </div>
<div className="flex flex-row text-white h-full gap-[1px]"> <div className="flex flex-row text-white h-full gap-[1px]">
<a <a
className="bg-amber-500 h-full flex items-center" className="bg-[#bb3523] h-full flex items-center"
onClick={() => handlePrev()} onClick={() => handlePrev()}
> >
<ChevronLeftIcon /> <ChevronLeftIcon />
</a> </a>
<a <a
className="bg-amber-500 h-full flex items-center" className="bg-[#bb3523] h-full flex items-center"
onClick={() => handleNext()} onClick={() => handleNext()}
> >
<ChevronRightIcon /> <ChevronRightIcon />

7
components/landing/PolriApps.tsx
View File

@ -193,12 +193,9 @@ export default function PolriApps() {
}; };
return ( return (
<div className="text-center rounded-md lg:rounded-lg h-auto lg:h-[338px] flex flex-col p-6 bg-[#DD8306]"> <div className="text-center rounded-md lg:rounded-lg h-auto lg:h-[338px] flex flex-col p-6 bg-gradient-to-b from-red-900 via-red-700 to-[#bb3523]">
<div className="text-xl text-white w-full justify-center flex"> <div className="text-xl text-white w-full justify-center flex">
<p className="border-b-3 border-[#C3170F] py-2 w-fit"> <p className="border-b-3 border-white py-2 w-fit"> {t("aplikasi")}</p>
{" "}
{t("aplikasi")}
</p>
</div> </div>
<div className="flex items-center justify-around py-10"> <div className="flex items-center justify-around py-10">
{/* <div> {/* <div>

4
components/landing/RegionalNews.tsx
View File

@ -305,9 +305,9 @@ export default function RegionalNews() {
}; };
return ( return (
<div className="text-center rounded-md lg:rounded-lg h-auto lg:h-[338px] flex flex-col p-6 bg-[#DD8306]"> <div className="text-center rounded-md lg:rounded-lg h-auto lg:h-[338px] flex flex-col p-6 bg-gradient-to-b from-red-900 via-red-700 to-[#bb3523]">
<div className="text-xl text-white w-full justify-center flex"> <div className="text-xl text-white w-full justify-center flex">
<p className="border-b-3 border-[#C3170F] py-2 w-fit"> <p className="border-b-3 border-white py-2 w-fit">
{" "} {" "}
{t("beritaWilayah")} {t("beritaWilayah")}
</p> </p>

164
components/layout/navbar/NavbarHumas.tsx
View File

@ -412,91 +412,7 @@ export default function NavbarHumas(props: { size: string }) {
> >
E-PPID E-PPID
</Link> </Link>
<Dropdown {/* <Dropdown
className=" dark:bg-[#1F1A17]"
onOpenChange={(state) => setIsOpen(state)}
>
<NavbarItem>
<DropdownTrigger>
<Button
disableRipple
className="p-0 bg-transparent data-[hover=true]:bg-transparent text-medium font font-semibold"
radius="sm"
variant="light"
endContent={<ChevronDownIcon className="pt-1" />}
>
{t("informasi_publik")}
</Button>
</DropdownTrigger>
</NavbarItem>
<DropdownMenu
// aria-label="tentang"
title={t("tentang")}
className="pt-4"
classNames={{
// base: "flex",
// list: "border-2 gap-2 flex flex-row flex-wrap"
list: "gap-2 flex flex-row flex-wrap",
}}
itemClasses={{
// base: "border border-red-700 w-[350px]"
base: "w-[350px]",
}}
>
<DropdownItem key={"humas"}>
<Link
href="/static/humas-polri"
className="flex justify-between"
>
{t("tentang")} Humas POLRI
<ChevronRightIcon />
</Link>
</DropdownItem>
<DropdownItem key={"profil"}>
<Link
href="/static/profile-kapolri"
className="flex justify-between"
>
{t("profilPimpinan")}
<ChevronRightIcon />
</Link>
</DropdownItem>
<DropdownItem key={"struktur"}>
<Link
href="/static/struktur-mabes"
className="flex justify-between"
>
{t("strukturOrganisasi")}
<ChevronRightIcon />
</Link>
</DropdownItem>
<DropdownItem key={"visimisi"}>
<Link
href="/static/visi-misi-polri"
className="flex justify-between"
>
{t("visi")} & {t("misi")}
<ChevronRightIcon />
</Link>
</DropdownItem>
<DropdownItem key={"fungsi"}>
<Link
href="/static/tugas-dan-fungsi-polri"
className="flex justify-between"
>
{t("tugas")} & {t("fungsi")}
<ChevronRightIcon />
</Link>
</DropdownItem>
<DropdownItem key={"logo"}>
<Link href="/static/logo" className="flex justify-between">
Logo
<ChevronRightIcon />
</Link>
</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown
className=" dark:bg-[#1F1A17]" className=" dark:bg-[#1F1A17]"
onOpenChange={(state) => setIsOpen(state)} onOpenChange={(state) => setIsOpen(state)}
> >
@ -579,6 +495,84 @@ export default function NavbarHumas(props: { size: string }) {
</Link> </Link>
</DropdownItem> </DropdownItem>
</DropdownMenu> </DropdownMenu>
</Dropdown> */}
<Dropdown
className=" dark:bg-[#1F1A17]"
onOpenChange={(state) => setIsOpen(state)}
>
<NavbarItem>
<DropdownTrigger>
<Button
disableRipple
className="p-0 bg-transparent data-[hover=true]:bg-transparent text-medium font font-semibold"
radius="sm"
variant="light"
endContent={<ChevronDownIcon className="pt-1" />}
>
{t("informasi_publik")}
</Button>
</DropdownTrigger>
</NavbarItem>
<DropdownMenu
// aria-label="tentang"
title={t("tentang")}
className="pt-4"
classNames={{
// base: "flex",
// list: "border-2 gap-2 flex flex-row flex-wrap"
list: "gap-2 flex flex-row flex-wrap",
}}
itemClasses={{
// base: "border border-red-700 w-[350px]"
base: "w-[350px]",
}}
>
<DropdownItem key={"humas"}>
<Link
href="https://eppid.polri.go.id/informasi-publik/informasi-berkala"
className="flex justify-between"
>
Informasi Berkala
<ChevronRightIcon />
</Link>
</DropdownItem>
<DropdownItem key={"profil"}>
<Link
href="https://eppid.polri.go.id/informasi-publik/informasi-serta-merta"
className="flex justify-between"
>
Informasi Serta Merta
<ChevronRightIcon />
</Link>
</DropdownItem>
<DropdownItem key={"struktur"}>
<Link
href="https://eppid.polri.go.id/informasi-publik/informasi-setiap-saat"
className="flex justify-between"
>
Informasi Setiap Saat
<ChevronRightIcon />
</Link>
</DropdownItem>
<DropdownItem key={"visimisi"}>
<Link
href="https://eppid.polri.go.id/informasi-publik/informasi-dikecualikan"
className="flex justify-between"
>
Informasi Dikecualikan
<ChevronRightIcon />
</Link>
</DropdownItem>
<DropdownItem key={"fungsi"}>
<Link
href="https://sisdivkum.id/library/peraturan-kepolisian"
className="flex justify-between"
>
UU & Peraturan
<ChevronRightIcon />
</Link>
</DropdownItem>
</DropdownMenu>
</Dropdown> </Dropdown>
<Dropdown <Dropdown
className=" dark:bg-[#1F1A17]" className=" dark:bg-[#1F1A17]"

84
config/site.ts
View File

@ -112,61 +112,57 @@ export const siteConfig = {
label: "informasi_publik", label: "informasi_publik",
submenu: [ submenu: [
{ {
label: "Humas Polri", label: "Informasi Berkala",
href: "/static/humas-polri", href: "https://eppid.polri.go.id/informasi-publik/informasi-berkala",
}, },
{ {
label: "Profil Pimpinan Polri", label: "Informasi Serta Merta",
href: "/static/profile-kapolri", href: "https://eppid.polri.go.id/informasi-publik/informasi-serta-merta",
}, },
{ {
label: "Struktur Organisasi", label: "Informasi Setiap Saat",
href: "/static/struktur-mabes", href: "https://eppid.polri.go.id/informasi-publik/informasi-setiap-saat",
}, },
{ {
label: "Visi & Misi", label: "Informasi Dikecualikan",
href: "/static/visi-misi-polri", href: "https://eppid.polri.go.id/informasi-publik/informasi-dikecualikan",
}, },
{ {
label: "Tugas & Fungsi", label: "UU & Peraturan",
href: "/static/tugas-dan-fungsi-polri", href: "https://sisdivkum.id/library/peraturan-kepolisian",
},
{
label: "Logo",
href: "/static/logo",
},
],
},
{
key: "publication",
label: "publikasi",
submenu: [
{
label: "Humas Polri",
href: "/static/humas-polri",
},
{
label: "Profil Pimpinan Polri",
href: "/static/profile-kapolri",
},
{
label: "Struktur Organisasi",
href: "/static/struktur-mabes",
},
{
label: "Visi & Misi",
href: "/static/visi-misi-polri",
},
{
label: "Tugas & Fungsi",
href: "/static/tugas-dan-fungsi-polri",
},
{
label: "Logo",
href: "/static/logo",
}, },
], ],
}, },
// {
// key: "publication",
// label: "publikasi",
// submenu: [
// {
// label: "Humas Polri",
// href: "/static/humas-polri",
// },
// {
// label: "Profil Pimpinan Polri",
// href: "/static/profile-kapolri",
// },
// {
// label: "Struktur Organisasi",
// href: "/static/struktur-mabes",
// },
// {
// label: "Visi & Misi",
// href: "/static/visi-misi-polri",
// },
// {
// label: "Tugas & Fungsi",
// href: "/static/tugas-dan-fungsi-polri",
// },
// {
// label: "Logo",
// href: "/static/logo",
// },
// ],
// },
{ {
key: "about", key: "about",
label: "tentang", label: "tentang",

4
messages/en.json
View File

@ -33,7 +33,9 @@
"SatuData": "Satu Data" "SatuData": "Satu Data"
}, },
"Landing": { "Landing": {
"berita": "Breaking News", "berita": "Hot Topic",
"terkini": "Breaking News",
"semua": "See All", "semua": "See All",
"lebihBanyak": "See More", "lebihBanyak": "See More",
"kategoriSatker": "Satker Cateogry", "kategoriSatker": "Satker Cateogry",

3
messages/id.json
View File

@ -32,7 +32,8 @@
"SatuData": "Satu Data" "SatuData": "Satu Data"
}, },
"Landing": { "Landing": {
"berita": "Berita Terkini", "berita": "Hot Topik",
"terkini": "Berita Terkini",
"semua": "Lihat Semua", "semua": "Lihat Semua",
"lebihBanyak": "Lihat Lebih Banyak", "lebihBanyak": "Lihat Lebih Banyak",
"kategoriSatker": "Kategori Satker", "kategoriSatker": "Kategori Satker",

17
service/article.ts
View File

@ -9,8 +9,17 @@ import Cookies from "js-cookie";
const token = Cookies.get("access_token"); const token = Cookies.get("access_token");
export async function getListArticle(props: PaginationRequest) { export async function getListArticle(props: PaginationRequest) {
const { page, limit, search, startDate, endDate, isPublish, category } = const {
props; page,
limit,
search,
startDate,
endDate,
isPublish,
category,
sortBy,
sort,
} = props;
const headers = { const headers = {
"content-type": "application/json", "content-type": "application/json",
}; };
@ -19,7 +28,9 @@ export async function getListArticle(props: PaginationRequest) {
isPublish === undefined ? "" : isPublish isPublish === undefined ? "" : isPublish
}&title=${search}&startDate=${startDate || ""}&endDate=${ }&title=${search}&startDate=${startDate || ""}&endDate=${
endDate || "" endDate || ""
}&category=${category || ""}`, }&category=${category || ""}&sortBy=${sortBy || "created_at"}&sort=${
sort || "asc"
}`,
headers headers
); );
} }

2
types/globals.tsx
View File

@ -63,4 +63,6 @@ export type PaginationRequest = {
endDate?: string; endDate?: string;
isPublish?: boolean; isPublish?: boolean;
category?: string; category?: string;
sortBy?: string;
sort?: string;
}; };