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

fixing landing

This commit is contained in:
Rama Priyanto 2025-01-14 22:30:13 +07:00
parent 921fd247d4
commit 6b93b8b79f
18 changed files with 512 additions and 337 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/icons.tsx
View File

@ -662,19 +662,19 @@ export const EyeIcon = ({
height = 24, height = 24,
width = 14, width = 14,
fill = "currentColor", fill = "currentColor",
color = "black",
...props ...props
}: IconSvgProps) => ( }: IconSvgProps) => (
<svg <svg
width="14" width={size || width}
height="14" height={size || width}
viewBox="0 0 14 14" viewBox="0 0 14 14"
fill="none" fill={fill}
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
{...props}
> >
<path <path
d="M6.99992 5.25C6.53579 5.25 6.09067 5.43437 5.76248 5.76256C5.43429 6.09075 5.24992 6.53587 5.24992 7C5.24992 7.46413 5.43429 7.90925 5.76248 8.23744C6.09067 8.56563 6.53579 8.75 6.99992 8.75C7.46405 8.75 7.90917 8.56563 8.23736 8.23744C8.56554 7.90925 8.74992 7.46413 8.74992 7C8.74992 6.53587 8.56554 6.09075 8.23736 5.76256C7.90917 5.43437 7.46405 5.25 6.99992 5.25ZM6.99992 9.91667C6.22637 9.91667 5.4845 9.60938 4.93752 9.06239C4.39054 8.51541 4.08325 7.77355 4.08325 7C4.08325 6.22645 4.39054 5.48459 4.93752 4.93761C5.4845 4.39062 6.22637 4.08333 6.99992 4.08333C7.77347 4.08333 8.51533 4.39062 9.06231 4.93761C9.60929 5.48459 9.91658 6.22645 9.91658 7C9.91658 7.77355 9.60929 8.51541 9.06231 9.06239C8.51533 9.60938 7.77347 9.91667 6.99992 9.91667ZM6.99992 2.625C4.08325 2.625 1.59242 4.43917 0.583252 7C1.59242 9.56083 4.08325 11.375 6.99992 11.375C9.91658 11.375 12.4074 9.56083 13.4166 7C12.4074 4.43917 9.91658 2.625 6.99992 2.625Z" d="M6.99992 5.25C6.53579 5.25 6.09067 5.43437 5.76248 5.76256C5.43429 6.09075 5.24992 6.53587 5.24992 7C5.24992 7.46413 5.43429 7.90925 5.76248 8.23744C6.09067 8.56563 6.53579 8.75 6.99992 8.75C7.46405 8.75 7.90917 8.56563 8.23736 8.23744C8.56554 7.90925 8.74992 7.46413 8.74992 7C8.74992 6.53587 8.56554 6.09075 8.23736 5.76256C7.90917 5.43437 7.46405 5.25 6.99992 5.25ZM6.99992 9.91667C6.22637 9.91667 5.4845 9.60938 4.93752 9.06239C4.39054 8.51541 4.08325 7.77355 4.08325 7C4.08325 6.22645 4.39054 5.48459 4.93752 4.93761C5.4845 4.39062 6.22637 4.08333 6.99992 4.08333C7.77347 4.08333 8.51533 4.39062 9.06231 4.93761C9.60929 5.48459 9.91658 6.22645 9.91658 7C9.91658 7.77355 9.60929 8.51541 9.06231 9.06239C8.51533 9.60938 7.77347 9.91667 6.99992 9.91667ZM6.99992 2.625C4.08325 2.625 1.59242 4.43917 0.583252 7C1.59242 9.56083 4.08325 11.375 6.99992 11.375C9.91658 11.375 12.4074 9.56083 13.4166 7C12.4074 4.43917 9.91658 2.625 6.99992 2.625Z"
fill="white" fill="currentColor"
/> />
</svg> </svg>
); );

6
components/landing/BannerHumas.tsx
View File

