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,
width = 14,
fill = "currentColor",
color = "black",
...props
}: IconSvgProps) => (
<svg
width="14"
height="14"
width={size || width}
height={size || width}
viewBox="0 0 14 14"
fill="none"
fill={fill}
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<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"
fill="white"
fill="currentColor"
/>
</svg>
);

6
components/landing/BannerHumas.tsx
View File

@ -4,13 +4,13 @@ import React from "react";
export default function BannerHumas() {
const t = useTranslations("Banner");
return (
<div className="h-fit relative text-white mt-[-130px]">
<div className="h-fit relative text-white lg:mt-[-130px]">
<img
src="headerbanner1.png"
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">
{t("jumbotron")}
</p>

4
components/landing/BodyLayout.tsx
View File

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

35
components/landing/ENewsPolri.tsx
View File

@ -5,9 +5,13 @@ import { useEffect, useState } from "react";
import { ChevronLeftWhite, ChevronRightIcon, EyeIcon } from "../icons";
import Link from "next/link";
import { getListArticle } from "@/service/article";
import { convertDateFormat } from "@/utils/global";
import { convertDateFormat, textEllipsis } from "@/utils/global";
import { Autoplay, Pagination, Navigation } from "swiper/modules";
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() {
const [article, setArticle] = useState<any>([]);
@ -24,25 +28,23 @@ export default function ENewsPolri() {
}, []);
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">
E-Majalah Polri
</p>
<div className="w-screen lg:w-[90%]">
<div className="w-[90vw] lg:w-[90%]">
<div>
<Swiper
centeredSlides={false}
spaceBetween={10}
autoplay={{
delay: 5000,
disableOnInteraction: false,
}}
pagination={{
clickable: true,
}}
navigation={true}
modules={[Autoplay, Pagination, Navigation]}
className="mySwiper gap-3"
modules={[Autoplay, Navigation]}
className="mySwiper"
slidesPerView={1}
breakpoints={{
// When the window width is less than 640px
@ -54,26 +56,23 @@ export default function ENewsPolri() {
{article?.map((newsItem: any) => (
<SwiperSlide key={newsItem.id}>
<Card isFooterBlurred radius="lg" className="border-none">
<Image
<img
alt="headernews"
className="object-cover"
height={660}
src="/headernews.png"
width={460}
layout="responsive"
className="h-[25vh] object-cover rounded-none"
/>
<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">
<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-black dark:text-white">
<Link href={`news/detail/${newsItem.id}`}>
<p className="text-left font-semibold">
{newsItem.title}
<p className="text-left font-semibold text-sm">
{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 />
<EyeIcon className="text-black dark:text-white" />
{newsItem.viewCount === null ? 0 : newsItem.viewCount}
</p>
</div>

127
components/landing/Footer.tsx
View File

@ -9,14 +9,14 @@ export default function Footer() {
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">
<div className="h-[500px] md:h-[720px] lg:h-auto bg-black">
<img
src="/assets/Footer.jpg"
alt=""
className="w-full h-full object-cover object-left-top opacity-80"
/>
</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">
<Link href="/">Berita Terkini</Link>
<Link href="https://www.kpai.go.id/" target="_blank">
@ -137,6 +137,129 @@ export default function Footer() {
</Link>
</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">
&copy; Copyright Humas<p className="text-red-700">&nbsp; POLRI &reg;</p>
&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/css";
import "swiper/css/pagination";
import "swiper/css/effect-fade";
import "swiper/css/navigation";
import { Autoplay, Pagination, Navigation } from "swiper/modules";
import Link from "next/link";
import GPRKominfo from "../ui/social-media/gpr-kominfo";
import { useEffect, useState } from "react";
import { getListArticle } from "@/service/article";
import { convertDateFormat } from "@/utils/global";
import { convertDateFormat, textEllipsis } from "@/utils/global";
import { useTranslations } from "next-intl";
export default function HeaderNews() {
@ -27,25 +29,72 @@ export default function HeaderNews() {
}, []);
return (
<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]">
<div className="bg-[#1F1A17] p-2 lg:p-8">
<div className="flex flex-col lg:flex-row gap-3 bg-white p-1 lg:p-3 rounded-lg lg:h-[70vh]">
<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>
<ScrollShadow hideScrollBar className="md:h-[530px] gap-3">
<ScrollShadow hideScrollBar className="h-[34vh] lg:h-[53vh] gap-3">
{article?.map((data: any) => (
<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}
>
<p>{data.title}</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>
<img
alt="headernews"
src="/headernews.png"
className="object-cover w-[18%]"
/>
<div>
<p className="lg:hidden">{textEllipsis(data.title, 40)}</p>
<p className="hidden lg:block">{data.title}</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>
))}
</ScrollShadow>
@ -60,55 +109,48 @@ export default function HeaderNews() {
</Link>
</div>
</div>
<div className="w-auto lg:w-[910px] md:h-[636px]">
<div className="md:h-[636px]">
<Swiper
centeredSlides={true}
autoplay={{
delay: 5000,
disableOnInteraction: false,
}}
pagination={{
clickable: true,
}}
navigation={true}
modules={[Autoplay, Pagination, Navigation]}
className="mySwiper"
height={636}
>
{article?.map((newsItem: any) => (
<SwiperSlide key={newsItem.id}>
<Card isFooterBlurred radius="lg" className="border-none">
<Image
alt="headernews"
height={400}
src="/headernews.png"
width={460}
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">
<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
<div className="hidden lg:block w-full lg:w-[50%] h-full">
<Swiper
centeredSlides={true}
autoplay={{
delay: 5000,
disableOnInteraction: false,
}}
navigation={true}
modules={[Autoplay, 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-[67vh] 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-white">
<Link href={`news/detail/${newsItem.id}`}>
<p className="text-left font-semibold">
{newsItem.title}
</p>
<p className="flex items-center gap-1 text-sm">
<EyeIcon />
{newsItem.viewCount === null ? 0 : newsItem.viewCount}
</p>
</div>
</CardFooter>
</Card>
</SwiperSlide>
))}
</Swiper>
</div>
</Link>
<p className="py-[2px] text-left text-sm">
{convertDateFormat(newsItem.createdAt)} WIB
</p>
<p className="flex items-center gap-1 text-sm">
<EyeIcon />
{newsItem.viewCount === null ? 0 : newsItem.viewCount}
</p>
</div>
</CardFooter>
</Card>
</SwiperSlide>
))}
</Swiper>
</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 />
</div>
</div>

67
components/landing/MediaSocial.tsx
View File

@ -62,8 +62,14 @@ export default function MediaSocial() {
<TwitterIcon color="#1DA1F2" />
<p className="pl-2 text-xl">Twitter</p>
</div>
<div className="text-xs text-[#DD8306] flex items-center">
Lihat Semua <ChevronRightIcon />
<div className="text-xs text-[#DD8306]">
<Link
href="https://x.com/DivHumas_Polri"
target="_blank"
className="flex items-center"
>
Lihat Semua <ChevronRightIcon />
</Link>{" "}
</div>
</div>
<div>
@ -79,6 +85,7 @@ export default function MediaSocial() {
<div className="text-xs text-[#DD8306]">
<Link
href="https://www.instagram.com/divisihumaspolri/"
target="_blank"
className="flex items-center"
>
Lihat Semua <ChevronRightIcon />
@ -96,7 +103,13 @@ export default function MediaSocial() {
<p className="pl-2 text-xl">Facebook</p>
</div>
<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>
<FacebookWidget />
@ -108,48 +121,16 @@ export default function MediaSocial() {
<p className="pl-2 text-xl">Tiktok</p>
</div>
<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 className="md:flex flex-wrap gap-4 justify-center">
{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>
<FacebookWidget />
</div>
<div>
<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 { ChevronLeftIcon, ChevronRightIcon } from "../icons";
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() {
const [article, setArticle] = useState<any>([]);
@ -46,16 +47,31 @@ export default function NewsTicker() {
return (
<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%]">
<span className="mr-2 "></span> BREAKING NEWS
<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
<div className="absolute right-0 top-0 h-full w-4 bg-amber-500 transform translate-x-full clip-path-triangle"></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"
}`}
>
<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">
{convertDateFormat(article[currentNewsIndex]?.createdAt)}
</p>

2
components/landing/RegionalNews.tsx
View File

@ -294,7 +294,7 @@ export default function RegionalNews() {
// }, [list]);
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">
<p className="border-b-3 border-[#C3170F] py-2 w-fit">
{" "}

99
components/landing/SidebarNav.tsx
View File

@ -1,18 +1,31 @@
"use client";
import { Button, LinkIcon, ScrollShadow } from "@nextui-org/react";
import React, { useState } from "react";
import React, { useEffect, useState } from "react";
import { EyeIcon } from "../icons";
import Image from "next/image";
import Link from "next/link";
import { getListArticle } from "@/service/article";
import { convertDateFormat } from "@/utils/global";
export default function SidebarNav() {
const [article, setArticle] = useState<any>([]);
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 (
<>
<div className="space-y-4 px-5">
<div className="text-[20px] flex flex-row gap-10">
<div className="space-y-4 px-1 lg:px-5">
<div className="text-[15px] flex flex-row gap-10">
<a
onClick={() => setSelectedTab("media")}
className={
@ -37,61 +50,23 @@ export default function SidebarNav() {
{selectedTab === "media" ? (
<div className="h-[410px] p-2 bg-[#020101] text-white rounded-md border-2 border-white">
<ScrollShadow hideScrollBar className=" h-[345px]">
<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>
<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>
{article?.map((list: any) => (
<div
key={list.id}
className="text-xs text-left m-2 p-2 bg-[#1E1616] rounded-md"
>
<Link href={`news/detail/${list?.id}`}>
<p className="text-left font-semibold">{list?.title}</p>
</Link>
<p className="py-[2px] text-left text-xs">
{convertDateFormat(list?.createdAt)} WIB
</p>
<p className="flex items-center gap-1 text-xs">
<EyeIcon />
{list?.viewCount === null ? 0 : list?.viewCount}
</p>
</div>
))}
</ScrollShadow>
<Button
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>
</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
</p>
<img src="pelayanan-informasi-publik.png" className="w-full" />
@ -251,11 +226,11 @@ export default function SidebarNav() {
</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
</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">
<img src="/eksternal1.png" alt="" className="w-full" />
<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) => {
return (
<section className="flex flex-col">
<NavbarHumas />
<NavbarHumas size="sm" />
<NavbarHumas size="lg" />
<NewsTicker />
{children}

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

@ -55,13 +55,15 @@ interface DropdownOpenState {
[key: string]: boolean;
}
export default function NavbarHumas() {
export default function NavbarHumas(props: { size: string }) {
const { size } = props;
const [dropdownOpen, setDropdownOpen] = useState<DropdownOpenState>({});
const [isOpen, setIsOpen] = useState(false);
const router = useRouter();
const t = useTranslations("Navbar");
const token = Cookies.get("access_token");
const isAuthenticated = Cookies.get("is_authenticated");
const [isScrolled, setIsScrolled] = useState(false);
const language = storedLanguage((state) => state.locale);
const setLanguage = storedLanguage((state) => state.setLocale);
@ -101,12 +103,29 @@ export default function NavbarHumas() {
type="search"
/>
);
useEffect(() => {
const handleScroll = () => {
setIsScrolled(window.scrollY > 0);
};
window.addEventListener("scroll", handleScroll);
return () => {
window.removeEventListener("scroll", handleScroll);
};
}, []);
return (
<Navbar
isBordered
maxWidth="full"
height="8rem"
className="backdrop-opacity-10"
height={size === "sm" ? "4rem" : "8rem"}
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" }}
>
<div className="w-full h-full flex">
@ -1070,70 +1089,77 @@ export default function NavbarHumas() {
</div>
</div>
</div>
<NavbarContent className="sm:hidden basis-1 pl-4" justify="end">
<ThemeSwitch />
<NavbarMenuToggle />
<NavbarMenu>
{/* {searchInput} */}
<div className="mt-1 flex flex-col gap-1">
{siteConfig.humasMenuItems.map((item) => (
<div key={item.key} className="relative">
<NavbarMenuItem>
{item.key === "login" ? (
token ? (
<Button
className="bg-[#DD8306] text-white"
onPress={onLogout}
>
Logout
</Button>
) : (
<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 />
<NavbarContent className="lg:hidden basis-1 px-4">
<div className="flex justify-between w-full">
<Link href={"/"}>
<img src="/logohumas.png" alt="logo" className="w-[50px]" />
</Link>
<div className="flex flex-row gap-3 items-center">
<ThemeSwitch />
<NavbarMenuToggle />
<NavbarMenu>
{/* {searchInput} */}
<div className="mt-1 flex flex-col gap-1">
{siteConfig.humasMenuItems.map((item) => (
<div key={item.key} className="relative">
<NavbarMenuItem>
{item.key === "login" ? (
token ? (
<Button
className="bg-[#DD8306] text-white"
onPress={onLogout}
>
Logout
</Button>
) : (
<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>
))}
</NavbarMenu>
</div>
</NavbarMenu>
</div>
</NavbarContent>
</div>
</Navbar>

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

@ -17,7 +17,7 @@ const FacebookWidget = () => {
return (
<div
className="embedsocial-hashtag rounded-md"
data-ref="7ad1e18598045d000abbf6de3479b1bbd5502583"
data-ref="7501cb8270327e936909c6ed57298ead0c5c07d0"
></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 = () => {
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') {
const script = document.createElement('script');
script.src = "https://widget.kominfo.go.id/gpr-widget-kominfo.min.js";
script.async = true;
document.head.appendChild(script);
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>
</>
);
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;

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

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

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

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

24
styles/globals.css
View File

@ -32,6 +32,30 @@
--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 {
.clip-path-triangle {
clip-path: polygon(0 0, 100% 50%, 0 100%);