214 lines
7.4 KiB
TypeScript
214 lines
7.4 KiB
TypeScript
"use client";
|
|
import { Button } from "@heroui/button";
|
|
import { Input } from "@heroui/input";
|
|
import {
|
|
LandingAppleIcon,
|
|
LandingCallIcon,
|
|
LandingEmailIcon,
|
|
LandingLocationIcon,
|
|
LandingPlayStoreIcon,
|
|
MailIcon,
|
|
SendIcon,
|
|
} from "../icons";
|
|
import Link from "next/link";
|
|
import { useTranslations } from "next-intl";
|
|
import { useEffect, useState } from "react";
|
|
import { error, success } from "@/config/swal";
|
|
import { subscription } from "@/services/subscribe";
|
|
import { Image } from "@heroui/react";
|
|
|
|
export default function FooterNew(props: { margin?: boolean }) {
|
|
const [emailValue, setEmailValue] = useState("");
|
|
|
|
const doSubscribe = async () => {
|
|
const isValidEmail = (email: string): boolean => {
|
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
return emailRegex.test(email);
|
|
};
|
|
|
|
if (!isValidEmail(emailValue)) {
|
|
error("Email tidak valid");
|
|
return false;
|
|
}
|
|
|
|
const res = await subscription({ email: emailValue });
|
|
if (res?.error) {
|
|
error(res?.message);
|
|
return false;
|
|
}
|
|
|
|
success("Sukses");
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={`${
|
|
props?.margin ? "mb-[60px]" : ""
|
|
} relative text-xs leading-4 md:leading-loose lg:leading-8 font-semibold`}
|
|
>
|
|
<div className="py-10 w-full lg:w-[70%] flex flex-col gap-4 px-6 lg:px-0 lg:mx-auto">
|
|
<div className="flex justify-center text-xl lg:text-2xl">
|
|
Channel Humas Polri
|
|
</div>
|
|
<div className="grid grid-cols-3 lg:flex lg:flex-row gap-4 justify-around items-center border-b-1 border-black pb-5">
|
|
<Link
|
|
href="https://portal.humas.polri.go.id/"
|
|
className="flex justify-center"
|
|
>
|
|
<Image
|
|
src="/assets/portal-humas.png"
|
|
alt="portal-humas"
|
|
className="w-[50px] lg:w-[100px]"
|
|
/>
|
|
</Link>
|
|
<Link
|
|
href="https://mediahub.polri.go.id/"
|
|
className="flex flex-col justify-center items-center"
|
|
>
|
|
<Image
|
|
src="/assets/mediahub.png"
|
|
alt="mediahub"
|
|
className="w-[80px] lg:w-[200px]"
|
|
/>
|
|
</Link>
|
|
<Link
|
|
href="https://spit.humas.polri.go.id"
|
|
className="flex justify-center"
|
|
>
|
|
<Image
|
|
src="/assets/spit.png"
|
|
alt="spit"
|
|
className="w-[85px] lg:w-[170px] hidden dark:block"
|
|
/>
|
|
<Image
|
|
src="/assets/spit-blackline.png"
|
|
alt="spit"
|
|
className="w-[85px] lg:w-[170px] dark:hidden"
|
|
/>
|
|
</Link>
|
|
<Link
|
|
href="https://tvradio.polri.go.id/"
|
|
className="flex justify-center"
|
|
>
|
|
<Image
|
|
src="/assets/polri-tv.png"
|
|
alt="polritv"
|
|
className="w-[85px] lg:w-[170px]"
|
|
/>
|
|
</Link>
|
|
<Link
|
|
href="https://tribratanews.polri.go.id/"
|
|
className="flex justify-center"
|
|
>
|
|
<Image
|
|
src="/assets/tb-news.png"
|
|
alt="tbn"
|
|
className="w-[85px] lg:w-[170px]"
|
|
/>
|
|
</Link>
|
|
<Link href="https://inp.polri.go.id/" className="flex justify-center">
|
|
<Image
|
|
src="/assets/inp.png"
|
|
alt="inp"
|
|
className="w-[85px] lg:w-[170px]"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
|
|
<div className="flex flex-col gap-1 text-md font-light">
|
|
<p className="text-lg font-semibold">Tentang Kami</p>
|
|
<div className="flex flex-row gap-2 items-center">
|
|
<div className="w-[16px]">
|
|
<LandingCallIcon size={16} />
|
|
</div>
|
|
<p>Call Center 110</p>
|
|
</div>
|
|
<div className="flex flex-row gap-2 items-center">
|
|
<div className="w-[16px]">
|
|
<LandingEmailIcon size={16} />
|
|
</div>
|
|
<p>ppid@polri.go.id</p>
|
|
</div>
|
|
<div className="flex flex-row gap-2 justify-start items-start">
|
|
<div className="w-[16px]">
|
|
<LandingLocationIcon size={16} />
|
|
</div>
|
|
<span className="p-0 m-0 self-start leading-tight">
|
|
Jl. Trunojoyo No.3, Selong, Kec. Kby. Baru, Kota Jakarta
|
|
Selatan, Daerah Khusus Ibukota Jakarta
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col gap-4 text-md items-center">
|
|
<p className="text-lg font-semibold">
|
|
Download Aplikasi Polri Presisi
|
|
</p>
|
|
<div className="flex flex-row gap-2">
|
|
<Link
|
|
href=""
|
|
className="flex flex-row p-1 border-1 border-black dark:border-white rounded-lg items-center"
|
|
>
|
|
<LandingAppleIcon size={36} />
|
|
<div className="flex flex-col gap-0 leading-none font-light mr-1">
|
|
<p className="text-[10px]">Download on the</p>
|
|
<p className="text-lg font-semibold">App Store</p>
|
|
</div>
|
|
</Link>
|
|
<Link
|
|
href=""
|
|
className="flex flex-row p-1 border-1 border-black dark:border-white rounded-lg items-center"
|
|
>
|
|
<LandingPlayStoreIcon size={30} />
|
|
<div className="flex flex-col gap-0 leading-none font-light mr-1">
|
|
<p className="text-[10px]">GET IT ON</p>
|
|
<p className="text-lg font-semibold">Google Play</p>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col gap-4 text-md">
|
|
<p className="text-xl font-semibold">Subscribe</p>
|
|
<div className="flex flex-col">
|
|
<p className="font-light">
|
|
Dapatkan info & event terupdate dari kami.
|
|
</p>
|
|
<div className="flex items-center">
|
|
{" "}
|
|
<Input
|
|
label=""
|
|
type="text"
|
|
variant="bordered"
|
|
placeholder="Tuliskan Email Anda"
|
|
className="rounded-none !text-black "
|
|
classNames={{
|
|
inputWrapper:
|
|
"rounded-none h-[37px] bg-white !text-black border-black dark:border-white",
|
|
mainWrapper:
|
|
"rounded-none h-[37px] bg-white !text-black dark:border-white",
|
|
}}
|
|
value={emailValue}
|
|
onValueChange={setEmailValue}
|
|
/>
|
|
<a
|
|
onClick={doSubscribe}
|
|
className="h-[38px] dark:h-[37px] text-white dark:text-black bg-black dark:bg-white flex items-center justify-center w-14 cursor-pointer"
|
|
>
|
|
<SendIcon />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<Link href={`/auth`}>
|
|
<Button className="mt-1 bg-[#BE0106] text-white">
|
|
<p className="text-xs">Kontributor Wilayah</p>
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="bg-red-800 text-white text-center py-5 flex justify-center font-light text-sm lg:text-base">
|
|
© Copyright Humas POLRI ® All Rights Reserved
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|