111 lines
5.2 KiB
TypeScript
111 lines
5.2 KiB
TypeScript
"use client"
|
|
import React from 'react'
|
|
import { useForm, SubmitHandler } from "react-hook-form"
|
|
import { postMessage } from '@/utils'
|
|
import { MessageProps } from '@/types'
|
|
import { toast } from 'react-hot-toast';
|
|
|
|
type Props = {
|
|
startLoading: () => void
|
|
stopLoading: () => void
|
|
}
|
|
const ContactForm = ({ startLoading, stopLoading }: Props) => {
|
|
|
|
|
|
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
reset,
|
|
formState: {},
|
|
} = useForm<MessageProps>()
|
|
const onSubmit: SubmitHandler<MessageProps> = async (data) => {
|
|
try {
|
|
startLoading; // Set loading state to true
|
|
const result = await postMessage(data);
|
|
if (result.success) {
|
|
toast.success('已收到您的訊息，我們會盡快回覆您！');
|
|
reset(); // Reset form fields
|
|
// Reset form or perform any other actions on success
|
|
} else {
|
|
toast.error('Failed to send message. Please try again.');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error sending message:', error);
|
|
toast.error('An error occurred. Please try again later.');
|
|
} finally {
|
|
stopLoading; // Set loading state back to false
|
|
}
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="w-full flex flex-col h-auto items-center justify-center relative mb-9 " >
|
|
<div className="text-4xl max-sm:text-3xl lg:text-5xl text-center mt-[10vh] mb-5">
|
|
讓我們知道您的想法
|
|
</div>
|
|
<div className="bg-[url('/images/014.png')] absolute bottom--10 inset-0 h-auto w-full bg-contain bg-bottom bg-no-repeat hidden lg:block"></div>
|
|
|
|
<div className="font-[sans-serif] w-full md:h-[62vh] max-w-5xl relative bg-transparent lg:bg-white shadow-none lg:shadow-[0_2px_10px_-3px_rgba(6,81,237,0.3)] rounded-3xl overflow-hidden lg:mt-14 lg:mb-56 sm:my-15 max-md:my-0 sm:mx-20">
|
|
|
|
|
|
<div className="grid lg:grid-cols-10 ">
|
|
|
|
<form onSubmit={handleSubmit(onSubmit)} className="flex rounded-tl-3xl rounded-bl-3xl h-auto lg:col-span-6 items-center justify-center">
|
|
|
|
<div className="space-y-3 w-full mx-11 h-auto">
|
|
<div className="grid md:grid-cols-2 space-y-3">
|
|
<div className=" md:mr-3 mt-3">
|
|
<p className='text-sm'>姓名</p>
|
|
<input type='text'
|
|
{...register("name", { required: true })}
|
|
className="w-full mt-3 max-lg:bg-gray-100 md:bg-gray-100 max-sm:bg-[#F6E2E3] rounded-md py-3 px-4 text-sm outline-[#EA004F] md:focus-within:bg-transparent border border-gray-200" />
|
|
</div>
|
|
<div >
|
|
<p className='text-sm'>電話</p>
|
|
<input type='phone'
|
|
{...register("phone", { required: true })}
|
|
className="w-full mt-3 max-lg:bg-gray-100 md:bg-gray-100 max-sm:bg-[#F6E2E3] rounded-md py-3 px-4 text-sm outline-[#EA004F] md:focus-within:bg-transparent border border-gray-200" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-5">
|
|
<p className='text-sm'>電郵</p>
|
|
<input type='email'
|
|
{...register("email", { required: true })}
|
|
className="w-full mt-3 max-lg:bg-gray-100 md:bg-gray-100 max-sm:bg-[#F6E2E3] rounded-md py-3 px-4 text-sm outline-[#EA004F] md:focus-within:bg-transparent border border-gray-200" />
|
|
</div>
|
|
<div className="mt-5">
|
|
<p className='text-sm'>訊息</p>
|
|
<textarea
|
|
{...register("message", { required: true })}
|
|
className="w-full mt-3 h-36 max-lg:bg-gray-100 md:bg-gray-100 max-sm:bg-[#F6E2E3] rounded-md px-4 text-sm pt-3 outline-[#EA004F] md:focus-within:bg-transparent border border-gray-200"></textarea>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
className={`middle none center rounded-full md:px-8 md:py-3 text-sm max-sm:w-full py-3 px-5 bg-mainColor font-bold uppercase text-white shadow-md shadow-pink-500/20 transition-all hover:shadow-lg hover:shadow-pink-500/40`}
|
|
data-ripple-light="true"
|
|
|
|
>
|
|
{'發送'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
<div className="text-center bg-[url('/images/contact.png')] bg-cover h-auto w-full lg:col-span-4 sm:hidden md:hidden lg:block">
|
|
{/* <img src="/images/contact.png" /> */}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ContactForm
|