web-humas-fe/components/layout/portal-ppid/ppid-banner.tsx

"use client";
import { SearchIcon } from "@/components/icons";
import { Input } from "@heroui/input";
import { usePathname } from "next/navigation";

interface PPIDBannerProps {
  url: string;
}

export default function PPIDBanner({ url }: PPIDBannerProps) {
  const pathname = usePathname();
  let isPolri;

  if (pathname === "/portal-ppid") {
    isPolri = true;
  } else {
    isPolri = false;
  }
  console.log(isPolri);

  return (
    // <div className='relative h-screen'>
    //     <div className='relative w-full'>
    //         <img
    //             className='w-full opacity-100 dark:opacity-90'
    //             src="banner-ppid.png"
    //             alt="banner"
    //         />
    //     </div>
    //     <div className='flex  flex-col items-center w-[100%] md:w-[80%] leading-10 h-auto absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center bg-inherit text-inherit md:text-white'>
    //         <p className='text-lg md:text-xl lg:text-4xl font-bold leading-10'>
    //             SELAMAT DATANG DI PORTAl PPID HUBUNGAN MASYARAKAT POLISI REPUBLIK INDONESIA  (HUMAS POLRI)
    //         </p>
    //         <p className='text-xs md:text-md lg:text-base pt-5'>
    //             Layanan ini merupakan fasilitas daring yang disediakan bagi para pemohon informasi publik, sebagai bagian dari <br /> implementasi prinsip keterbukaan informasi publik di Pusat Informasi dan Dokumentasi (PPID) Utama.
    //         </p>
    //         {/* <div className='pt-4 w-[50%]'>
    //             <Input
    //                 type="email"
    //                 placeholder="Informasi Berkala"
    //                 classNames={{
    //                     inputWrapper: 'bg-white'
    //                 }}
    //                 startContent={
    //                     <SearchIcons className=" text-default-400 pointer-events-none flex-shrink-0" />
    //                 }
    //             />
    //         </div> */}
    //     </div>
    // </div>
    (<div className=" bg-white relative">
      <div className="relative">
        <img
          src="/banner-ppid.png"
          alt="ppid-banner"
          className="w-full object-cover relative h-[300px] md:h-min"
        />
        <div className="absolute top-5 lg:top-1/3 left-1/2  w-[48%] text-white">
          <p className="text-xs md:text-md lg:text-4xl font-bold leanding-0 md:leading-10">
            {`SELAMAT DATANG DI PORTAL E-PPID ${isPolri ? "POLRI" : url}`}
          </p>
          <p className="text-xs font-medium lg:font-semibold pt-1 lg:pt-3">
            Layanan ini merupakan fasilitas daring yang disediakan bagi para
            pemohon informasi publik, sebagai bagian dari implementasi prinsip
            keterbukaan informasi publik di Pusat Informasi dan Dokumentasi
            (PPID) Utama.
          </p>
          <div className="pt-2 md:pt-4 w-[100%]">
            <Input
              size="sm"
              type="email"
              placeholder="Informasi Berkala"
              className="w-full"
              classNames={{
                inputWrapper: "bg-white",
              }}
              startContent={
                <SearchIcon className=" text-default-400 pointer-events-none flex-shrink-0" />
              }
            />
          </div>
        </div>
      </div>
    </div>)
  );
}