236 lines
8.0 KiB
TypeScript
236 lines
8.0 KiB
TypeScript
"use client";
|
|
import { useTranslations } from "next-intl";
|
|
import Image from "next/image";
|
|
import React, { useEffect, useState } from "react";
|
|
import {
|
|
ChevronDownIcon,
|
|
ChevronLeftIcon,
|
|
ChevronRightIcon,
|
|
ChevronUpIcon,
|
|
FbIconNav,
|
|
IdnIcon,
|
|
IgIcon,
|
|
SearchIcon,
|
|
SearchIcons,
|
|
TtIcon,
|
|
TwIcon,
|
|
UKIcon,
|
|
YtIcon,
|
|
} from "../icons";
|
|
import Link from "next/link";
|
|
import {
|
|
Dropdown,
|
|
DropdownTrigger,
|
|
DropdownMenu,
|
|
DropdownItem,
|
|
Button,
|
|
Input,
|
|
} from "@heroui/react";
|
|
import storedLanguage from "@/store/language-store";
|
|
import { ThemeSwitch } from "../theme-switch";
|
|
|
|
const images = [
|
|
"/landing-1.jpg",
|
|
"/landing-2.jpg",
|
|
"/landing-3.jpg",
|
|
"/landing-4.jpg",
|
|
];
|
|
|
|
export default function BannerHumasNew() {
|
|
const t = useTranslations("Banner");
|
|
const [currentIndex, setCurrentIndex] = useState(0);
|
|
const [resetTimer, setResetTimer] = useState(0);
|
|
const [onOpen, setOnOpen] = useState(false);
|
|
const [searchValue, setSearchValue] = useState("");
|
|
const language = storedLanguage((state) => state.locale);
|
|
const setLanguage = storedLanguage((state) => state.setLocale);
|
|
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
|
|
}, 25000);
|
|
|
|
return () => clearInterval(interval);
|
|
}, [resetTimer]);
|
|
const nextImage = () => {
|
|
setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
|
|
setResetTimer((prev) => prev + 1);
|
|
};
|
|
|
|
const prevImage = () => {
|
|
setCurrentIndex(
|
|
(prevIndex) => (prevIndex - 1 + images.length) % images.length
|
|
);
|
|
setResetTimer((prev) => prev + 1);
|
|
};
|
|
|
|
return (
|
|
<div className="h-fit relative text-white overflow-hidden">
|
|
<div
|
|
className="flex w-full h-[45vh] lg:h-[60vh] transition-transform duration-700 ease-in-out"
|
|
style={{ transform: `translateX(-${currentIndex * 100}%)` }}
|
|
>
|
|
{images.map((img, index) => (
|
|
<Link href="" key={index} className="w-full shrink-0">
|
|
<Image
|
|
src={img}
|
|
width={1440}
|
|
height={1080}
|
|
alt={`humasbanner-${index}`}
|
|
className="w-full h-full object-cover object-center opacity-[25] dark:opacity-70"
|
|
/>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
<div className="absolute inset-0 bg-black bg-opacity-40" />
|
|
<div className="absolute z-50 lg:mt-[50px] top-44 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center w-full lg:w-[75%]">
|
|
<div className="flex flex-col gap-3 justify-between p-5">
|
|
<div className="flex justify-between items-center mb-10">
|
|
<div className="flex flex-col gap-1 justify-start items-start">
|
|
<p className="text-lg lg:text-5xl font-bold text-left leading-0">
|
|
SELAMAT DATANG DI WEBSITE RESMI DIVISI HUMAS POLRI
|
|
</p>
|
|
<p className="text-xs lg:text-base">
|
|
OBYEKTIF - DIPERCAYA - PARTISIPASI
|
|
</p>
|
|
</div>
|
|
<Image
|
|
src="/divhumas.png"
|
|
width={720}
|
|
height={720}
|
|
alt="logo-humas"
|
|
className="w-[200px]"
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col lg:flex-row lg:justify-between gap-4 mt-10">
|
|
<div className="flex flex-row gap-6">
|
|
<Dropdown onOpenChange={setOnOpen}>
|
|
<DropdownTrigger>
|
|
<Button
|
|
className="w-full lg:w-[200px] bg-white dark:bg-stone-900"
|
|
radius="sm"
|
|
endContent={
|
|
onOpen ? <ChevronUpIcon /> : <ChevronDownIcon />
|
|
}
|
|
>
|
|
<p className="text-left w-full font-bold text-md">Menu</p>
|
|
</Button>
|
|
</DropdownTrigger>
|
|
<DropdownMenu>
|
|
<DropdownItem key="pemas">Pelayanan Masyarakat</DropdownItem>
|
|
<DropdownItem key="info">Informasi Publik</DropdownItem>
|
|
<DropdownItem key="tentang">Tentang</DropdownItem>
|
|
<DropdownItem key="apps">Aplikasi Polri</DropdownItem>
|
|
</DropdownMenu>
|
|
</Dropdown>
|
|
<Link href={`https://eppid.polri.go.id/`}>
|
|
<Button className="bg-white dark:bg-stone-900" radius="sm">
|
|
<p className="font-bold w-full ">e-PPID Polri</p>
|
|
</Button>{" "}
|
|
</Link>
|
|
</div>
|
|
<Input
|
|
label=""
|
|
placeholder="Temukkan Informasi Publik Terkini Dari Polri"
|
|
type="text"
|
|
value={searchValue}
|
|
onValueChange={setSearchValue}
|
|
className="max-w-md"
|
|
endContent={
|
|
<Link
|
|
href={`/news/all?search=${searchValue}`}
|
|
className="text-black"
|
|
>
|
|
<SearchIcons />
|
|
</Link>
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* <p className="text-[30px] lg:text-[42px] lg:leading-10 font-bold pb-1 md:pb-5">
|
|
{t("jumbotron")}
|
|
</p> */}
|
|
{/* <p className="text-xs md:text-medium">{`"${t("phrase")}"`}</p> */}
|
|
</div>
|
|
<button
|
|
onClick={prevImage}
|
|
className="absolute left-4 top-1/2 transform -translate-y-1/2 bg-black/50 text-white px-2 py-2 rounded-full hover:bg-black/70 transition"
|
|
>
|
|
<ChevronLeftIcon />
|
|
</button>
|
|
<button
|
|
onClick={nextImage}
|
|
className="absolute right-4 top-1/2 transform -translate-y-1/2 bg-black/50 text-white px-2 py-2 rounded-full hover:bg-black/70 transition"
|
|
>
|
|
<ChevronRightIcon />
|
|
</button>
|
|
<div className="absolute bottom-4 right-5 lg:right-60 lg:mx-5">
|
|
<div className="flex">
|
|
<div className="flex gap-1 lg:gap-3 items-center">
|
|
<Link
|
|
href="https://www.facebook.com/DivHumasPolri?_rdc=1&_rdr"
|
|
target="_blank"
|
|
>
|
|
<div className="bg-white p-1.5 rounded-md">
|
|
<FbIconNav size={16} />
|
|
</div>
|
|
</Link>
|
|
<Link
|
|
href="https://www.instagram.com/divisihumaspolri/"
|
|
target="_blank"
|
|
>
|
|
<div className="bg-white p-0.5 rounded-md">
|
|
<IgIcon size={24} />
|
|
</div>
|
|
</Link>
|
|
<Link
|
|
href="https://www.youtube.com/user/pidhumaspolri"
|
|
target="_blank"
|
|
>
|
|
<div className="bg-white p-0.5 rounded-md">
|
|
<YtIcon size={24} />
|
|
</div>
|
|
</Link>
|
|
<Link href="https://twitter.com/DivHumas_Polri" target="_blank">
|
|
<div className="bg-white p-1 rounded-md">
|
|
<TwIcon size={20} />
|
|
</div>
|
|
</Link>
|
|
<Link href="https://www.tiktok.com/@divhumas_polri" target="_blank">
|
|
<div className="bg-white p-0.5 rounded-md">
|
|
<TtIcon size={24} />
|
|
</div>
|
|
</Link>
|
|
|
|
<div className="bg-white rounded-md py-0.5 px-1">
|
|
<ThemeSwitch />
|
|
</div>
|
|
<a
|
|
className="cursor-pointer"
|
|
onClick={() =>
|
|
language === "id" ? setLanguage("en") : setLanguage("id")
|
|
}
|
|
>
|
|
{language === "id" ? <IdnIcon /> : <UKIcon />}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
// <div
|
|
// className={`w-full h-[60vh] bg-cover bg-center rounded-lg shadow-lg`}
|
|
// style={{ backgroundImage: `url('/landing-3.jpg')` }}
|
|
// />
|
|
// <div
|
|
// className={`w-full h-[60vh] bg-cover bg-center rounded-lg shadow-lg relative`}
|
|
// >
|
|
// <div
|
|
// className="absolute inset-0 bg-black bg-opacity-100 bg-cover bg-center object-cover"
|
|
// style={{ backgroundImage: `url('/landing-3.jpg')` }}
|
|
// />
|
|
// <div className="flex flex-row p-4">Your Text Here</div>
|
|
// </div>
|
|
);
|
|
}
|