218 lines
10 KiB
TypeScript
218 lines
10 KiB
TypeScript
'use client'
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { Button } from '@nextui-org/button';
|
|
import { Input, Textarea } from '@nextui-org/input';
|
|
import { Select, SelectItem, SelectSection } from '@nextui-org/react';
|
|
import React, { 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";
|
|
|
|
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="border-2 border-red-600 flex justify-center">
|
|
<img src="maps.png" alt="maps" className="" />
|
|
</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-28 right-28">
|
|
<img 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" size="md">Kirim Pesan</Button>
|
|
<img src="ar.png" alt="ar" className="absolute right-[28%] -bottom-3 hidden lg:block" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Contact;
|