@ -4,13 +4,13 @@ import React from "react";
export default function BannerHumas() { export default function BannerHumas() {
const t = useTranslations("Banner"); const t = useTranslations("Banner");
return ( return (
<div className="h-fit relative text-white mt-[-130px]"> <div className="h-fit relative text-white lg:mt-[-130px]">
<img <img
src="headerbanner1.png" src="headerbanner1.png"
alt="humasbanner" alt="humasbanner"
className="w-full relative" className="w-full relative h-[33vh] lg:h-auto object-cover"
/> />
<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%]"> <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center w-full lg:w-[75%]">
<p className="text-sm lg:text-[42px] lg:leading-10 font-bold pb-1 md:pb-5"> <p className="text-sm lg:text-[42px] lg:leading-10 font-bold pb-1 md:pb-5">
{t("jumbotron")} {t("jumbotron")}
</p> </p>

4
components/landing/BodyLayout.tsx
View File

@ -9,8 +9,8 @@ import SidebarNav from "./SidebarNav";
export default function BodyLayout() { export default function BodyLayout() {
return ( return (
<> <>
<div className="md:flex bg-white text-black pt-10 pb-8 px-2 md:px-4 lg:px-8 gap-9"> <div className="lg:flex bg-white text-black p-2 lg:p-8 gap-9">
<div className="w-auto md:w-[65%] lg:w-[75%] space-y-7 px-4"> <div className="lg:w-[75%] space-y-7">
{/* <MedolUpdate /> */} {/* <MedolUpdate /> */}
{/* <CategorySatker /> */} {/* <CategorySatker /> */}
<RegionalNews /> <RegionalNews />

35
components/landing/ENewsPolri.tsx
View File

@ -5,9 +5,13 @@ import { useEffect, useState } from "react";
import { ChevronLeftWhite, ChevronRightIcon, EyeIcon } from "../icons"; import { ChevronLeftWhite, ChevronRightIcon, EyeIcon } from "../icons";
import Link from "next/link"; import Link from "next/link";
import { getListArticle } from "@/service/article"; import { getListArticle } from "@/service/article";
import { convertDateFormat } from "@/utils/global"; import { convertDateFormat, textEllipsis } from "@/utils/global";
import { Autoplay, Pagination, Navigation } from "swiper/modules"; import { Autoplay, Pagination, Navigation } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react"; import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/effect-fade";
import "swiper/css/navigation";
export default function ENewsPolri() { export default function ENewsPolri() {
const [article, setArticle] = useState<any>([]); const [article, setArticle] = useState<any>([]);
@ -24,25 +28,23 @@ export default function ENewsPolri() {
}, []); }, []);
return ( return (
<div className="bg-[#1F1A17] text-center rounded-none md:rounded-lg h-auto flex py-4 flex-col justify-between items-center"> <div className="bg-[#1F1A17] text-center md:rounded-lg h-auto flex py-4 flex-col justify-between items-center rounded-md">
<p className="text-white border-b-3 border-red-500 py-2 mb-3 text-xl"> <p className="text-white border-b-3 border-red-500 py-2 mb-3 text-xl">
E-Majalah Polri E-Majalah Polri
</p> </p>
<div className="w-screen lg:w-[90%]"> <div className="w-[90vw] lg:w-[90%]">
<div> <div>
<Swiper <Swiper
centeredSlides={false} centeredSlides={false}
spaceBetween={10}
autoplay={{ autoplay={{
delay: 5000, delay: 5000,
disableOnInteraction: false, disableOnInteraction: false,
}} }}
pagination={{
clickable: true,
}}
navigation={true} navigation={true}
modules={[Autoplay, Pagination, Navigation]} modules={[Autoplay, Navigation]}
className="mySwiper gap-3" className="mySwiper"
slidesPerView={1} slidesPerView={1}
breakpoints={{ breakpoints={{
// When the window width is less than 640px // When the window width is less than 640px
@ -54,26 +56,23 @@ export default function ENewsPolri() {
{article?.map((newsItem: any) => ( {article?.map((newsItem: any) => (
<SwiperSlide key={newsItem.id}> <SwiperSlide key={newsItem.id}>
<Card isFooterBlurred radius="lg" className="border-none"> <Card isFooterBlurred radius="lg" className="border-none">
<Image <img
alt="headernews" alt="headernews"
className="object-cover"
height={660}
src="/headernews.png" src="/headernews.png"
width={460} className="h-[25vh] object-cover rounded-none"
layout="responsive"
/> />
<CardFooter className="before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 md:absolute before:rounded-xl rounded-large bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10"> <CardFooter className="before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 md:absolute bottom-1 shadow-small z-10">
<div className="text-white"> <div className="text-black dark:text-white">
<Link href={`news/detail/${newsItem.id}`}> <Link href={`news/detail/${newsItem.id}`}>
<p className="text-left font-semibold"> <p className="text-left font-semibold text-sm">
{newsItem.title} {textEllipsis(newsItem.title, 40)}
</p> </p>
</Link> </Link>
<p className="py-[2px] text-left text-sm"> <p className="py-[2px] text-left text-sm">
{convertDateFormat(newsItem.createdAt)} WIB {convertDateFormat(newsItem.createdAt)} WIB
</p> </p>
<p className="flex items-center gap-1 text-sm"> <p className="flex items-center gap-1 text-sm">
<EyeIcon /> <EyeIcon className="text-black dark:text-white" />
{newsItem.viewCount === null ? 0 : newsItem.viewCount} {newsItem.viewCount === null ? 0 : newsItem.viewCount}
</p> </p>
</div> </div>

127
components/landing/Footer.tsx
View File

@ -9,14 +9,14 @@ export default function Footer() {
const t3 = useTranslations("LandingInformasiPublik"); const t3 = useTranslations("LandingInformasiPublik");
return ( return (
<div className="relative text-xs leading-4 md:leading-loose lg:leading-8 font-semibold "> <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"> <div className="h-[500px] md:h-[720px] lg:h-auto bg-black">
<img <img
src="/assets/Footer.jpg" src="/assets/Footer.jpg"
alt="" alt=""
className="w-full h-full object-cover object-left-top opacity-80" className="w-full h-full object-cover object-left-top opacity-80"
/> />
</div> </div>
<div className="absolute top-0 left-0 w-full grid grid-cols-3 md:grid-cols-3 lg:grid-cols-7 gap-5 md:gap-4 px-1 md:px-10 lg:px-20 pt-5 md:pt-16 pb-5 md:pb-20 text-white"> <div className="hidden md:grid absolute top-0 left-0 w-full grid-cols-3 md:grid-cols-3 lg:grid-cols-7 gap-5 md:gap-4 px-2 md:px-10 lg:px-20 pt-5 md:pt-16 pb-5 md:pb-20 text-white">
<div className="pb-2 md:pb-0 flex flex-col gap-2"> <div className="pb-2 md:pb-0 flex flex-col gap-2">
<Link href="/">Berita Terkini</Link> <Link href="/">Berita Terkini</Link>
<Link href="https://www.kpai.go.id/" target="_blank"> <Link href="https://www.kpai.go.id/" target="_blank">
@ -137,6 +137,129 @@ export default function Footer() {
</Link> </Link>
</div> </div>
</div> </div>
<div className="grid grid-cols-2 justify-center md:hidden absolute top-0 left-0 w-full gap-5 md:gap-4 px-2 md:px-10 lg:px-20 pt-5 md:pt-16 pb-5 md:pb-20 text-white">
<div className="pb-2 md:pb-0 flex flex-col gap-2">
<Link href="/">Berita Terkini</Link>
<Link href="https://www.kpai.go.id/" target="_blank">
Info Komnas Anak
</Link>
<Link href="https://komnasperempuan.go.id/" target="_blank">
Info Komnas Perempuan
</Link>
<Link href="/kontak-kami">Kontak</Link>
</div>
<div className="pb-2 md:pb-0 flex flex-col gap-2">
<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">
<Link href="https://sp2hp.bareskrim.polri.go.id/" target="_blank">
SP2HP
</Link>
<Link href="/form-permohonan-informasi">
Formulir Permohonan Informasi
</Link>
<Link href="https://www.digitalkorlantas.id/sim/" target="_blank">
Pelayanan SIM
</Link>
<Link href="https://erikkes.id/" target="_blank">
Pelayanan E-Rikkes SIM
</Link>
<Link href="https://eppsi.id/" target="_blank">
Pelayana Test Psikologi SIM
</Link>
<Link href="https://e-avis.korlantas.polri.go.id/" target="_blank">
Pelayanan E-Avis
</Link>
<Link href="https://samsatdigital.id/" target="_blank">
Pelayanan STNK & BPKP
</Link>
<Link href="https://play.google.com/store/apps/details?id=superapps.polri.presisi.presisi&hl=en_US">
Pelayanan SKCK
</Link>
{/* <Link href="#">Pelayanan Karantina Presisi</Link> */}
<Link
href="https://play.google.com/store/apps/details?id=com.stk.pengaduanpropam"
target="_blank"
>
Pelayanan Propam Presisi
</Link>
<Link href="https://dumaspresisi.polri.go.id/" target="_blank">
Pelayanan Dumas Presisi
</Link>
<Link href="https://polisiku.co.id/" target="_blank">
Pelayanan Polisiku
</Link>
<Link href="https://bos.polri.go.id/login" target="_blank">
Pelayanan BINMAS
</Link>
</div>
<div className="flex flex-col gap-2">
<div className="pb-2 md:pb-0 flex flex-col gap-2">
<Link
href="https://siberpresisi.com/informasi-publik/informasi-berkala"
target="_blank"
>
{t3("InformasiBerkala")}
</Link>
<Link
href="https://siberpresisi.com/informasi-publik/informasi-serta-merta"
target="_blank"
>
{t3("InformasiSertaMerta")}
</Link>
<Link
href="https://siberpresisi.com/informasi-publik/informasi-setiap-saat"
target="_blank"
>
{t3("InformasiSetiapSaat")}
</Link>
<Link
href="https://siberpresisi.com/informasi-publik/informasi-dikecualikan"
target="_blank"
>
{t3("InformasiDikecualikan")}
</Link>
<Link
href="https://sisdivkum.id/library/peraturan-kepolisian"
target="_blank"
>
{t3("UUdanPeraturan")}
</Link>
{/* <Link href="#">Penerangan Satuan</Link> */}
</div>
<div className="w-min lg:w-max">
<p className="text-xl font-bold">Subscribe</p>
<p>Dapatkan info & event terupdate dari kami.</p>
<div className="flex ">
<Input
label="Email"
placeholder="Email Anda"
className="rounded-none mt-2"
classNames={{
inputWrapper: "rounded-none rounded-l-lg",
}}
// startContent={
// <MailIcon className="text-xl text-default-400 pointer-events-none flex-shrink-0" />
// }
/>
<div className="bg-[#C3160F] flex items-center justify-center w-16 rounded-r-lg cursor-pointer">
<SendIcon />
</div>
</div>
<Link href={`/auth`}>
<Button className="mt-1 bg-[#DD8306] text-white">
Kontributor Wilayah
</Button>
</Link>
</div>
</div>
</div>
<div className="dark:bg-black text-black dark:text-white text-center py-3 text-xs md:text-medium flex justify-center font-normal"> <div className="dark:bg-black text-black dark:text-white text-center py-3 text-xs md:text-medium flex justify-center font-normal">
&copy; Copyright Humas<p className="text-red-700">&nbsp; POLRI &reg;</p> &copy; Copyright Humas<p className="text-red-700">&nbsp; POLRI &reg;</p>
&nbsp; All Rights Reserved &nbsp; All Rights Reserved

166
components/landing/HeaderNews.tsx
View File

@ -5,12 +5,14 @@ import { EyeIcon } from "../icons";
import { Swiper, SwiperSlide } from "swiper/react"; import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css"; import "swiper/css";
import "swiper/css/pagination"; import "swiper/css/pagination";
import "swiper/css/effect-fade";
import "swiper/css/navigation";
import { Autoplay, Pagination, Navigation } from "swiper/modules"; import { Autoplay, Pagination, Navigation } from "swiper/modules";
import Link from "next/link"; import Link from "next/link";
import GPRKominfo from "../ui/social-media/gpr-kominfo"; import GPRKominfo from "../ui/social-media/gpr-kominfo";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { getListArticle } from "@/service/article"; import { getListArticle } from "@/service/article";
import { convertDateFormat } from "@/utils/global"; import { convertDateFormat, textEllipsis } from "@/utils/global";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
export default function HeaderNews() { export default function HeaderNews() {
@ -27,25 +29,72 @@ export default function HeaderNews() {
}, []); }, []);
return ( return (
<div className=" bg-[#1F1A17] gap-3 md:py-6 md:px-12 md:h-[700px]"> <div className="bg-[#1F1A17] p-2 lg:p-8">
<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="flex flex-col lg:flex-row gap-3 bg-white p-1 lg:p-3 rounded-lg lg:h-[70vh]">
<div className="w-auto lg:w-[25%] p-2 bg-[#020101] text-white rounded-md mb-2 md:mb-0 md:h-[636px]"> <div className="lg:hidden w-full h-full">
<Swiper
centeredSlides={true}
// autoplay={{
// delay: 5000,
// disableOnInteraction: false,
// }}
navigation={true}
modules={[Navigation]}
className="mySwiper"
>
{article?.map((newsItem: any) => (
<SwiperSlide key={newsItem.id}>
<Card isFooterBlurred radius="lg" className="border-none">
<img
alt="headernews"
src="/headernews.png"
className="h-[25vh] object-cover"
/>
<CardFooter className="before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 md:absolute before:rounded-xl rounded-large bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10">
<div className="text-black dark:text-white">
<Link href={`news/detail/${newsItem.id}`}>
<p className="text-left font-semibold">
{textEllipsis(newsItem.title, 40)}
</p>
</Link>
<p className="py-[2px] text-left text-sm">
{convertDateFormat(newsItem.createdAt)} WIB
</p>
<p className="flex items-center gap-1 text-sm">
<EyeIcon className="text-black dark:text-white" />
{newsItem.viewCount === null ? 0 : newsItem.viewCount}
</p>
</div>
</CardFooter>
</Card>
</SwiperSlide>
))}
</Swiper>
</div>
<div className="w-auto lg:w-[25%] p-2 bg-[#020101] text-white rounded-lg mb-2 md:mb-0 h-[50vh] lg:h-[67vh]">
<p className="text-lg font-bold h-10 text-center">{t("berita")}</p> <p className="text-lg font-bold h-10 text-center">{t("berita")}</p>
<ScrollShadow hideScrollBar className="md:h-[530px] gap-3"> <ScrollShadow hideScrollBar className="h-[34vh] lg:h-[53vh] gap-3">
{article?.map((data: any) => ( {article?.map((data: any) => (
<div <div
className="text-xs text-left m-2 p-2 bg-[#1E1616] rounded-md" className="text-xs text-left m-2 p-2 bg-[#1E1616] rounded-md flex flex-row gap-2"
key={data.id} key={data.id}
> >
<p>{data.title}</p> <img
<p className="py-[2px]"> alt="headernews"
{" "} src="/headernews.png"
{convertDateFormat(data.createdAt)} WIB className="object-cover w-[18%]"
</p> />
<p className="flex items-center gap-1"> <div>
<EyeIcon /> <p className="lg:hidden">{textEllipsis(data.title, 40)}</p>
{data.viewCount === null ? 0 : data.viewCount} <p className="hidden lg:block">{data.title}</p>
</p> <p className="py-[2px]">
{convertDateFormat(data.createdAt)} WIB
</p>
<p className="flex items-center gap-1">
<EyeIcon />
{data.viewCount === null ? 0 : data.viewCount}
</p>
</div>
</div> </div>
))} ))}
</ScrollShadow> </ScrollShadow>
@ -60,55 +109,48 @@ export default function HeaderNews() {
</Link> </Link>
</div> </div>
</div> </div>
<div className="w-auto lg:w-[910px] md:h-[636px]">
<div className="md:h-[636px]"> <div className="hidden lg:block w-full lg:w-[50%] h-full">
<Swiper <Swiper
centeredSlides={true} centeredSlides={true}
autoplay={{ autoplay={{
delay: 5000, delay: 5000,
disableOnInteraction: false, disableOnInteraction: false,
}} }}
pagination={{ navigation={true}
clickable: true, modules={[Autoplay, Navigation]}
}} className="mySwiper"
navigation={true} >
modules={[Autoplay, Pagination, Navigation]} {article?.map((newsItem: any) => (
className="mySwiper" <SwiperSlide key={newsItem.id}>
height={636} <Card isFooterBlurred radius="lg" className="border-none">
> <img
{article?.map((newsItem: any) => ( alt="headernews"
<SwiperSlide key={newsItem.id}> src="/headernews.png"
<Card isFooterBlurred radius="lg" className="border-none"> className="h-[67vh] object-cover"
<Image />
alt="headernews" <CardFooter className="before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 md:absolute before:rounded-xl rounded-large bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10">
height={400} <div className="text-white">
src="/headernews.png" <Link href={`news/detail/${newsItem.id}`}>
width={460} <p className="text-left font-semibold">
layout="responsive" {newsItem.title}
/>
<CardFooter className="before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 md:absolute before:rounded-xl rounded-large bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10">
<div className="text-white">
<Link href={`news/detail/${newsItem.id}`}>
<p className="text-left font-semibold">
{newsItem.title}
</p>
</Link>
<p className="py-[2px] text-left text-sm">
{convertDateFormat(newsItem.createdAt)} WIB
</p> </p>
<p className="flex items-center gap-1 text-sm"> </Link>
<EyeIcon /> <p className="py-[2px] text-left text-sm">
{newsItem.viewCount === null ? 0 : newsItem.viewCount} {convertDateFormat(newsItem.createdAt)} WIB
</p> </p>
</div> <p className="flex items-center gap-1 text-sm">
</CardFooter> <EyeIcon />
</Card> {newsItem.viewCount === null ? 0 : newsItem.viewCount}
</SwiperSlide> </p>
))} </div>
</Swiper> </CardFooter>
</div> </Card>
</SwiperSlide>
))}
</Swiper>
</div> </div>
<div className="w-auto lg:w-[25%] p-2 rounded-md text-white dark:text-black "> <div className="lg:w-[25%] rounded-md text-white dark:text-black ">
<GPRKominfo /> <GPRKominfo />
</div> </div>
</div> </div>

67
components/landing/MediaSocial.tsx
View File

@ -62,8 +62,14 @@ export default function MediaSocial() {
<TwitterIcon color="#1DA1F2" /> <TwitterIcon color="#1DA1F2" />
<p className="pl-2 text-xl">Twitter</p> <p className="pl-2 text-xl">Twitter</p>
</div> </div>
<div className="text-xs text-[#DD8306] flex items-center"> <div className="text-xs text-[#DD8306]">
Lihat Semua <ChevronRightIcon /> <Link
href="https://x.com/DivHumas_Polri"
target="_blank"
className="flex items-center"
>
Lihat Semua <ChevronRightIcon />
</Link>{" "}
</div> </div>
</div> </div>
<div> <div>
@ -79,6 +85,7 @@ export default function MediaSocial() {
<div className="text-xs text-[#DD8306]"> <div className="text-xs text-[#DD8306]">
<Link <Link
href="https://www.instagram.com/divisihumaspolri/" href="https://www.instagram.com/divisihumaspolri/"
target="_blank"
className="flex items-center" className="flex items-center"
> >
Lihat Semua <ChevronRightIcon /> Lihat Semua <ChevronRightIcon />
@ -96,7 +103,13 @@ export default function MediaSocial() {
<p className="pl-2 text-xl">Facebook</p> <p className="pl-2 text-xl">Facebook</p>
</div> </div>
<div className="text-xs text-[#DD8306] flex items-center"> <div className="text-xs text-[#DD8306] flex items-center">
Lihat Semua <ChevronRightIcon /> <Link
href="https://www.facebook.com/DivHumasPolri"
target="_blank"
className="flex items-center"
>
Lihat Semua <ChevronRightIcon />
</Link>
</div> </div>
</div> </div>
<FacebookWidget /> <FacebookWidget />
@ -108,48 +121,16 @@ export default function MediaSocial() {
<p className="pl-2 text-xl">Tiktok</p> <p className="pl-2 text-xl">Tiktok</p>
</div> </div>
<div className="text-xs text-[#DD8306] flex items-center"> <div className="text-xs text-[#DD8306] flex items-center">
Lihat Semua <ChevronRightIcon /> <Link
href="https://www.tiktok.com/@divhumaspolriofficial"
target="_blank"
className="flex items-center"
>
Lihat Semua <ChevronRightIcon />
</Link>{" "}
</div> </div>
</div> </div>
<div className="md:flex flex-wrap gap-4 justify-center"> <FacebookWidget />
{dummyData.map((data: any) => (
<div
key={data.id}
className="bg-white text-black h-[400px] w-auto md:w-[315px] border-2 rounded-md px-5 py-3"
>
<div className="h-[20%] flex items-center text-xs justify-between">
<div className="flex gap-2">
<div className="h-[50px]">
<img src={data.logo} alt="logo" className="h-[50px]" />
</div>
<div className="flex flex-col gap-1 justify-center">
<p className="flex gap-1">
{data.division} <img src={data.type} alt="" />
</p>
</div>
</div>
<div className="">
<div className="flex gap-1 text-blue-500">
<img src="/temp/share.svg" alt="" />
Share
</div>
</div>
</div>
<div className="h-[35%] text-xs">
{data.description}
<a className="text-blue-500">
<br />
Lihat Selengkapnya
</a>
</div>
<div className="h-[45%]">
<div className="flex justify-center">
<img src={data.imageUrl} alt="header" className="h-[165px]" />
</div>
</div>
</div>
))}
</div>
</div> </div>
<div> <div>
<div className="flex items-center justify-between pb-3"> <div className="flex items-center justify-between pb-3">

26
components/landing/NewsTicker.tsx
View File

@ -2,7 +2,8 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { ChevronLeftIcon, ChevronRightIcon } from "../icons"; import { ChevronLeftIcon, ChevronRightIcon } from "../icons";
import { getListArticle } from "@/service/article"; import { getListArticle } from "@/service/article";
import { convertDateFormat } from "@/utils/global"; import { convertDateFormat, textEllipsis } from "@/utils/global";
import Link from "next/link";
export default function NewsTicker() { export default function NewsTicker() {
const [article, setArticle] = useState<any>([]); const [article, setArticle] = useState<any>([]);
@ -46,16 +47,31 @@ export default function NewsTicker() {
return ( return (
<div className="fixed bottom-0 z-50 flex flex-row h-[60px] gap-3 w-full justify-between bg-stone-800"> <div className="fixed bottom-0 z-50 flex flex-row h-[60px] gap-3 w-full justify-between bg-stone-800">
<div className="relative px-4 py-2 font-semibold text-sm flex items-center bg-amber-500 text-white w-[10%]"> <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%]">
<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 clip-path-triangle"></div> <div className="absolute right-0 top-0 h-full w-4 bg-amber-500 transform translate-x-full clip-path-triangle"></div>
</div> </div>
<div <div
className={`w-full text-white px-5 py-1 flex flex-col gap-1 transition-transform duration-300 ${ className={`w-full text-white px-5 py-1 flex flex-col gap-1 transition-transform duration-300 ${
animate ? "opacity-0 translate-y-5" : "opacity-100 translate-y-0" animate ? "opacity-0 translate-y-5" : "opacity-100 translate-y-0"
}`} }`}
> >
<p>{article[currentNewsIndex]?.title}</p> <Link
href={`news/detail/${article[currentNewsIndex]?.id}`}
className="hidden lg:block"
>
<p className="text-sm lg:text-base">
{article[currentNewsIndex]?.title}
</p>
</Link>
<Link
href={`news/detail/${article[currentNewsIndex]?.id}`}
className="lg:hidden"
>
<p className="text-sm lg:text-base">
{textEllipsis(article[currentNewsIndex]?.title, 28)}
</p>
</Link>
<p className="text-xs"> <p className="text-xs">
{convertDateFormat(article[currentNewsIndex]?.createdAt)} {convertDateFormat(article[currentNewsIndex]?.createdAt)}
</p> </p>

2
components/landing/RegionalNews.tsx
View File

@ -294,7 +294,7 @@ export default function RegionalNews() {
// }, [list]); // }, [list]);
return ( return (
<div className="text-center rounded-none md: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-[#DD8306]">
<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-[#C3170F] py-2 w-fit">
{" "} {" "}

99
components/landing/SidebarNav.tsx
View File

@ -1,18 +1,31 @@
"use client"; "use client";
import { Button, LinkIcon, ScrollShadow } from "@nextui-org/react"; import { Button, LinkIcon, ScrollShadow } from "@nextui-org/react";
import React, { useState } from "react"; import React, { useEffect, useState } from "react";
import { EyeIcon } from "../icons"; import { EyeIcon } from "../icons";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { getListArticle } from "@/service/article";
import { convertDateFormat } from "@/utils/global";
export default function SidebarNav() { export default function SidebarNav() {
const [article, setArticle] = useState<any>([]);
const [selectedTab, setSelectedTab] = useState("media"); const [selectedTab, setSelectedTab] = useState("media");
const [article, setArticle] = useState<any>([]);
useEffect(() => {
async function getArticle() {
const req = { page: 1, search: "", limit: "10" };
const response = await getListArticle(req);
setArticle(response?.data?.data);
}
getArticle();
}, []);
return ( return (
<> <>
<div className="space-y-4 px-5"> <div className="space-y-4 px-1 lg:px-5">
<div className="text-[20px] flex flex-row gap-10"> <div className="text-[15px] flex flex-row gap-10">
<a <a
onClick={() => setSelectedTab("media")} onClick={() => setSelectedTab("media")}
className={ className={
@ -37,61 +50,23 @@ export default function SidebarNav() {
{selectedTab === "media" ? ( {selectedTab === "media" ? (
<div className="h-[410px] p-2 bg-[#020101] text-white rounded-md border-2 border-white"> <div className="h-[410px] p-2 bg-[#020101] text-white rounded-md border-2 border-white">
<ScrollShadow hideScrollBar className=" h-[345px]"> <ScrollShadow hideScrollBar className=" h-[345px]">
<div className="text-xs text-left m-2 p-2 bg-[#1E1616] rounded-md"> {article?.map((list: any) => (
<p> <div
Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan key={list.id}
Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari className="text-xs text-left m-2 p-2 bg-[#1E1616] rounded-md"
</p> >
<p className="py-[2px]">21-07-2023 13:50</p> <Link href={`news/detail/${list?.id}`}>
<p className="flex items-center gap-1"> <p className="text-left font-semibold">{list?.title}</p>
<EyeIcon /> </Link>
82 <p className="py-[2px] text-left text-xs">
</p> {convertDateFormat(list?.createdAt)} WIB
</div> </p>
<div className="text-xs text-left m-2 p-2 bg-[#1E1616] rounded-md"> <p className="flex items-center gap-1 text-xs">
<p> <EyeIcon />
Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan {list?.viewCount === null ? 0 : list?.viewCount}
Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari </p>
</p> </div>
<p className="py-[2px]">21-07-2023 13:50</p> ))}
<p className="flex items-center gap-1">
<EyeIcon />
82
</p>
</div>
<div className="text-xs text-left m-2 p-2 bg-[#1E1616] rounded-md">
<p>
Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan
Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari
</p>
<p className="py-[2px]">21-07-2023 13:50</p>
<p className="flex items-center gap-1">
<EyeIcon />
82
</p>
</div>
<div className="text-xs text-left m-2 p-2 bg-[#1E1616] rounded-md">
<p>
Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan
Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari
</p>
<p className="py-[2px]">21-07-2023 13:50</p>
<p className="flex items-center gap-1">
<EyeIcon />
82
</p>
</div>
<div className="text-xs text-left m-2 p-2 bg-[#1E1616] rounded-md">
<p>
Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan
Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari
</p>
<p className="py-[2px]">21-07-2023 13:50</p>
<p className="flex items-center gap-1">
<EyeIcon />
82
</p>
</div>
</ScrollShadow> </ScrollShadow>
<Button <Button
className="w-full bg-[#DD8306] text-white font-bold rounded-bl-md rounded-br-md focus:outline-none" className="w-full bg-[#DD8306] text-white font-bold rounded-bl-md rounded-br-md focus:outline-none"
@ -114,7 +89,7 @@ export default function SidebarNav() {
></iframe> ></iframe>
</div> </div>
)} )}
<p className="text-xl border-b-3 border-red-500 w-fit py-2"> <p className="text-[15px] border-b-3 border-red-500 w-fit py-2">
Pelayanan Informasi Publik Pelayanan Informasi Publik
</p> </p>
<img src="pelayanan-informasi-publik.png" className="w-full" /> <img src="pelayanan-informasi-publik.png" className="w-full" />
@ -251,11 +226,11 @@ export default function SidebarNav() {
</div> </div>
</div> */} </div> */}
</div> </div>
<p className="text-xl border-b-3 border-red-500 py-2 w-fit mx-5"> <p className="text-[15px] border-b-3 border-red-500 py-2 w-fit mx-1 lg:mx-5">
{" "} {" "}
Info Eksternal Info Eksternal
</p> </p>
<div className="flex flex-col mt-3 w-full px-5 gap-3"> <div className="flex flex-col mt-3 w-full px-2 lg:px-5 gap-3">
<div className="bg-white text-black text-sm border-2 rounded-md p-4 shadow-md"> <div className="bg-white text-black text-sm border-2 rounded-md p-4 shadow-md">
<img src="/eksternal1.png" alt="" className="w-full" /> <img src="/eksternal1.png" alt="" className="w-full" />
<p className="leading-tight text-blue-500 hover:text-blue-700 pt-3"> <p className="leading-tight text-blue-500 hover:text-blue-700 pt-3">

3
components/layout/humas-layout.tsx
View File

@ -10,7 +10,8 @@ interface Props {
export const HumasLayout = ({ children }: Props) => { export const HumasLayout = ({ children }: Props) => {
return ( return (
<section className="flex flex-col"> <section className="flex flex-col">
<NavbarHumas /> <NavbarHumas size="sm" />
<NavbarHumas size="lg" />
<NewsTicker /> <NewsTicker />
{children} {children}

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

@ -55,13 +55,15 @@ interface DropdownOpenState {
[key: string]: boolean; [key: string]: boolean;
} }
export default function NavbarHumas() { export default function NavbarHumas(props: { size: string }) {
const { size } = props;
const [dropdownOpen, setDropdownOpen] = useState<DropdownOpenState>({}); const [dropdownOpen, setDropdownOpen] = useState<DropdownOpenState>({});
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const router = useRouter(); const router = useRouter();
const t = useTranslations("Navbar"); const t = useTranslations("Navbar");
const token = Cookies.get("access_token"); const token = Cookies.get("access_token");
const isAuthenticated = Cookies.get("is_authenticated"); const isAuthenticated = Cookies.get("is_authenticated");
const [isScrolled, setIsScrolled] = useState(false);
const language = storedLanguage((state) => state.locale); const language = storedLanguage((state) => state.locale);
const setLanguage = storedLanguage((state) => state.setLocale); const setLanguage = storedLanguage((state) => state.setLocale);
@ -101,12 +103,29 @@ export default function NavbarHumas() {
type="search" type="search"
/> />
); );
useEffect(() => {
const handleScroll = () => {
setIsScrolled(window.scrollY > 0);
};
window.addEventListener("scroll", handleScroll);
return () => {
window.removeEventListener("scroll", handleScroll);
};
}, []);
return ( return (
<Navbar <Navbar
isBordered isBordered
maxWidth="full" maxWidth="full"
height="8rem" height={size === "sm" ? "4rem" : "8rem"}
className="backdrop-opacity-10" className={`transition-all duration-300 ease-in-out backdrop-opacity-10 ${
size === "sm"
? "lg:hidden !bg-white dark:!bg-black "
: "hidden lg:block"
} ${isScrolled ? "bg-white dark:bg-[#1F1A17] " : "bg-opacity-50"}`}
classNames={{ wrapper: "px-0" }} classNames={{ wrapper: "px-0" }}
> >
<div className="w-full h-full flex"> <div className="w-full h-full flex">
@ -1070,70 +1089,77 @@ export default function NavbarHumas() {
</div> </div>
</div> </div>
</div> </div>
<NavbarContent className="sm:hidden basis-1 pl-4" justify="end"> <NavbarContent className="lg:hidden basis-1 px-4">
<ThemeSwitch /> <div className="flex justify-between w-full">
<NavbarMenuToggle /> <Link href={"/"}>
<NavbarMenu> <img src="/logohumas.png" alt="logo" className="w-[50px]" />
{/* {searchInput} */} </Link>
<div className="mt-1 flex flex-col gap-1"> <div className="flex flex-row gap-3 items-center">
{siteConfig.humasMenuItems.map((item) => ( <ThemeSwitch />
<div key={item.key} className="relative"> <NavbarMenuToggle />
<NavbarMenuItem> <NavbarMenu>
{item.key === "login" ? ( {/* {searchInput} */}
token ? ( <div className="mt-1 flex flex-col gap-1">
<Button {siteConfig.humasMenuItems.map((item) => (
className="bg-[#DD8306] text-white" <div key={item.key} className="relative">
onPress={onLogout} <NavbarMenuItem>
> {item.key === "login" ? (
Logout token ? (
</Button> <Button
) : ( className="bg-[#DD8306] text-white"
<Link href="/auth"> onPress={onLogout}
<Button className="bg-[#DD8306] text-white"> >
Login Logout
</Button> </Button>
</Link>
)
) : item.key === "dashboard" ? (
token && (
<Link href="/admin/dashboard">
<span>{item.label}</span>
</Link>
)
) : (
<div
onClick={() => toggleDropdown(item.key)}
className="flex items-end gap-2"
>
{item.href ? (
<Link href={item.href} target="_blank">
<span>{item.label}</span>
</Link>
) : (
<span>{item.label}</span>
)}
{item.submenu &&
(dropdownOpen[item.key] ? (
<ChevronUpIcon />
) : ( ) : (
<ChevronDownIcon /> <Link href="/auth">
<Button className="bg-[#DD8306] text-white">
Login
</Button>
</Link>
)
) : item.key === "dashboard" ? (
token && (
<Link href="/admin/dashboard">
<span>{item.label}</span>
</Link>
)
) : (
<div
onClick={() => toggleDropdown(item.key)}
className="flex items-end gap-2"
>
{item.href ? (
<Link href={item.href} target="_blank">
<span>{item.label}</span>
</Link>
) : (
<span>{item.label}</span>
)}
{item.submenu &&
(dropdownOpen[item.key] ? (
<ChevronUpIcon />
) : (
<ChevronDownIcon />
))}
</div>
)}
</NavbarMenuItem>
{dropdownOpen[item.key] && item.submenu && (
<div className="pl-2">
{item.submenu.map((subItem, subIndex) => (
<div key={subIndex}>
<Link href={subItem.href}>{subItem.label}</Link>
</div>
))} ))}
</div>
)}
</NavbarMenuItem>
{dropdownOpen[item.key] && item.submenu && (
<div className="pl-2">
{item.submenu.map((subItem, subIndex) => (
<div key={subIndex}>
<Link href={subItem.href}>{subItem.label}</Link>
</div> </div>
))} )}
</div> </div>
)} ))}
</div> </div>
))} </NavbarMenu>
</div> </div>
</NavbarMenu> </div>
</NavbarContent> </NavbarContent>
</div> </div>
</Navbar> </Navbar>

2
components/ui/social-media/facebook.tsx
View File

@ -17,7 +17,7 @@ const FacebookWidget = () => {
return ( return (
<div <div
className="embedsocial-hashtag rounded-md" className="embedsocial-hashtag rounded-md"
data-ref="7ad1e18598045d000abbf6de3479b1bbd5502583" data-ref="7501cb8270327e936909c6ed57298ead0c5c07d0"
></div> ></div>
); );
}; };

45
components/ui/social-media/gpr-kominfo.tsx
View File

@ -1,33 +1,26 @@
import { useEffect } from 'react'; import { useEffect } from "react";
const GPRKominfo = () => { const GPRKominfo = () => {
useEffect(() => {
if (typeof window !== "undefined") {
const script = document.createElement("script");
script.src = "https://widget.kominfo.go.id/gpr-widget-kominfo.min.js";
script.async = true;
document.head.appendChild(script);
useEffect(() => { return () => {
document.head.removeChild(script);
};
}
}, []);
if (typeof window !== 'undefined') { return (
const script = document.createElement('script'); <>
script.src = "https://widget.kominfo.go.id/gpr-widget-kominfo.min.js"; <div id="gpr-kominfo-widget-header" className=""></div>
script.async = true; <div id="gpr-kominfo-widget-body"></div>
document.head.appendChild(script); <div id="gpr-kominfo-widget-footer"></div>
</>
return () => { );
document.head.removeChild(script);
};
}
}, []);
return (
<>
<div id="gpr-kominfo-widget-header" className=''></div>
<div id="gpr-kominfo-widget-body"></div>
<div id="gpr-kominfo-widget-footer"></div>
</>
);
}; };
export default GPRKominfo; export default GPRKominfo;

41
components/ui/social-media/instagram.tsx
View File

@ -1,29 +1,26 @@
import { useEffect } from 'react'; import { useEffect } from "react";
const InstagramWidget = () => { const InstagramWidget = () => {
useEffect(() => {
if (typeof window !== "undefined") {
const script = document.createElement("script");
script.src = "https://embedsocial.com/cdn/ht.js";
script.async = true;
document.head.appendChild(script);
useEffect(() => { return () => {
document.head.removeChild(script);
};
}
}, []);
if (typeof window !== 'undefined') { return (
const script = document.createElement('script'); // <div className="embedsocial-hashtag rounded-md" data-ref="546492f9901c893c2495edfa29649697fc0addd8"></div>
script.src = "https://embedsocial.com/cdn/ht.js"; <div
script.async = true; className="embedsocial-hashtag rounded-md"
document.head.appendChild(script); data-ref="355db1e4f604957766c76d258044c0dbee728096"
></div>
return () => { );
document.head.removeChild(script);
};
}
}, []);
return (
<div className="embedsocial-hashtag rounded-md" data-ref="546492f9901c893c2495edfa29649697fc0addd8"></div>
);
}; };
export default InstagramWidget; export default InstagramWidget;

41
components/ui/social-media/twitter.tsx
View File

@ -1,29 +1,26 @@
import { useEffect } from 'react'; import { useEffect } from "react";
const TwitterWidget = () => { const TwitterWidget = () => {
useEffect(() => {
if (typeof window !== "undefined") {
const script = document.createElement("script");
script.src = "https://embedsocial.com/cdn/ht.js";
script.async = true;
document.head.appendChild(script);
useEffect(() => { return () => {
document.head.removeChild(script);
};
}
}, []);
if (typeof window !== 'undefined') { return (
const script = document.createElement('script'); // <div className="embedsocial-hashtag rounded-md" data-ref="c4857612a0e86456294a1a38046d17fc1040c003"></div>
script.src = "https://embedsocial.com/cdn/ht.js"; <div
script.async = true; className="embedsocial-hashtag rounded-md"
document.head.appendChild(script); data-ref="37343a1ea31c2d40735b094eb25741f6dac7e509"
></div>
return () => { );
document.head.removeChild(script);
};
}
}, []);
return (
<div className="embedsocial-hashtag rounded-md" data-ref="c4857612a0e86456294a1a38046d17fc1040c003"></div>
);
}; };
export default TwitterWidget; export default TwitterWidget;

3
components/ui/social-media/youtube.tsx
View File

@ -17,7 +17,8 @@ const YoutubeWidget = () => {
return ( return (
<div <div
className="embedsocial-hashtag rounded-md" className="embedsocial-hashtag rounded-md"
data-ref="7ad1e18598045d000abbf6de3479b1bbd5502583" // data-ref="7ad1e18598045d000abbf6de3479b1bbd5502583"
data-ref="7501cb8270327e936909c6ed57298ead0c5c07d0"
></div> ></div>
); );
}; };

24
styles/globals.css
View File

@ -32,6 +32,30 @@
--scroll-shadow-size: 40px; --scroll-shadow-size: 40px;
} }
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
border-radius: 1rem;
/* Center slide text vertically */
display: flex;
justify-content: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
@layer utilities { @layer utilities {
.clip-path-triangle { .clip-path-triangle {
clip-path: polygon(0 0, 100% 50%, 0 100%); clip-path: polygon(0 0, 100% 50%, 0 100%);