476 lines
21 KiB
TypeScript
476 lines
21 KiB
TypeScript
'use client'
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { Button } from "@heroui/button";
|
|
import { Input } from "@heroui/input";
|
|
import { Select, SelectItem, SelectSection } from "@heroui/react";
|
|
import React, { useState } from 'react';
|
|
import { useForm } from 'react-hook-form';
|
|
import { z } from 'zod';
|
|
import { EyeFilledIcon, EyeSlashFilledIcon } 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 FormApplication: 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 py-2 md:py-5 lg:py-10 px-2 md:px-5 lg:px-16 space-y-2 md:space-y-5'>
|
|
<div className='text-xl font-bold'>Form Register Permohonan</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="Username"
|
|
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
|
|
endContent={
|
|
<button className="focus:outline-none" type="button" onClick={toggleVisibility}>
|
|
{isVisible ? (
|
|
<EyeSlashFilledIcon className="text-2xl text-default-400 pointer-events-none" />
|
|
) : (
|
|
<EyeFilledIcon className="text-2xl text-default-400 pointer-events-none" />
|
|
)}
|
|
</button>
|
|
}
|
|
type={isVisible ? "text" : "password"}
|
|
label="Password"
|
|
placeholder="Masukkan password 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
|
|
endContent={
|
|
<button className="focus:outline-none" type="button" onClick={toggleVisibility}>
|
|
{isVisible ? (
|
|
<EyeSlashFilledIcon className="text-2xl text-default-400 pointer-events-none" />
|
|
) : (
|
|
<EyeFilledIcon className="text-2xl text-default-400 pointer-events-none" />
|
|
)}
|
|
</button>
|
|
}
|
|
type={isVisible ? "text" : "password"}
|
|
label="Konfirmasi Password"
|
|
placeholder="Masukkan password 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="Nama Lengkap"
|
|
placeholder="Masukkan nama lengkap 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="Pekerjaan"
|
|
placeholder="Masukkan informasi pekerjaan Anda!"
|
|
variant='underlined'
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Select
|
|
label="Jenis Kelamin"
|
|
placeholder="Pilih Jenis Kelamin"
|
|
className="max-w-sm"
|
|
isRequired
|
|
variant="underlined"
|
|
classNames={{
|
|
label: ["!text-black", "font-semibold"],
|
|
// mainWrapper: "rounded",
|
|
listboxWrapper:
|
|
"bg-white w-full !text-indigo-500 text-center font-bold",
|
|
popoverContent: "bg-white !text-indigo-500",
|
|
trigger:
|
|
"hover:!bg-gray-100",
|
|
value: "!text-black"
|
|
}}
|
|
listboxProps={{
|
|
itemClasses: {
|
|
base: [
|
|
"!text-left",
|
|
"!text-black",
|
|
"!bg-white",
|
|
"text-indigo-500 ",
|
|
"data-[selectable=true]:!text-indigo-500",
|
|
"data-[pressed=true]:text-indigo-500",
|
|
"data-[hover=true]:!text-indigo-300",
|
|
],
|
|
wrapper: ["!bg-white border-none"],
|
|
|
|
},
|
|
}}
|
|
onChange={onChangeGender}
|
|
>
|
|
<SelectSection >
|
|
<SelectItem key="male">Laki-laki</SelectItem>
|
|
<SelectItem key="female">Perempuan</SelectItem>
|
|
</SelectSection>
|
|
</Select>
|
|
</div>
|
|
<div>
|
|
<Select
|
|
label="Tipe"
|
|
placeholder="Pilih tipe permohonan informasi sesuai kebutuhn anda"
|
|
className="max-w-sm"
|
|
isRequired
|
|
variant="underlined"
|
|
classNames={{
|
|
label: ["!text-black", "font-semibold"],
|
|
// mainWrapper: "rounded",
|
|
listboxWrapper:
|
|
"bg-white w-full !text-indigo-500 text-center font-bold",
|
|
popoverContent: "bg-white !text-indigo-500",
|
|
trigger:
|
|
"hover:!bg-gray-100",
|
|
value: "!text-black"
|
|
}}
|
|
listboxProps={{
|
|
itemClasses: {
|
|
base: [
|
|
"!text-left",
|
|
"!text-black",
|
|
"!bg-white",
|
|
"text-indigo-500 ",
|
|
"data-[selectable=true]:!text-indigo-500",
|
|
"data-[pressed=true]:text-indigo-500",
|
|
"data-[hover=true]:!text-indigo-300",
|
|
],
|
|
wrapper: ["!bg-white border-none"],
|
|
|
|
},
|
|
}}
|
|
onChange={onChangeGender}
|
|
>
|
|
<SelectSection >
|
|
<SelectItem key="male">Laki-laki</SelectItem>
|
|
<SelectItem key="female">Perempuan</SelectItem>
|
|
</SelectSection>
|
|
</Select>
|
|
</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="KTP"
|
|
placeholder="Masukkan nomor ktp 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="Alamat"
|
|
placeholder="Masukkan alamat 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="No Telp"
|
|
placeholder="Masukkan nomor telepon 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
|
|
className="max-w-sm"
|
|
classNames={{
|
|
input: ["w-full", "bg-transparent", "!text-black"],
|
|
mainWrapper: ["w-full", "bg-transparent"],
|
|
innerWrapper: ["bg-transparent"],
|
|
label: ["!text-black", "font-semibold", "text-xs", "w-full"],
|
|
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="Tanggal Lahir"
|
|
isReadOnly
|
|
labelPlacement="outside-left"
|
|
/>
|
|
<Datepicker
|
|
useRange={false}
|
|
asSingle={true}
|
|
value={startDateValue}
|
|
displayFormat="DD/MM/YYYY"
|
|
onChange={(e: any) => handleValueChange(e, 1)}
|
|
inputClassName="w-full bg-transparent border-1 border-gray-200 px-2 py-[6px] rounded-xl "
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Select
|
|
label="Pendidikan Terakhir"
|
|
placeholder="Pilih Pendidikan terakhir anda"
|
|
className="max-w-sm"
|
|
isRequired
|
|
variant="underlined"
|
|
classNames={{
|
|
label: ["!text-black", "font-semibold"],
|
|
// mainWrapper: "rounded",
|
|
listboxWrapper:
|
|
"bg-white w-full !text-indigo-500 text-center font-bold",
|
|
popoverContent: "bg-white !text-indigo-500",
|
|
trigger:
|
|
"hover:!bg-gray-100",
|
|
value: "!text-black"
|
|
}}
|
|
listboxProps={{
|
|
itemClasses: {
|
|
base: [
|
|
"!text-left",
|
|
"!text-black",
|
|
"!bg-white",
|
|
"text-indigo-500 ",
|
|
"data-[selectable=true]:!text-indigo-500",
|
|
"data-[pressed=true]:text-indigo-500",
|
|
"data-[hover=true]:!text-indigo-300",
|
|
],
|
|
wrapper: ["!bg-white border-none"],
|
|
|
|
},
|
|
}}
|
|
// onChange={onChangeGender}
|
|
>
|
|
<SelectSection >
|
|
<SelectItem key="sd">SD</SelectItem>
|
|
<SelectItem key="smp">SMP</SelectItem>
|
|
<SelectItem key="sma">SMA</SelectItem>
|
|
<SelectItem key="d">D1/D2/D3</SelectItem>
|
|
<SelectItem key="s1">S1</SelectItem>
|
|
<SelectItem key="s2">S2</SelectItem>
|
|
<SelectItem key="femals3">S3</SelectItem>
|
|
</SelectSection>
|
|
</Select>
|
|
</div>
|
|
<Button className="w-full bg-[#DD8306] font-semibold">Daftar Sekarang</Button>
|
|
</div>)
|
|
);
|
|
};
|
|
|
|
export default FormApplication;
|