277 lines
9.6 KiB
TypeScript
277 lines
9.6 KiB
TypeScript
"use client";
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { Button } from "@heroui/button";
|
|
import { Input, Textarea } from "@heroui/input";
|
|
import { Select, SelectItem, SelectSection } from "@heroui/react";
|
|
import React, { useEffect, useState } from "react";
|
|
import { useForm } from "react-hook-form";
|
|
import { z } from "zod";
|
|
import {
|
|
Calender,
|
|
CustomerService,
|
|
EyeFilledIcon,
|
|
EyeSlashFilledIcon,
|
|
Hotline,
|
|
Location,
|
|
Mail,
|
|
} from "../../icons";
|
|
import Datepicker from "react-tailwindcss-datepicker";
|
|
import Image from "next/image";
|
|
|
|
const schema = z.object({
|
|
name: z.string().min(3).max(50),
|
|
email: z.string().email(),
|
|
});
|
|
interface FormData {
|
|
name: string;
|
|
email: string;
|
|
}
|
|
|
|
const Contact: React.FC = () => {
|
|
const [isVisible, setIsVisible] = React.useState(false);
|
|
const [selectedGender, setSelectedGender] = React.useState("");
|
|
|
|
const [startDateValue, setStartDateValue] = useState({
|
|
startDate: null,
|
|
endDate: null,
|
|
});
|
|
|
|
const toggleVisibility = () => setIsVisible(!isVisible);
|
|
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
formState: { errors },
|
|
} = useForm<FormData>({
|
|
resolver: zodResolver(schema),
|
|
});
|
|
|
|
const onChangeGender = (selectedItem: any) => {
|
|
setSelectedGender(selectedItem);
|
|
// Lakukan apa pun yang perlu dilakukan saat pilihan jenis kelamin berubah di sini
|
|
console.log("Selected Gender:", selectedItem);
|
|
};
|
|
|
|
const handleValueChange = (newValue: any, num: any) => {
|
|
console.log("start:", newValue);
|
|
setStartDateValue(newValue);
|
|
};
|
|
|
|
const onSubmit = (data: FormData) => {
|
|
console.log(data);
|
|
};
|
|
|
|
return (
|
|
// <form onSubmit={handleSubmit(onSubmit)}>
|
|
// <div>
|
|
// <label htmlFor="name">Name:</label>
|
|
// <input {...register('name')} id="name" />
|
|
// {errors.name && <p>{errors.name.message}</p>}
|
|
// </div>
|
|
// <div>
|
|
// <label htmlFor="email">Email:</label>
|
|
// <input {...register('email')} id="email" />
|
|
// {errors.email && <p>{errors.email.message}</p>}
|
|
// </div>
|
|
// <button type="submit">Submit</button>
|
|
// </form>
|
|
(<div className=" bg-white text-black pb-5 md:pb-20">
|
|
<p className="text-center text-md md:text-2xl text-[#DD8306] font-bold my-2 md:my-5 lg:my-10">
|
|
Kontak Kami
|
|
</p>
|
|
<div className="lg:flex px-1 lg:px-10">
|
|
<div className="w-auto lg:w-1/3 bg-[#1F1A17] text-center text-white px-1 lg:px-5 py-5 rounded-lg text-sm space-y-3">
|
|
<div className="text-lg font-semibold">Informasi Kontak</div>
|
|
<div className="font-extralight">
|
|
Berikut informasi lengkap terkait Divisi Humas Polri
|
|
</div>
|
|
<div className="text-left pl-0 lg:pl-10 space-y-4">
|
|
<div className="flex items-center gap-3">
|
|
<div>
|
|
<Hotline />
|
|
</div>
|
|
<div>Hotline Divisi HumasPolri (021) 72120599</div>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<div>
|
|
<Hotline />
|
|
</div>
|
|
<div>Hotline Divisi HumasPolri (021) 72120599</div>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<div>
|
|
<CustomerService />
|
|
</div>
|
|
<div>Call Center 110</div>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<div>
|
|
<Mail />
|
|
</div>
|
|
<div>ppid@polri.go.id</div>
|
|
</div>
|
|
<div className="flex items-center text-lefts gap-3">
|
|
<div>
|
|
<Location />
|
|
</div>
|
|
<div>
|
|
Jl Trunojoyo No.3, RT.2/RW.1, Selong, Kec. Kebayoran Baru, Kota
|
|
Jakarta Selatan, Daerah Khusus Ibukota Jakarta 12110, Indonesia
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<div>
|
|
<Calender />
|
|
</div>
|
|
<div>Hari Senin - Jumat | 08:00 - 15:00 WIB</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-center border-2 border-red-500 h-[280px]">
|
|
{/* <iframe
|
|
src={`https://www.google.com/maps/embed/v1/place?key=${process.env.NEXT_PUBLIC_MAPS_API_KEY}&q=-6.2389608,106.7955078`}
|
|
></iframe> */}
|
|
<iframe
|
|
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11218.073168001461!2d106.7955078024133!3d-6.238960764805329!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69f169ccddedf3%3A0xb6702055b4d182f6!2sMarkas%20Besar%20Kepolisian%20Negara%20Republik%20Indonesia%20(MABES%20POLRI)!5e0!3m2!1sen!2sus!4v1733122332539!5m2!1sen!2sus"
|
|
width="800"
|
|
height="275"
|
|
style={{ border: 0 }}
|
|
loading="lazy"
|
|
></iframe>{" "}
|
|
</div>
|
|
</div>
|
|
<div className="w-auto lg:w-2/3 relative p-2 md:p-5 space-y-3 pr-2 md:pr-28">
|
|
<div className="text-sm md:text-xl font-bold">
|
|
Silahkan tuliskan pertanyaan anda kepada kami
|
|
</div>
|
|
<div>
|
|
<Input
|
|
classNames={{
|
|
input: ["w-full", "bg-transparent", "!text-black"],
|
|
mainWrapper: ["w-full", "bg-transparent"],
|
|
innerWrapper: ["bg-transparent"],
|
|
label: ["!text-black", "font-semibold"],
|
|
inputWrapper: [
|
|
"bg-transparent",
|
|
"dark:bg-transparent",
|
|
"hover:bg-transparent",
|
|
"dark:hover:bg-transparent",
|
|
"group-data-[focused=true]:bg-transparent",
|
|
"dark:group-data-[focused=true]:bg-transaparent",
|
|
"group-data-[focused=false]:bg-transparent",
|
|
"focus-within:!bg-transparent",
|
|
],
|
|
}}
|
|
isRequired
|
|
type="text"
|
|
label="Nama"
|
|
placeholder="Masukkan username anda!"
|
|
variant="underlined"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Input
|
|
classNames={{
|
|
input: ["w-full", "bg-transparent", "!text-black"],
|
|
mainWrapper: ["w-full", "bg-transparent"],
|
|
innerWrapper: ["bg-transparent"],
|
|
label: ["!text-black", "font-semibold"],
|
|
inputWrapper: [
|
|
"bg-transparent",
|
|
"dark:bg-transparent",
|
|
"hover:bg-transparent",
|
|
"dark:hover:bg-transparent",
|
|
"group-data-[focused=true]:bg-transparent",
|
|
"dark:group-data-[focused=true]:bg-transaparent",
|
|
"group-data-[focused=false]:bg-transparent",
|
|
"focus-within:!bg-transparent",
|
|
],
|
|
}}
|
|
isRequired
|
|
type="text"
|
|
label="Email"
|
|
placeholder="Masukkan email anda!"
|
|
variant="underlined"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Input
|
|
classNames={{
|
|
input: ["w-full", "bg-transparent", "!text-black"],
|
|
mainWrapper: ["w-full", "bg-transparent"],
|
|
innerWrapper: ["bg-transparent"],
|
|
label: ["!text-black", "font-semibold"],
|
|
inputWrapper: [
|
|
"bg-transparent",
|
|
"dark:bg-transparent",
|
|
"hover:bg-transparent",
|
|
"dark:hover:bg-transparent",
|
|
"group-data-[focused=true]:bg-transparent",
|
|
"dark:group-data-[focused=true]:bg-transaparent",
|
|
"group-data-[focused=false]:bg-transparent",
|
|
"focus-within:!bg-transparent",
|
|
],
|
|
}}
|
|
isRequired
|
|
type="text"
|
|
label="Judul"
|
|
placeholder="Masukkan judul pertanyaan anda!"
|
|
variant="underlined"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Input
|
|
classNames={{
|
|
input: ["w-full", "bg-transparent", "!text-black"],
|
|
mainWrapper: ["w-full", "bg-transparent"],
|
|
innerWrapper: ["bg-transparent"],
|
|
label: ["!text-black", "font-semibold"],
|
|
inputWrapper: [
|
|
"bg-transparent",
|
|
"dark:bg-transparent",
|
|
"hover:bg-transparent",
|
|
"dark:hover:bg-transparent",
|
|
"group-data-[focused=true]:bg-transparent",
|
|
"dark:group-data-[focused=true]:bg-transaparent",
|
|
"group-data-[focused=false]:bg-transparent",
|
|
"focus-within:!bg-transparent",
|
|
],
|
|
}}
|
|
isRequired
|
|
type="text"
|
|
label="Pesan"
|
|
placeholder="Pesan anda..."
|
|
variant="underlined"
|
|
/>
|
|
</div>
|
|
<div className="hidden lg:block absolute -top-36 right-20">
|
|
<Image
|
|
height={320}
|
|
width={320}
|
|
src="/sparklg.png"
|
|
alt=""
|
|
className=""
|
|
/>
|
|
</div>
|
|
<div className="flex justify-center md:justify-end">
|
|
<Button
|
|
className="bg-[#DD8306] w-auto md:w-[200px] rounded-lg text-white"
|
|
size="md"
|
|
>
|
|
Kirim Pesan
|
|
</Button>
|
|
<Image
|
|
height={320}
|
|
width={320}
|
|
src="/ar.png"
|
|
alt="ar"
|
|
className="absolute right-[28%] hidden lg:block"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>)
|
|
);
|
|
};
|
|
|
|
export default Contact;
|